:root {
  --bg: #f6f8f3;
  --surface: #ffffff;
  --surface-2: #eef6ef;
  --surface-3: #dceee3;
  --field: #ffffff;
  --field-subtle: #f8fbf6;
  --line: #ccd8cd;
  --line-soft: #e2e9df;
  --text: #17231c;
  --muted: #647166;
  --faint: #899487;
  --accent: #2f7657;
  --accent-ink: #ffffff;
  --good: #168053;
  --good-bg: #e4f7eb;
  --warn: #9a6b05;
  --warn-bg: #fff3cf;
  --bad: #bd4634;
  --bad-bg: #ffe5df;
  --focus: #275f48;
  --shadow: 0 24px 70px rgba(34, 65, 43, 0.12);
  --grid-x: rgba(63, 143, 107, 0.055);
  --grid-y: rgba(63, 143, 107, 0.04);
  --sidebar-bg: rgba(255, 255, 255, 0.9);
  --hero-bg: linear-gradient(135deg, #ffffff 0%, #edf7ef 100%);
  --card-bg: rgba(255, 255, 255, 0.92);
  --hover-line: #aec3b2;
  --hover-bg: #f7fbf6;
  --good-line: #a9dfbd;
  --warn-line: #edd486;
  --bad-line: #efb4a8;
  --decision-good-line: #9ddbb5;
  --decision-warn-line: #ecd076;
  --decision-bad-line: #efaa9d;
  --toggle-bg: #edf5ee;
  --table-hover: rgba(63, 143, 107, 0.07);
  --empty-bg: rgba(255, 255, 255, 0.72);
  --theme-wash: rgba(246, 248, 243, 0.66);
  --radar-fill: rgba(47, 118, 87, 0.18);
  --radar-glow: rgba(47, 118, 87, 0.24);
  --radius: 8px;
  --font: "Google Sans Flex", "Google Sans", "Google Sans Text", "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Google Sans Flex", "Google Sans", "Google Sans Text", "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-serif: "Cinzel", Georgia, "Times New Roman", serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f1411;
  --surface: #171f1a;
  --surface-2: #203027;
  --surface-3: #2b4336;
  --field: #111815;
  --field-subtle: #131c17;
  --line: #365244;
  --line-soft: #25372e;
  --text: #f3f7ef;
  --muted: #a9b8ac;
  --faint: #7f9285;
  --accent: #9ee6bd;
  --accent-ink: #0d1f16;
  --good: #91e8b5;
  --good-bg: #102d1f;
  --warn: #f2cc70;
  --warn-bg: #312710;
  --bad: #ff987f;
  --bad-bg: #351914;
  --focus: #b9f3ce;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --grid-x: rgba(185, 243, 206, 0.04);
  --grid-y: rgba(185, 243, 206, 0.028);
  --sidebar-bg: rgba(15, 20, 17, 0.92);
  --hero-bg: linear-gradient(135deg, #19231d 0%, #111915 100%);
  --card-bg: rgba(23, 31, 26, 0.92);
  --hover-line: #4a6757;
  --hover-bg: #1e2b24;
  --good-line: rgba(145, 232, 181, 0.46);
  --warn-line: rgba(242, 204, 112, 0.5);
  --bad-line: rgba(255, 152, 127, 0.5);
  --decision-good-line: rgba(145, 232, 181, 0.58);
  --decision-warn-line: rgba(242, 204, 112, 0.58);
  --decision-bad-line: rgba(255, 152, 127, 0.58);
  --toggle-bg: #101815;
  --table-hover: rgba(185, 243, 206, 0.07);
  --empty-bg: rgba(23, 31, 26, 0.72);
  --theme-wash: rgba(15, 20, 17, 0.68);
  --radar-fill: rgba(158, 230, 189, 0.2);
  --radar-glow: rgba(158, 230, 189, 0.22);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  transition: background-color 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(90deg, var(--grid-x) 1px, transparent 1px),
    linear-gradient(180deg, var(--grid-y) 1px, transparent 1px),
    var(--bg);
  background-size: 48px 48px;
  color: var(--text);
  font-family: var(--font);
  font-optical-sizing: auto;
  transition:
    background-color 900ms cubic-bezier(0.16, 1, 0.3, 1),
    color 900ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: var(--theme-wash);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(0) saturate(1);
  -webkit-backdrop-filter: blur(0) saturate(1);
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 900ms cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 900ms cubic-bezier(0.16, 1, 0.3, 1),
    -webkit-backdrop-filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
  content: "";
}

body.theme-transitioning::before {
  opacity: 1;
  backdrop-filter: blur(18px) saturate(0.92);
  -webkit-backdrop-filter: blur(18px) saturate(0.92);
}

body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
  transition:
    background-color 900ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 900ms cubic-bezier(0.16, 1, 0.3, 1),
    color 900ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 900ms cubic-bezier(0.16, 1, 0.3, 1),
    fill 900ms cubic-bezier(0.16, 1, 0.3, 1),
    stroke 900ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-shell {
  transition: filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.theme-transitioning .app-shell {
  filter: saturate(0.94);
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .app-shell,
  body::before,
  body.theme-transitioning,
  body.theme-transitioning *,
  body.theme-transitioning *::before,
  body.theme-transitioning *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }

  body::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

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

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
  height: 100vh;
  padding: 24px;
  border-right: 1px solid var(--line-soft);
  background: var(--sidebar-bg);
  backdrop-filter: blur(18px);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}

.brand-block h1,
.topbar h2,
.dashboard-hero h2,
.section-header h3,
.step-heading h3,
.explain-card h3,
.what-if-panel h3,
.scenario-panel h3,
.settings-card h3 {
  margin: 0;
  letter-spacing: 0;
}

.brand-block h1 {
  font-size: 21px;
}

.eyebrow,
.mini-label,
.step-kicker,
.metric span,
.job-meta,
.mini-metrics span,
.hero-number-row span,
.result-metric span,
.negotiation-row span,
.total-pill span,
.time-total span,
.risk-readout span {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-item,
.primary-button,
.secondary-button,
.text-button,
.mega-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.nav-item {
  justify-content: flex-start;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  text-decoration: none;
}

.nav-item:hover,
.nav-item.active {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.nav-icon {
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.nav-icon.plus {
  position: relative;
}

.nav-icon.plus::before,
.nav-icon.plus::after {
  position: absolute;
  content: "";
  background: currentColor;
  inset: 5px 2px auto;
  height: 1px;
}

.nav-icon.plus::after {
  transform: rotate(90deg);
}

.nav-icon.list {
  border-left: 4px solid currentColor;
}

.nav-icon.gear {
  border-radius: 50%;
}

.nav-icon.future {
  border-radius: 50%;
}

.nav-icon.future::after {
  display: block;
  width: 5px;
  height: 5px;
  margin: 3px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.nav-icon.home {
  border: none;
  background: currentColor;
  border-radius: 2px;
  clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0% 100%, 0% 38%);
}

.sidebar-card {
  margin-top: auto;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
}

.sidebar-card strong {
  display: block;
  margin: 10px 0 5px;
  font-family: var(--mono);
  font-size: 20px;
}

.sidebar-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.main-content {
  min-width: 0;
  padding: 28px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar h2 {
  margin-top: 5px;
  font-size: 28px;
}

.primary-button {
  padding: 0 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 850;
}

.primary-button:hover,
.mega-cta:hover {
  transform: translateY(-1px);
}

.secondary-button {
  padding: 0 14px;
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 750;
}

.secondary-button:hover {
  border-color: var(--hover-line);
  background: var(--surface-3);
}

button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.text-button {
  min-height: 36px;
  padding: 0 4px;
  background: transparent;
  color: var(--accent);
  font-weight: 750;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--hero-bg);
  box-shadow: var(--shadow);
}

.hero-copy h2 {
  max-width: 760px;
  margin-top: 8px;
  font-size: clamp(32px, 5vw, 68px);
  line-height: 0.98;
}

.hero-copy p:last-child {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.mega-cta {
  min-width: 230px;
  min-height: 66px;
  padding: 0 22px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 17px;
  font-weight: 900;
}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.entry-card {
  display: grid;
  gap: 10px;
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  text-align: left;
}

.entry-card strong {
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.05;
}

.entry-card span:last-child {
  max-width: 520px;
  color: var(--muted);
  line-height: 1.5;
}

.entry-kicker {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 30px;
}

.metric,
.recent-job,
.analysis-panel,
.live-panel,
.explain-card,
.what-if-panel,
.scenario-panel,
.settings-card,
.detail-card,
.project-table-wrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.metric {
  padding: 18px;
}

.metric strong {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: clamp(23px, 3vw, 34px);
  letter-spacing: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.section-header h3 {
  margin-top: 5px;
  font-size: 22px;
}

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

.recent-job {
  display: grid;
  gap: 16px;
  min-height: 176px;
  padding: 16px;
  color: var(--text);
  text-align: left;
}

.recent-job:hover {
  border-color: var(--hover-line);
  background: var(--hover-bg);
}

.recent-job h4 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.3;
}

.job-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  text-transform: none;
}

.job-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.money {
  font-family: var(--mono);
  font-weight: 850;
}

.decision-badge,
.risk-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.decision-badge.worth,
.risk-badge.low {
  border: 1px solid var(--good-line);
  background: var(--good-bg);
  color: var(--good);
}

.decision-badge.maybe,
.risk-badge.medium {
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn);
}

.decision-badge.not,
.risk-badge.high {
  border: 1px solid var(--bad-line);
  background: var(--bad-bg);
  color: var(--bad);
}

.analysis-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 18px;
}

.analysis-panel,
.live-panel {
  padding: 20px;
}

.stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.stepper button {
  width: 100%;
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--field-subtle);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.stepper button.active {
  border-color: var(--accent);
  color: var(--text);
}

.stepper button.complete {
  border-color: var(--good-line);
  color: var(--good);
}

.step-screen {
  display: none;
}

.step-screen.active {
  display: block;
}

.step-heading {
  margin-bottom: 18px;
}

.step-heading h3 {
  margin-top: 5px;
  font-size: 26px;
}

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

.field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 8px;
}

.field > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.language-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-height: 46px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--toggle-bg);
}

.language-options button {
  min-width: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}

.language-options button.active {
  background: var(--surface-3);
  color: var(--text);
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  padding: 0 12px;
}

textarea {
  min-height: 112px;
  padding-top: 12px;
  resize: vertical;
}

.input-prefix,
.input-suffix {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
}

.input-prefix span,
.input-suffix span {
  display: grid;
  min-width: 42px;
  place-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 850;
}

.input-prefix input,
.input-suffix input {
  min-width: 0;
  border: 0;
  background: transparent;
}

.time-input input {
  flex: 1 1 auto;
}

.time-unit-select {
  flex: 0 0 96px;
  width: auto;
  min-height: 44px;
  border: 0;
  border-left: 1px solid var(--line-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: transparent;
  color: var(--muted);
  padding: 0 26px 0 10px;
  font-weight: 850;
}

.validation-message {
  min-height: 18px;
  color: var(--bad);
  font-size: 12px;
}

.expense-list,
.risk-list {
  display: grid;
  gap: 10px;
}

.expense-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) 42px;
  gap: 10px;
  align-items: center;
}

.icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
}

.row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.total-pill,
.time-total,
.risk-readout,
.standard-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
}

.total-pill strong,
.time-total strong,
.risk-readout strong,
.standard-note strong {
  font-family: var(--mono);
  font-size: 22px;
}

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

.time-row {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--field-subtle);
}

.time-row label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.time-total {
  margin-top: 14px;
  border-color: var(--accent);
}

.risk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--field-subtle);
}

.risk-question strong {
  display: block;
  margin-bottom: 4px;
}

.risk-question span {
  color: var(--muted);
  font-size: 13px;
}

.toggle-pair {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--toggle-bg);
}

.toggle-pair button {
  min-width: 54px;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}

.toggle-pair button.active {
  background: var(--surface-3);
  color: var(--text);
}

.risk-readout {
  margin-top: 14px;
}

.standard-note {
  margin-top: 8px;
}

.standard-note {
  align-items: flex-start;
  flex-direction: column;
}

.standard-note span {
  color: var(--muted);
  line-height: 1.5;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.live-panel {
  position: sticky;
  top: 28px;
}

.decision-mini {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}

.decision-mini strong {
  font-family: var(--mono);
  font-size: 36px;
}

.decision-mini small {
  color: var(--muted);
}

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

.mini-metrics div {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--field);
}

.mini-metrics strong {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
}

.transparent-rule {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field-subtle);
}

.transparent-rule p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.result-shell {
  position: relative;
  display: grid;
  gap: 14px;
  max-width: 1120px;
  isolation: isolate;
}

.result-shell::before {
  position: absolute;
  inset: -28px -20px auto;
  z-index: -1;
  height: 360px;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(ellipse at 50% 46%, transparent 0 17%, rgba(242, 250, 255, 0.24) 18%, transparent 20%),
    radial-gradient(ellipse at 48% 48%, transparent 0 29%, rgba(242, 250, 255, 0.16) 30%, transparent 32%),
    radial-gradient(ellipse at 54% 44%, transparent 0 42%, rgba(242, 250, 255, 0.1) 43%, transparent 45%),
    repeating-radial-gradient(ellipse at 52% 45%, rgba(231, 245, 255, 0.16) 0 1px, transparent 2px 14px),
    conic-gradient(from 18deg at 50% 48%, transparent 0 8deg, rgba(231, 245, 255, 0.16) 8deg 9deg, transparent 9deg 22deg);
  border-radius: 22px;
  opacity: 0.18;
  filter: blur(0.2px) drop-shadow(0 0 28px rgba(202, 229, 255, 0.16));
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at 50% 44%, #000 0 48%, transparent 78%);
  animation: resultWebFloat 16000ms ease-in-out infinite;
}

:root:not([data-theme="dark"]) .result-shell::before {
  opacity: 0.28;
  filter: blur(0.15px);
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 0 17%, rgba(42, 49, 61, 0.12) 18%, transparent 20%),
    radial-gradient(ellipse at 48% 48%, transparent 0 29%, rgba(42, 49, 61, 0.09) 30%, transparent 32%),
    radial-gradient(ellipse at 54% 44%, transparent 0 42%, rgba(42, 49, 61, 0.07) 43%, transparent 45%),
    repeating-radial-gradient(ellipse at 52% 45%, rgba(42, 49, 61, 0.1) 0 1px, transparent 2px 14px),
    conic-gradient(from 18deg at 50% 48%, transparent 0 8deg, rgba(42, 49, 61, 0.08) 8deg 9deg, transparent 9deg 22deg);
}

.decision-hero {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.decision-hero > * {
  position: relative;
  z-index: 1;
}

.decision-hero::after {
  position: absolute;
  top: -110px;
  right: -80px;
  z-index: 0;
  width: min(520px, 56vw);
  aspect-ratio: 1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle, transparent 0 18%, rgba(231, 245, 255, 0.22) 19%, transparent 21%),
    radial-gradient(circle, transparent 0 32%, rgba(231, 245, 255, 0.13) 33%, transparent 35%),
    radial-gradient(circle, transparent 0 48%, rgba(231, 245, 255, 0.09) 49%, transparent 51%),
    repeating-radial-gradient(circle, rgba(231, 245, 255, 0.16) 0 1px, transparent 2px 15px),
    conic-gradient(from -12deg, transparent 0 9deg, rgba(231, 245, 255, 0.12) 9deg 10deg, transparent 10deg 24deg);
  border-radius: 50%;
  opacity: 0.18;
  filter: drop-shadow(0 0 34px rgba(202, 229, 255, 0.12));
  mix-blend-mode: screen;
  animation: resultWebFloat 15000ms ease-in-out infinite reverse;
}

:root:not([data-theme="dark"]) .decision-hero::after {
  opacity: 0.24;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(38, 47, 60, 0.12) 19%, transparent 21%),
    radial-gradient(circle, transparent 0 32%, rgba(38, 47, 60, 0.09) 33%, transparent 35%),
    radial-gradient(circle, transparent 0 48%, rgba(38, 47, 60, 0.06) 49%, transparent 51%),
    repeating-radial-gradient(circle, rgba(38, 47, 60, 0.08) 0 1px, transparent 2px 15px),
    conic-gradient(from -12deg, transparent 0 9deg, rgba(38, 47, 60, 0.07) 9deg 10deg, transparent 10deg 24deg);
}

.decision-hero.worth {
  border-color: var(--decision-good-line);
}

.decision-hero.maybe {
  border-color: var(--decision-warn-line);
}

.decision-hero.not {
  border-color: var(--decision-bad-line);
}

.decision-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.decision-title-row h3 {
  margin: 0;
  font-size: clamp(34px, 8vw, 72px);
  line-height: 0.95;
  overflow-wrap: anywhere;
}

#resultTitle {
  max-width: min(100%, 760px);
  font-family: var(--display-serif);
  font-weight: 500;
}

.decision-hero p:not(.eyebrow) {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.hero-number-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.hero-number-row div {
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--field);
}

.hero-number-row strong {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: clamp(28px, 5vw, 48px);
}

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

.result-metric {
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
}

.result-metric strong {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 24px;
}

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

.insight-card {
  position: relative;
  display: grid;
  min-height: 184px;
  grid-template-columns: minmax(0, 0.9fr) minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 84% 20%, rgba(193, 107, 255, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    var(--card-bg);
  box-shadow: var(--shadow);
  isolation: isolate;
  animation: insightCardIn 560ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.insight-card::before {
  position: absolute;
  inset: -35%;
  z-index: -1;
  content: "";
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.14), transparent 44%),
    radial-gradient(circle, rgba(150, 85, 214, 0.14), transparent 58%);
  opacity: 0.7;
  transform: translateX(-18%) rotate(12deg);
  animation: insightSheen 7200ms ease-in-out infinite;
}

.insight-card:hover {
  border-color: var(--hover-line);
  box-shadow:
    0 26px 74px rgba(0, 0, 0, 0.3),
    0 0 32px rgba(193, 107, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-3px);
}

.insight-copy {
  display: grid;
  gap: 8px;
}

.insight-copy span,
.insight-copy small {
  color: var(--muted);
}

.insight-copy span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.insight-copy strong {
  font-family: var(--mono);
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1;
}

.insight-copy small {
  line-height: 1.45;
}

.insight-visual {
  min-width: 0;
}

.insight-visual-svg {
  display: block;
  width: 100%;
  min-height: 116px;
  overflow: visible;
}

.insight-horizon,
.insight-thread {
  fill: none;
  stroke: rgba(193, 107, 255, 0.52);
  stroke-linecap: round;
}

.insight-horizon {
  stroke-width: 6;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 14px rgba(193, 107, 255, 0.38));
  animation:
    insightLineDraw 1100ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards,
    insightLineBreathe 4200ms ease-in-out 1400ms infinite;
}

.insight-thread {
  stroke-width: 1.4;
  stroke: rgba(255, 255, 255, 0.34);
  animation: insightThreadDrift 5400ms ease-in-out infinite;
}

.insight-thread.two {
  animation-delay: -2200ms;
}

.insight-halo,
.insight-meter-bg,
.insight-meter {
  fill: none;
}

.insight-halo {
  fill: rgba(193, 107, 255, 0.14);
  stroke: rgba(255, 255, 255, 0.2);
  animation: insightHaloPulse 4800ms ease-in-out infinite;
}

.insight-meter-bg {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 4;
}

.insight-meter {
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: var(--score) 100;
  transform: rotate(-90deg);
  transform-origin: 90px 58px;
  filter: drop-shadow(0 0 12px rgba(193, 107, 255, 0.48));
}

.insight-spark {
  fill: rgba(231, 203, 255, 0.9);
  filter: drop-shadow(0 0 8px rgba(193, 107, 255, 0.48));
  animation: insightSpark 3600ms ease-in-out infinite;
}

.insight-spark.b {
  animation-delay: -1200ms;
}

.insight-spark.c {
  animation-delay: -2300ms;
}

.insight-groundshadow {
  fill: rgba(6, 4, 10, 0.4);
  filter: blur(4px);
  transform-origin: 90px 101px;
  animation: insightSphereBreathe 5200ms ease-in-out infinite;
}

.insight-sphere {
  filter: drop-shadow(0 10px 18px rgba(6, 4, 10, 0.55)) drop-shadow(0 0 22px rgba(var(--accent-rgb, 193, 107, 255), 0.4));
  transform-origin: 90px 58px;
  animation: insightSphereBreathe 5200ms ease-in-out infinite;
}

.insight-spec {
  opacity: 0.85;
  filter: blur(1.2px);
  animation: insightSpecTwinkle 3400ms ease-in-out infinite;
}

:root:not([data-theme="dark"]) .insight-card {
  background:
    radial-gradient(circle at 84% 20%, rgba(150, 85, 214, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.32)),
    var(--card-bg);
}

:root:not([data-theme="dark"]) .insight-thread {
  stroke: rgba(54, 42, 72, 0.2);
}

:root:not([data-theme="dark"]) .insight-halo {
  fill: rgba(150, 85, 214, 0.1);
  stroke: rgba(54, 42, 72, 0.12);
}

:root:not([data-theme="dark"]) .insight-meter-bg {
  stroke: rgba(54, 42, 72, 0.12);
}

.radar-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  justify-items: center;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(193, 107, 255, 0.26);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 48%, rgba(188, 103, 255, 0.42) 0%, rgba(129, 72, 205, 0.24) 28%, transparent 58%),
    radial-gradient(circle at 14% 16%, rgba(205, 176, 255, 0.1) 0%, transparent 32%),
    linear-gradient(135deg, rgba(54, 43, 70, 0.98), rgba(29, 26, 42, 0.99));
  box-shadow:
    0 32px 86px rgba(27, 16, 43, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #f6edff;
  overflow: hidden;
}

.radar-card::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.028) 48%, transparent 72%);
  background-position:
    0 0,
    -140% 0;
  background-size:
    16px 16px,
    220% 100%;
  opacity: 0.24;
  animation:
    radarParticleDrift 18000ms linear infinite,
    radarStageSweep 6200ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  content: "";
}

.radar-heading {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}

.radar-heading .eyebrow {
  color: rgba(223, 204, 255, 0.66);
}

.radar-heading h3 {
  margin: 6px 0 0;
  font-family: var(--display-serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  color: #fbf7ff;
  text-shadow: 0 0 26px rgba(193, 107, 255, 0.18);
}

.radar-visual {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-height: clamp(410px, 52vw, 600px);
  place-items: center;
}

.radar-stage {
  position: relative;
  display: grid;
  width: min(100%, 660px);
  aspect-ratio: 1;
  place-items: center;
  perspective: 900px;
  transform-style: preserve-3d;
  animation: radarStageFloat 7600ms ease-in-out infinite;
}

.radar-stage::before {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(211, 151, 255, 0.32) 0%, rgba(128, 77, 203, 0.17) 34%, transparent 66%),
    conic-gradient(from 90deg, rgba(193, 107, 255, 0.28), rgba(123, 95, 255, 0.06), rgba(241, 207, 255, 0.16), rgba(193, 107, 255, 0.28));
  filter: blur(24px);
  opacity: 0.72;
  animation: radarAura 6800ms ease-in-out infinite;
  content: "";
}

.radar-atmosphere {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  pointer-events: none;
}

.radar-atmosphere::before,
.radar-atmosphere::after {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(216, 183, 255, 0.07);
  border-radius: inherit;
  opacity: 0.16;
  animation: radarOrbit 18000ms linear infinite;
  content: "";
}

.radar-atmosphere::after {
  inset: 20%;
  border-style: dashed;
  opacity: 0.1;
  animation-duration: 24000ms;
  animation-direction: reverse;
}

.radar-orbit-dot {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #dca0ff;
  box-shadow:
    0 0 0 4px rgba(193, 107, 255, 0.08),
    0 0 18px rgba(193, 107, 255, 0.62);
  opacity: 0.64;
  transform-origin: 0 0;
  animation: radarDotOrbit 14000ms linear infinite;
}

.radar-orbit-dot.dot-a {
  --orbit-radius: 220px;
  animation-delay: -1200ms;
}

.radar-orbit-dot.dot-b {
  --orbit-radius: 180px;
  width: 6px;
  background: #f4dcff;
  animation-duration: 18000ms;
  animation-delay: -5200ms;
}

.radar-orbit-dot.dot-c {
  --orbit-radius: 132px;
  width: 5px;
  background: #a98dff;
  animation-duration: 11600ms;
  animation-direction: reverse;
  animation-delay: -3000ms;
}

.radar-energy-core {
  position: absolute;
  z-index: 0;
  width: clamp(118px, 22vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(17, 7, 40, 0.86) 0%, rgba(51, 24, 98, 0.72) 34%, rgba(146, 77, 232, 0.22) 58%, transparent 76%);
  box-shadow:
    0 0 44px rgba(91, 58, 235, 0.38),
    0 0 86px rgba(197, 95, 255, 0.18);
  opacity: 0;
  transform: scale(0.72);
  animation:
    radarCoreIn 860ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards,
    radarCoreBreath 5200ms ease-in-out 1100ms infinite;
}

.radar-burst {
  position: absolute;
  z-index: 0;
  inset: -2%;
  width: 104%;
  height: 104%;
  overflow: visible;
  opacity: 0.68;
  filter:
    drop-shadow(0 0 8px rgba(199, 105, 255, 0.34))
    drop-shadow(0 0 18px rgba(88, 72, 255, 0.18));
  transform: scale(0.88) rotate(-4deg);
  transform-origin: center;
  animation: radarBurstDrift 9200ms ease-in-out infinite;
  pointer-events: none;
}

.radar-burst-ray {
  fill: none;
  stroke: rgba(249, 235, 255, 0.58);
  stroke-linecap: round;
  stroke-width: 0.62;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    radarRayDraw 1250ms cubic-bezier(0.16, 1, 0.3, 1) var(--draw-delay, 0ms) forwards,
    radarRayBreath 5600ms ease-in-out var(--breath-delay, 1600ms) infinite,
    radarRayWaver 6800ms ease-in-out var(--waver-delay, 1200ms) infinite;
}

.radar-burst-ray.hot {
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 0.96;
}

.radar-burst-ray.cool {
  stroke: rgba(128, 95, 255, 0.5);
  stroke-width: 0.78;
}

.radar-burst-dot {
  fill: rgba(255, 245, 255, 0.86);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 235, 255, 0.7));
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
  animation:
    radarRayDotIn 480ms cubic-bezier(0.16, 1, 0.3, 1) var(--draw-delay, 0ms) forwards,
    radarRayDotPulse 4200ms ease-in-out var(--breath-delay, 1600ms) infinite;
}

.radar-burst-dot.cool {
  fill: rgba(159, 128, 255, 0.7);
}

.radar-scan-ring {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(242, 220, 255, 0.28) 20deg, transparent 58deg);
  filter: blur(0.2px);
  opacity: 0.12;
  mask: radial-gradient(circle, transparent 0 57%, #000 58% 60%, transparent 61%);
  -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 58% 60%, transparent 61%);
  animation: radarScan 7200ms linear infinite;
}

.radar-pulse {
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(229, 209, 255, 0.16);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 0 30px rgba(193, 107, 255, 0.22),
    inset 0 0 28px rgba(193, 107, 255, 0.08);
  animation: radarPulse 3800ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.radar-pulse.second {
  animation-delay: 900ms;
}

.radar-chart {
  position: relative;
  z-index: 2;
  width: min(100%, 610px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 30px 54px rgba(193, 107, 255, 0.3));
}

.radar-ring {
  fill: none;
  stroke: rgba(230, 210, 255, 0.13);
  stroke-width: 1;
  opacity: 0;
  transform: scale(0.74);
  transform-box: fill-box;
  transform-origin: center;
  animation: radarRingIn 860ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.radar-axis-line {
  stroke: rgba(230, 210, 255, 0.16);
  stroke-dasharray: 2 5;
  stroke-width: 1;
  opacity: 0;
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: center;
  animation: radarAxisIn 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.radar-label {
  fill: rgba(238, 226, 255, 0.82);
  font-family: var(--font);
  font-size: 11.8px;
  font-weight: 900;
  letter-spacing: 0;
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(193, 107, 255, 0.24));
  animation: radarLabelIn 620ms ease 680ms forwards;
}

.radar-depth,
.radar-area {
  fill: url(#radarAreaGradient);
  opacity: 0;
  transform: scale(0.76);
  transform-box: fill-box;
  transform-origin: center;
}

.radar-depth {
  filter: blur(10px);
  opacity: 0;
  animation:
    radarGrow 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
    radarDepthDrift 5200ms ease-in-out 900ms infinite;
}

.radar-area {
  filter: url(#radarSoftGlow);
  animation:
    radarGrow 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
    radarAreaBreath 4200ms ease-in-out 900ms infinite;
}

.radar-ghost-outline,
.radar-outline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transform: scale(0.78);
  transform-box: fill-box;
  transform-origin: center;
}

.radar-ghost-outline {
  stroke: rgba(219, 156, 255, 0.24);
  stroke-width: 11;
  filter: blur(4px);
  animation: radarDraw 1380ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
}

.radar-outline {
  stroke: #c875ff;
  stroke-width: 4.4;
  filter: url(#radarSoftGlow) drop-shadow(0 8px 18px rgba(193, 107, 255, 0.52));
  animation:
    radarDraw 1280ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards,
    radarBreath 3400ms ease-in-out 1400ms infinite;
}

.radar-point-halo,
.radar-point {
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
  animation: radarDot 460ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.radar-point-halo {
  fill: rgba(193, 107, 255, 0.16);
  stroke: rgba(234, 213, 255, 0.34);
  stroke-width: 1;
  animation:
    radarDot 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
    radarNodePulse 3200ms ease-in-out 1100ms infinite;
}

.radar-point {
  fill: #ca7cff;
  stroke: #261a35;
  stroke-width: 2.7;
  filter: drop-shadow(0 0 13px rgba(214, 151, 255, 0.68));
}

.radar-score-orb {
  position: absolute;
  z-index: 3;
  display: grid;
  width: clamp(96px, 15vw, 132px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(232, 211, 255, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.42), transparent 28%),
    radial-gradient(circle, rgba(224, 171, 255, 0.46), rgba(159, 89, 219, 0.38) 58%, rgba(91, 54, 142, 0.26));
  box-shadow:
    0 20px 58px rgba(0, 0, 0, 0.28),
    0 0 54px rgba(193, 107, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #fff7ff;
  opacity: 0;
  transform: scale(0.76);
  animation:
    radarOrbIn 760ms cubic-bezier(0.16, 1, 0.3, 1) 520ms forwards,
    radarOrbBreath 4600ms ease-in-out 1300ms infinite;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.radar-score-glint {
  position: absolute;
  inset: 13%;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), transparent 42%);
  opacity: 0.58;
  transform: rotate(-18deg);
  animation: radarGlint 4800ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.radar-score-orb strong {
  align-self: end;
  font-family: var(--mono);
  font-size: clamp(28px, 5vw, 44px);
  line-height: 0.9;
}

.radar-score-orb span {
  align-self: start;
  color: rgba(246, 235, 255, 0.78);
  font-size: 12px;
  font-weight: 850;
}

.radar-legend {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  width: min(100%, 820px);
  margin-top: -8px;
}

.radar-stat {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(232, 211, 255, 0.12);
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  color: #f8f1ff;
  animation: radarStatIn 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.radar-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.radar-stat-top span {
  color: rgba(236, 225, 255, 0.7);
  font-size: 13px;
  font-weight: 850;
}

.radar-stat-top strong {
  font-family: var(--mono);
  font-size: 13px;
}

.radar-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(235, 218, 255, 0.14);
}

.radar-bar span {
  display: block;
  width: var(--score);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9959ff, #d178ff 58%, #f1d8ff);
  box-shadow: 0 0 12px rgba(193, 107, 255, 0.38);
  transform: scaleX(0);
  transform-origin: left;
  animation: radarBar 740ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}

:root:not([data-theme="dark"]) .radar-card {
  border-color: rgba(150, 85, 214, 0.18);
  background:
    radial-gradient(circle at 50% 46%, rgba(178, 92, 255, 0.18) 0%, rgba(184, 128, 236, 0.1) 30%, transparent 58%),
    radial-gradient(circle at 14% 18%, rgba(150, 85, 214, 0.08) 0%, transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 253, 0.96));
  box-shadow:
    0 24px 70px rgba(91, 55, 122, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #21172c;
}

:root:not([data-theme="dark"]) .radar-card::after {
  background:
    radial-gradient(circle, rgba(68, 43, 91, 0.12) 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 0%, rgba(68, 43, 91, 0.035) 48%, transparent 72%);
  opacity: 0.18;
}

:root:not([data-theme="dark"]) .radar-heading .eyebrow {
  color: rgba(70, 52, 89, 0.68);
}

:root:not([data-theme="dark"]) .radar-heading h3 {
  color: #24162f;
  text-shadow: 0 8px 28px rgba(150, 85, 214, 0.1);
}

:root:not([data-theme="dark"]) .radar-stage::before {
  background:
    radial-gradient(circle, rgba(185, 91, 255, 0.22) 0%, rgba(150, 85, 214, 0.1) 36%, transparent 66%),
    conic-gradient(from 90deg, rgba(150, 85, 214, 0.14), rgba(68, 43, 91, 0.035), rgba(150, 85, 214, 0.1), rgba(150, 85, 214, 0.14));
  opacity: 0.7;
}

:root:not([data-theme="dark"]) .radar-atmosphere::before,
:root:not([data-theme="dark"]) .radar-atmosphere::after {
  border-color: rgba(68, 43, 91, 0.1);
}

:root:not([data-theme="dark"]) .radar-energy-core {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.88) 0%, rgba(232, 205, 255, 0.5) 34%, rgba(150, 85, 214, 0.16) 58%, transparent 76%);
  box-shadow:
    0 0 34px rgba(150, 85, 214, 0.18),
    0 0 70px rgba(150, 85, 214, 0.12);
}

:root:not([data-theme="dark"]) .radar-burst {
  opacity: 0.46;
  filter:
    drop-shadow(0 0 5px rgba(64, 40, 82, 0.18))
    drop-shadow(0 0 14px rgba(150, 85, 214, 0.14));
}

:root:not([data-theme="dark"]) .radar-burst-ray {
  stroke: rgba(28, 22, 36, 0.44);
}

:root:not([data-theme="dark"]) .radar-burst-ray.hot {
  stroke: rgba(24, 18, 31, 0.72);
}

:root:not([data-theme="dark"]) .radar-burst-ray.cool {
  stroke: rgba(105, 61, 161, 0.36);
}

:root:not([data-theme="dark"]) .radar-burst-dot {
  fill: rgba(31, 24, 40, 0.72);
  filter: drop-shadow(0 0 5px rgba(150, 85, 214, 0.18));
}

:root:not([data-theme="dark"]) .radar-burst-dot.cool {
  fill: rgba(112, 68, 166, 0.62);
}

:root:not([data-theme="dark"]) .radar-scan-ring {
  background: conic-gradient(from 0deg, transparent 0deg, rgba(42, 31, 55, 0.16) 20deg, transparent 58deg);
  opacity: 0.1;
}

:root:not([data-theme="dark"]) .radar-pulse {
  border-color: rgba(77, 53, 103, 0.13);
  box-shadow:
    0 0 26px rgba(150, 85, 214, 0.12),
    inset 0 0 24px rgba(150, 85, 214, 0.06);
}

:root:not([data-theme="dark"]) .radar-chart {
  filter: drop-shadow(0 24px 44px rgba(108, 69, 140, 0.18));
}

:root:not([data-theme="dark"]) .radar-ring {
  stroke: rgba(63, 42, 82, 0.14);
}

:root:not([data-theme="dark"]) .radar-axis-line {
  stroke: rgba(63, 42, 82, 0.16);
}

:root:not([data-theme="dark"]) .radar-label {
  fill: rgba(38, 29, 49, 0.76);
  filter: drop-shadow(0 1px 8px rgba(255, 255, 255, 0.7));
}

:root:not([data-theme="dark"]) .radar-depth {
  opacity: 0;
  filter: blur(9px);
}

:root:not([data-theme="dark"]) .radar-area {
  opacity: 0;
}

:root:not([data-theme="dark"]) .radar-ghost-outline {
  stroke: rgba(150, 85, 214, 0.18);
}

:root:not([data-theme="dark"]) .radar-outline {
  stroke: #9855d7;
  filter: url(#radarSoftGlow) drop-shadow(0 8px 16px rgba(150, 85, 214, 0.24));
}

:root:not([data-theme="dark"]) .radar-point-halo {
  fill: rgba(150, 85, 214, 0.12);
  stroke: rgba(46, 29, 60, 0.26);
}

:root:not([data-theme="dark"]) .radar-point {
  fill: #9855d7;
  stroke: #ffffff;
  filter: drop-shadow(0 0 8px rgba(150, 85, 214, 0.28));
}

:root:not([data-theme="dark"]) .radar-score-orb {
  border-color: rgba(92, 61, 121, 0.16);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.92), transparent 30%),
    radial-gradient(circle, rgba(235, 210, 255, 0.76), rgba(200, 152, 238, 0.5) 58%, rgba(150, 85, 214, 0.18));
  box-shadow:
    0 18px 50px rgba(91, 55, 122, 0.18),
    0 0 36px rgba(150, 85, 214, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color: #24162f;
}

:root:not([data-theme="dark"]) .radar-score-orb span {
  color: rgba(49, 35, 63, 0.66);
}

:root:not([data-theme="dark"]) .radar-stat {
  color: #24162f;
  border-bottom-color: rgba(70, 52, 89, 0.14);
}

:root:not([data-theme="dark"]) .radar-stat-top span {
  color: rgba(49, 35, 63, 0.7);
}

:root:not([data-theme="dark"]) .radar-bar {
  background: rgba(70, 52, 89, 0.12);
}

:root:not([data-theme="dark"]) .radar-bar span {
  background: linear-gradient(90deg, #4b315f, #9855d7 58%, #c37cf5);
  box-shadow: 0 0 10px rgba(150, 85, 214, 0.22);
}

#resultView.active .decision-hero,
#resultView.active .radar-card,
#resultView.active .explain-card,
#resultView.active .breakdown-card,
#resultView.active .what-if-panel,
#resultView.active .scenario-panel {
  animation: resultRise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#resultView.active .radar-card {
  animation-delay: 160ms;
}

#resultView.active .explain-card {
  animation-delay: 210ms;
}

#resultView.active .breakdown-card {
  animation-delay: 235ms;
}

#resultView.active .what-if-panel {
  animation-delay: 260ms;
}

#resultView.active .scenario-panel {
  animation-delay: 310ms;
}

@keyframes resultRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes insightCardIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes insightSheen {
  0%,
  100% {
    transform: translateX(-20%) rotate(12deg);
  }

  50% {
    transform: translateX(12%) rotate(12deg);
  }
}

@keyframes insightLineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes insightLineBreathe {
  0%,
  100% {
    opacity: 0.72;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes insightThreadDrift {
  0%,
  100% {
    opacity: 0.36;
    transform: translate(0, 0);
  }

  50% {
    opacity: 0.72;
    transform: translate(3px, -2px);
  }
}

@keyframes insightHaloPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.68;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.95;
  }
}

@keyframes insightSpark {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.86);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes insightSphereBreathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }
}

@keyframes insightSpecTwinkle {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.95;
  }
}

@keyframes radarGrow {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes radarDraw {
  0% {
    opacity: 0;
    stroke-dashoffset: 100;
    transform: scale(0.78);
  }

  42% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 0;
    transform: scale(1);
  }
}

@keyframes radarDot {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes radarBar {
  to {
    transform: scaleX(1);
  }
}

@keyframes radarAura {
  0%,
  100% {
    opacity: 0.54;
    transform: scale(0.96) rotate(0deg) translateZ(0);
  }

  50% {
    opacity: 0.88;
    transform: scale(1.04) rotate(18deg) translateZ(16px);
  }
}

@keyframes radarPulse {
  0% {
    opacity: 0;
    transform: scale(0.68);
  }

  18% {
    opacity: 0.56;
  }

  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

@keyframes radarCoreIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes radarCoreBreath {
  0%,
  100% {
    filter: saturate(1);
    transform: scale(1);
  }

  50% {
    filter: saturate(1.2);
    transform: scale(1.035);
  }
}

@keyframes radarBurstDrift {
  0%,
  100% {
    transform: scale(0.88) rotate(-3.4deg);
  }

  50% {
    transform: scale(0.91) rotate(1.8deg);
  }
}

@keyframes radarRayDraw {
  0% {
    opacity: 0;
    stroke-dashoffset: 100;
  }

  32% {
    opacity: 0.8;
  }

  100% {
    opacity: 0.64;
    stroke-dashoffset: 0;
  }
}

@keyframes radarRayBreath {
  0%,
  100% {
    opacity: 0.46;
  }

  50% {
    opacity: 0.78;
  }
}

@keyframes radarRayWaver {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  35% {
    transform: translate(1.8px, -1.2px) scale(1.018);
  }

  68% {
    transform: translate(-1.2px, 1.4px) scale(0.992);
  }
}

@keyframes radarRayDotIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes radarRayDotPulse {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.45);
  }
}

@keyframes radarStageFloat {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }

  50% {
    transform: translateY(-7px) rotateX(2deg) rotateZ(-0.6deg);
  }
}

@keyframes radarParticleDrift {
  to {
    background-position:
      48px 64px,
      -140% 0;
  }
}

@keyframes radarStageSweep {
  0%,
  28% {
    background-position:
      0 0,
      -140% 0;
  }

  58%,
  100% {
    background-position:
      0 0,
      140% 0;
  }
}

@keyframes radarOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes radarDotOrbit {
  from {
    transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);
  }
}

@keyframes radarScan {
  to {
    transform: rotate(360deg);
  }
}

@keyframes radarRingIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes radarAxisIn {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes radarLabelIn {
  to {
    opacity: 1;
  }
}

@keyframes radarBreath {
  0%,
  100% {
    filter: url(#radarSoftGlow) drop-shadow(0 8px 18px rgba(193, 107, 255, 0.5));
  }

  50% {
    filter: url(#radarSoftGlow) drop-shadow(0 0 30px rgba(217, 151, 255, 0.68));
  }
}

@keyframes radarOrbIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes radarAreaBreath {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.78;
  }
}

@keyframes radarDepthDrift {
  0%,
  100% {
    opacity: 0.52;
    transform: scale(1) translateY(0);
  }

  50% {
    opacity: 0.74;
    transform: scale(1.025) translateY(2px);
  }
}

@keyframes radarNodePulse {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(1);
  }

  50% {
    opacity: 0.68;
    transform: scale(1.34);
  }
}

@keyframes radarOrbBreath {
  0%,
  100% {
    box-shadow:
      0 20px 58px rgba(0, 0, 0, 0.28),
      0 0 48px rgba(193, 107, 255, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  50% {
    box-shadow:
      0 24px 70px rgba(0, 0, 0, 0.34),
      0 0 72px rgba(218, 155, 255, 0.62),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

@keyframes radarGlint {
  0%,
  22%,
  100% {
    opacity: 0.34;
    transform: translate(-12%, -8%) rotate(-18deg);
  }

  42% {
    opacity: 0.74;
    transform: translate(8%, 10%) rotate(-18deg);
  }
}

@keyframes radarStatIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #resultView.active .decision-hero,
  #resultView.active .radar-card,
  #resultView.active .explain-card,
  #resultView.active .insight-card,
  #resultView.active .breakdown-card,
  #resultView.active .what-if-panel,
  #resultView.active .scenario-panel,
  .insight-card,
  .insight-card::before,
  .insight-horizon,
  .insight-thread,
  .insight-halo,
  .insight-spark,
  .breakdown-card,
  .scenario-card,
  .what-if-chip,
  .radar-card::after,
  .radar-stage,
  .radar-stage::before,
  .radar-atmosphere::before,
  .radar-atmosphere::after,
  .radar-orbit-dot,
  .radar-energy-core,
  .radar-burst,
  .radar-burst-ray,
  .radar-burst-dot,
  .radar-scan-ring,
  .radar-pulse,
  .radar-ring,
  .radar-axis-line,
  .radar-label,
  .radar-depth,
  .radar-area,
  .radar-ghost-outline,
  .radar-outline,
  .radar-point-halo,
  .radar-point,
  .radar-score-glint,
  .radar-score-orb,
  .radar-stat {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .radar-bar span {
    transform: scaleX(1) !important;
    animation: none !important;
  }

  .radar-burst-ray {
    stroke-dashoffset: 0 !important;
  }

  .insight-horizon {
    stroke-dashoffset: 0 !important;
  }
}

.explain-card,
.what-if-panel,
.scenario-panel {
  display: grid;
  gap: 18px;
  padding: 20px;
}

#whyList {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#whyList li {
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: var(--field-subtle);
  color: var(--muted);
  line-height: 1.5;
}

.detail-drawer {
  display: grid;
  gap: 14px;
}

.detail-drawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    background 220ms ease;
}

.detail-drawer summary::-webkit-details-marker {
  display: none;
}

.detail-drawer summary::after {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--accent);
  content: "+";
  font-size: 20px;
  font-weight: 800;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-drawer[open] summary::after {
  transform: rotate(45deg);
}

.detail-drawer summary:hover {
  border-color: var(--hover-line);
  transform: translateY(-1px);
}

.detail-drawer summary span,
.detail-drawer summary small {
  display: block;
}

.detail-drawer summary span {
  font-weight: 900;
}

.detail-drawer summary small {
  margin-top: 4px;
  color: var(--muted);
}

.detail-drawer[open] .breakdown-grid,
.detail-drawer[open] .scenario-panel {
  animation: resultRise 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.detail-drawer[open] .scenario-panel {
  animation-delay: 80ms;
}

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

.breakdown-card,
.scenario-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.breakdown-card::before,
.scenario-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(180, 94, 255, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 38%);
  opacity: 0;
  transition: opacity 260ms ease;
}

.breakdown-card:hover::before,
.scenario-card:hover::before {
  opacity: 1;
}

.breakdown-card h3,
.scenario-card h3 {
  position: relative;
  margin: 0 0 14px;
  font-size: 18px;
}

.breakdown-list,
.scenario-metrics {
  position: relative;
  display: grid;
  gap: 10px;
}

.breakdown-row,
.scenario-metrics div {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--field-subtle);
}

.breakdown-row span,
.scenario-metrics span {
  color: var(--faint);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.breakdown-row strong,
.scenario-metrics strong {
  font-family: var(--mono);
  font-size: 18px;
}

.breakdown-row small {
  color: var(--muted);
  line-height: 1.45;
}

.action-card {
  grid-column: 1 / -1;
}

.action-list {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.action-list li {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent-2);
  border-radius: 8px;
  background: var(--field-subtle);
  color: var(--muted);
  line-height: 1.5;
}

.what-if-controls {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: end;
}

.price-slider {
  accent-color: var(--accent);
}

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

.what-if-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--field-subtle);
  cursor: pointer;
  transition:
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms ease,
    background 180ms ease;
}

.what-if-chip:hover,
.what-if-chip.active {
  border-color: var(--accent);
  background: var(--field);
  transform: translateY(-1px);
}

.what-if-chip input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.what-if-chip strong,
.what-if-chip small {
  display: block;
}

.what-if-chip small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.what-if-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.negotiation-row {
  display: grid;
  grid-template-columns: 160px 220px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
}

.negotiation-row strong {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 20px;
}

.negotiation-row p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

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

.scenario-card p {
  position: relative;
  min-height: 48px;
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.45;
}

.result-actions,
.detail-header,
.detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.result-actions,
.detail-header {
  justify-content: space-between;
}

.search-field {
  min-width: min(360px, 100%);
}

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

.project-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.project-table th,
.project-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}

.project-table th {
  color: var(--faint);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.project-action-header,
.project-action-cell {
  width: 92px;
  text-align: right !important;
}

.project-table td:first-child,
.project-table td .money {
  color: var(--text);
}

.project-table tr {
  cursor: pointer;
}

.project-table tbody tr:hover {
  background: var(--table-hover);
}

.project-delete-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--bad-line);
  border-radius: 999px;
  background: var(--bad-bg);
  color: var(--bad);
  font-size: 20px;
  font-weight: 850;
  line-height: 1;
}

.project-delete-button:hover {
  border-color: var(--bad);
  box-shadow:
    0 10px 26px rgba(185, 62, 102, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.detail-card {
  margin-top: 14px;
  padding: 24px;
}

.detail-card h3 {
  margin: 0;
  font-size: 32px;
}

.detail-subtitle {
  margin: 8px 0 22px;
  color: var(--muted);
}

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

.settings-layout {
  max-width: 820px;
}

.future-layout {
  display: grid;
  gap: 14px;
  max-width: 1120px;
}

.future-hero,
.future-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.future-hero {
  padding: clamp(24px, 4vw, 40px);
}

.future-hero h3 {
  max-width: 860px;
  margin: 8px 0 0;
  font-size: clamp(34px, 6vw, 68px);
  line-height: 0.98;
}

.future-hero p:not(.eyebrow) {
  max-width: 660px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.future-card {
  padding: 22px;
}

.future-score-pill {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 900;
}

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

.settings-card {
  padding: 22px;
}

.settings-card h3 {
  margin: 6px 0 18px;
  font-size: 28px;
}

.empty-state {
  padding: 34px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--empty-bg);
  text-align: center;
}

.empty-state h3 {
  margin: 0 0 8px;
}

.empty-state p {
  margin: 0 auto 18px;
  max-width: 460px;
  color: var(--muted);
  line-height: 1.5;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  max-width: 320px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.analysis-loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 48%, rgba(160, 116, 255, 0.13), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(235, 239, 246, 0.05), transparent 52%),
    rgba(5, 5, 8, 0.86);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  transition:
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 280ms ease;
}

body.analysis-loading {
  overflow: hidden;
}

.analysis-loader.show {
  opacity: 1;
  pointer-events: auto;
}

.analysis-loader-panel {
  display: grid;
  width: min(520px, 92vw);
  justify-items: center;
  gap: 22px;
  padding: 28px 24px;
  border: 1px solid rgba(230, 232, 240, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 42%, rgba(170, 124, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)),
    rgba(12, 11, 16, 0.62);
  box-shadow:
    0 32px 110px rgba(0, 0, 0, 0.42),
    0 0 68px rgba(180, 220, 245, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #f4f8ff;
  text-align: center;
  transform: translateY(16px) scale(0.98);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.radar-loader-art {
  position: relative;
  width: min(380px, 76vw);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(180, 138, 255, 0.18), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06), transparent 58%);
  filter:
    drop-shadow(0 0 18px rgba(230, 232, 240, 0.08))
    drop-shadow(0 0 42px rgba(160, 116, 255, 0.12));
  isolation: isolate;
}

.radar-loader-art::before,
.radar-loader-art::after {
  position: absolute;
  inset: 9%;
  z-index: 0;
  pointer-events: none;
  content: "";
  border-radius: 50%;
}

.radar-loader-art::before {
  border: 1px solid rgba(230, 232, 240, 0.16);
  box-shadow:
    0 0 0 34px rgba(230, 232, 240, 0.018),
    0 0 0 68px rgba(160, 116, 255, 0.018),
    inset 0 0 48px rgba(160, 116, 255, 0.08);
  animation: radarLoaderAura 9200ms ease-in-out infinite;
}

.radar-loader-art::after {
  inset: 28%;
  background: radial-gradient(circle, rgba(230, 232, 240, 0.12), transparent 68%);
  animation: radarLoaderCoreBreath 6800ms ease-in-out infinite;
}

.radar-loader-sweep {
  position: absolute;
  inset: 8%;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 302deg, rgba(235, 239, 246, 0.03) 308deg, rgba(190, 150, 255, 0.42) 330deg, transparent 354deg);
  filter: blur(0.2px) drop-shadow(0 0 18px rgba(172, 126, 255, 0.22));
  mask-image: radial-gradient(circle, transparent 0 18%, #000 19% 73%, transparent 74%);
  animation: radarLoaderSweep 12000ms linear infinite;
}

.radar-loader-svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: radarLoaderLivingDrift 9000ms ease-in-out infinite;
}

.radar-loader-halo,
.radar-loader-ring,
.radar-loader-axis line,
.radar-loader-signal {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.radar-loader-halo {
  stroke: rgba(230, 232, 240, 0.06);
  stroke-width: 18;
}

.radar-loader-ring {
  stroke: rgba(230, 232, 240, 0.34);
  stroke-width: 0.86;
  stroke-dasharray: 2 10;
  animation: radarLoaderDash 18000ms linear infinite;
}

.radar-loader-ring.outer {
  stroke: rgba(230, 232, 240, 0.44);
  stroke-width: 1.05;
  stroke-dasharray: 22 12;
}

.radar-loader-ring.inner {
  stroke: rgba(190, 150, 255, 0.46);
  stroke-dasharray: 1 7;
  animation-direction: reverse;
}

.radar-loader-axis line {
  stroke: rgba(230, 232, 240, 0.16);
  stroke-width: 0.7;
  stroke-dasharray: 1 13;
}

.radar-loader-signal {
  fill: rgba(160, 116, 255, 0.055);
  stroke: rgba(238, 235, 255, 0.76);
  stroke-width: 1.4;
  filter: url(#radarLoaderGlow);
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation:
    radarLoaderDraw 2600ms cubic-bezier(0.16, 1, 0.3, 1) 220ms forwards,
    radarLoaderSignalBreath 7600ms ease-in-out 2800ms infinite;
}

.radar-loader-signal.ghost {
  fill: rgba(230, 232, 240, 0.025);
  stroke: rgba(160, 116, 255, 0.36);
  stroke-width: 0.9;
  animation-delay: 460ms, 3200ms;
}

.radar-loader-points circle {
  fill: rgba(245, 246, 252, 0.96);
  stroke: rgba(12, 10, 18, 0.7);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 10px rgba(190, 150, 255, 0.48));
  transform-box: fill-box;
  transform-origin: center;
  animation: radarLoaderPointPulse 5200ms ease-in-out var(--dot-delay, 0s) infinite;
}

.radar-loader-core {
  fill: url(#radarLoaderCore);
  opacity: 0.74;
  animation: radarLoaderCoreBreath 6800ms ease-in-out infinite;
}

.radar-loader-core-dot {
  fill: rgba(248, 248, 255, 0.95);
  filter: drop-shadow(0 0 12px rgba(190, 150, 255, 0.5));
  animation: radarLoaderPointPulse 5200ms ease-in-out -1.8s infinite;
}

.analysis-loader.show .analysis-loader-panel {
  transform: translateY(0) scale(1);
}

.analysis-loader-panel h2 {
  max-width: 420px;
  margin: 4px 0 0;
  font-size: clamp(23px, 4vw, 36px);
  line-height: 1.08;
  letter-spacing: 0;
}

.analysis-loader-panel p:not(.eyebrow) {
  max-width: 380px;
  margin: 2px 0 0;
  color: rgba(235, 242, 250, 0.72);
  line-height: 1.5;
}

.web-loader-art {
  position: relative;
  width: min(360px, 78vw);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.72) 0 13%, transparent 14%),
    radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(220, 238, 249, 0.12) 25% 62%, transparent 68%),
    radial-gradient(circle at 54% 45%, rgba(232, 247, 255, 0.18), transparent 58%);
  filter:
    drop-shadow(0 0 10px rgba(232, 247, 255, 0.16))
    drop-shadow(0 0 42px rgba(183, 219, 245, 0.1));
}

.web-loader-art::before {
  position: absolute;
  inset: 6%;
  content: "";
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(239, 248, 255, 0.18) 0 1px, transparent 2px 10px),
    conic-gradient(from 28deg, transparent 0 7deg, rgba(239, 248, 255, 0.12) 7deg 8deg, transparent 8deg 18deg);
  opacity: 0.42;
  filter: blur(0.2px);
  animation: loaderCoreBreath 8400ms ease-in-out infinite;
}

.web-loader-art svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: loaderWebParallax 21000ms ease-in-out infinite;
}

.loader-web {
  filter: url(#loaderOrganicTexture);
  transform-origin: 210px 210px;
  animation: loaderWebWaver 9400ms ease-in-out infinite;
}

.loader-ring,
.loader-cell,
.loader-membrane {
  fill: none;
  stroke: rgba(232, 246, 255, 0.72);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loader-ring {
  stroke-width: 0.68;
  stroke-dasharray: var(--ring-shift, 48) 12;
  opacity: 0.28;
  animation: loaderRingFlow 14200ms linear infinite;
  animation-delay: var(--ring-delay, 0ms);
}

.loader-ring.dense {
  stroke-width: 1.08;
  opacity: 0.48;
}

.loader-cell {
  stroke-width: 0.95;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  opacity: 0.48;
  animation:
    loaderDraw 2600ms cubic-bezier(0.16, 1, 0.3, 1) var(--cell-delay, 0ms) forwards,
    loaderCellPulse 7800ms ease-in-out 2800ms infinite;
}

.loader-cell.thick {
  stroke-width: 2.2;
  opacity: 0.68;
}

.loader-cell.mid {
  stroke-width: 1.35;
  opacity: 0.58;
}

.loader-cell.fine {
  stroke-width: 0.52;
  opacity: 0.36;
}

.loader-membrane {
  stroke-width: 0.42;
  stroke: rgba(232, 246, 255, 0.28);
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: loaderDraw 3800ms cubic-bezier(0.16, 1, 0.3, 1) var(--cell-delay, 0ms) forwards;
}

.loader-pore {
  fill: rgba(2, 3, 5, 0.88);
  stroke: rgba(235, 248, 255, 0.62);
  stroke-width: 0.8;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    loaderPoreIn 1600ms cubic-bezier(0.16, 1, 0.3, 1) var(--cell-delay, 0ms) forwards,
    loaderPoreBreathe 9600ms ease-in-out 2600ms infinite;
}

.loader-pore.large {
  stroke-width: 1.2;
}

.loader-pore.core {
  fill: rgba(0, 0, 0, 0.94);
  opacity: 0.92;
}

.loader-dust {
  fill: rgba(241, 250, 255, 0.78);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: loaderSpark 5200ms ease-in-out var(--cell-delay, 0ms) infinite;
}

.analysis-loader-progress {
  position: relative;
  overflow: hidden;
  width: min(360px, 72vw);
  height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(232, 246, 255, 0.12);
}

.analysis-loader-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(232, 246, 255, 0.2), rgba(232, 246, 255, 0.9), rgba(168, 203, 229, 0.45));
  box-shadow: 0 0 16px rgba(232, 246, 255, 0.28);
  transform: scaleX(0);
  transform-origin: left;
}

.analysis-loader.show .analysis-loader-progress span {
  animation: loaderProgress var(--analysis-duration, 90000ms) linear forwards;
}

:root:not([data-theme="dark"]) .analysis-loader {
  background:
    radial-gradient(circle at 50% 48%, rgba(78, 96, 118, 0.12), transparent 34%),
    rgba(246, 244, 250, 0.78);
}

:root:not([data-theme="dark"]) .analysis-loader-panel {
  border-color: rgba(52, 58, 72, 0.14);
  background:
    radial-gradient(circle at 50% 42%, rgba(136, 89, 212, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
    rgba(249, 248, 252, 0.68);
  color: var(--text);
  box-shadow:
    0 32px 110px rgba(91, 76, 114, 0.18),
    0 0 68px rgba(70, 83, 102, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

:root:not([data-theme="dark"]) .analysis-loader-panel p:not(.eyebrow) {
  color: var(--muted);
}

:root:not([data-theme="dark"]) .radar-loader-art {
  background:
    radial-gradient(circle at 50% 50%, rgba(24, 22, 31, 0.14) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(136, 89, 212, 0.14), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.28), transparent 58%);
  filter:
    drop-shadow(0 0 12px rgba(24, 22, 31, 0.06))
    drop-shadow(0 0 32px rgba(136, 89, 212, 0.1));
}

:root:not([data-theme="dark"]) .radar-loader-art::before {
  border-color: rgba(24, 22, 31, 0.12);
  box-shadow:
    0 0 0 34px rgba(24, 22, 31, 0.018),
    0 0 0 68px rgba(136, 89, 212, 0.018),
    inset 0 0 48px rgba(136, 89, 212, 0.08);
}

:root:not([data-theme="dark"]) .radar-loader-sweep {
  background: conic-gradient(from 0deg, transparent 0 302deg, rgba(24, 22, 31, 0.025) 308deg, rgba(106, 72, 160, 0.36) 330deg, transparent 354deg);
}

:root:not([data-theme="dark"]) .radar-loader-halo {
  stroke: rgba(24, 22, 31, 0.045);
}

:root:not([data-theme="dark"]) .radar-loader-ring {
  stroke: rgba(24, 22, 31, 0.28);
}

:root:not([data-theme="dark"]) .radar-loader-ring.outer {
  stroke: rgba(24, 22, 31, 0.38);
}

:root:not([data-theme="dark"]) .radar-loader-ring.inner,
:root:not([data-theme="dark"]) .radar-loader-signal.ghost {
  stroke: rgba(106, 72, 160, 0.36);
}

:root:not([data-theme="dark"]) .radar-loader-axis line {
  stroke: rgba(24, 22, 31, 0.14);
}

:root:not([data-theme="dark"]) .radar-loader-signal {
  fill: rgba(136, 89, 212, 0.06);
  stroke: rgba(24, 22, 31, 0.7);
}

:root:not([data-theme="dark"]) .radar-loader-points circle {
  fill: rgba(250, 249, 253, 0.96);
  stroke: rgba(24, 22, 31, 0.68);
  filter: drop-shadow(0 0 8px rgba(136, 89, 212, 0.32));
}

:root:not([data-theme="dark"]) .radar-loader-core-dot {
  fill: rgba(24, 22, 31, 0.88);
}

:root:not([data-theme="dark"]) .loader-ring,
:root:not([data-theme="dark"]) .loader-cell,
:root:not([data-theme="dark"]) .loader-membrane {
  stroke: rgba(34, 42, 54, 0.64);
}

:root:not([data-theme="dark"]) .loader-pore {
  fill: rgba(0, 0, 0, 0.76);
  stroke: rgba(34, 42, 54, 0.42);
}

:root:not([data-theme="dark"]) .loader-dust {
  fill: rgba(34, 42, 54, 0.82);
}

:root:not([data-theme="dark"]) .analysis-loader-progress {
  background: rgba(34, 42, 54, 0.1);
}

:root:not([data-theme="dark"]) .analysis-loader-progress span {
  background: linear-gradient(90deg, rgba(34, 42, 54, 0.12), rgba(34, 42, 54, 0.66), rgba(112, 91, 143, 0.42));
}

.hidden {
  display: none !important;
}

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

/* Visual refresh: dotted canvas, glass surfaces, and softer tactile motion. */
:root {
  --bg: #f8f4fb;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-2: rgba(246, 239, 251, 0.78);
  --surface-3: rgba(235, 222, 246, 0.82);
  --field: rgba(255, 255, 255, 0.86);
  --field-subtle: rgba(255, 255, 255, 0.58);
  --line: rgba(147, 83, 204, 0.34);
  --line-soft: rgba(147, 83, 204, 0.18);
  --text: #21172c;
  --muted: #685a74;
  --faint: #9485a0;
  --accent: #9655d6;
  --accent-ink: #ffffff;
  --good: #177653;
  --good-bg: rgba(222, 250, 235, 0.82);
  --warn: #936515;
  --warn-bg: rgba(255, 243, 207, 0.9);
  --bad: #b93e66;
  --bad-bg: rgba(255, 229, 238, 0.9);
  --focus: #8b49cf;
  --shadow: 0 24px 80px rgba(98, 64, 121, 0.16), 0 0 34px rgba(150, 85, 214, 0.08);
  --sidebar-bg: rgba(255, 255, 255, 0.68);
  --hero-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(246, 239, 251, 0.86)),
    linear-gradient(90deg, rgba(150, 85, 214, 0.12), rgba(25, 146, 111, 0.06));
  --card-bg: rgba(255, 255, 255, 0.72);
  --hover-line: rgba(150, 85, 214, 0.58);
  --hover-bg: rgba(150, 85, 214, 0.08);
  --good-line: rgba(35, 148, 99, 0.38);
  --warn-line: rgba(195, 146, 44, 0.42);
  --bad-line: rgba(205, 80, 117, 0.42);
  --decision-good-line: rgba(35, 148, 99, 0.52);
  --decision-warn-line: rgba(195, 146, 44, 0.56);
  --decision-bad-line: rgba(205, 80, 117, 0.56);
  --toggle-bg: rgba(150, 85, 214, 0.08);
  --table-hover: rgba(150, 85, 214, 0.08);
  --empty-bg: rgba(255, 255, 255, 0.58);
  --theme-wash: rgba(248, 244, 251, 0.72);
  --radar-fill: rgba(150, 85, 214, 0.16);
  --radar-glow: rgba(150, 85, 214, 0.2);
  --canvas-dot: rgba(150, 85, 214, 0.18);
  --canvas-start: #fbf8fd;
  --canvas-mid: #f6effb;
  --canvas-end: #fbf8fd;
  --frame-line: rgba(150, 85, 214, 0.32);
  --frame-glow: rgba(150, 85, 214, 0.12);
  --label-soft: #776582;
  --brand-mark-text: #7b37be;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #17131d;
  --surface: rgba(31, 27, 40, 0.82);
  --surface-2: rgba(45, 37, 58, 0.72);
  --surface-3: rgba(70, 54, 88, 0.76);
  --field: rgba(255, 255, 255, 0.075);
  --field-subtle: rgba(255, 255, 255, 0.045);
  --line: rgba(198, 112, 255, 0.42);
  --line-soft: rgba(198, 112, 255, 0.2);
  --text: #f8f3ff;
  --muted: #beb0c8;
  --faint: #81728d;
  --accent: #c16bff;
  --accent-ink: #170f1f;
  --good: #95f4c9;
  --good-bg: rgba(45, 108, 77, 0.23);
  --warn: #ffe18f;
  --warn-bg: rgba(147, 107, 27, 0.22);
  --bad: #ff9ab4;
  --bad-bg: rgba(151, 55, 84, 0.22);
  --focus: #d894ff;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.42), 0 0 34px rgba(193, 107, 255, 0.08);
  --sidebar-bg: rgba(20, 17, 27, 0.74);
  --hero-bg:
    linear-gradient(135deg, rgba(57, 44, 72, 0.9), rgba(25, 20, 34, 0.88)),
    linear-gradient(90deg, rgba(193, 107, 255, 0.12), rgba(149, 244, 201, 0.06));
  --card-bg: rgba(31, 27, 40, 0.76);
  --hover-line: rgba(216, 148, 255, 0.76);
  --hover-bg: rgba(255, 255, 255, 0.08);
  --good-line: rgba(149, 244, 201, 0.54);
  --warn-line: rgba(255, 225, 143, 0.58);
  --bad-line: rgba(255, 154, 180, 0.58);
  --decision-good-line: rgba(149, 244, 201, 0.7);
  --decision-warn-line: rgba(255, 225, 143, 0.72);
  --decision-bad-line: rgba(255, 154, 180, 0.72);
  --toggle-bg: rgba(255, 255, 255, 0.055);
  --table-hover: rgba(193, 107, 255, 0.1);
  --empty-bg: rgba(31, 27, 40, 0.58);
  --theme-wash: rgba(23, 19, 29, 0.78);
  --radar-fill: rgba(193, 107, 255, 0.2);
  --radar-glow: rgba(193, 107, 255, 0.28);
  --canvas-dot: rgba(205, 123, 255, 0.16);
  --canvas-start: #1c1823;
  --canvas-mid: #17131d;
  --canvas-end: #201926;
  --frame-line: rgba(193, 107, 255, 0.5);
  --frame-glow: rgba(193, 107, 255, 0.1);
  --label-soft: #bfaad0;
  --brand-mark-text: #f4dcff;
  color-scheme: dark;
}

html {
  background: var(--bg);
}

body {
  background:
    radial-gradient(circle, var(--canvas-dot) 1px, transparent 1.2px) 0 0 / 16px 16px,
    linear-gradient(180deg, var(--canvas-start) 0%, var(--canvas-mid) 48%, var(--canvas-end) 100%);
}

body::after {
  position: fixed;
  inset: 14px;
  z-index: 0;
  border: 1px solid var(--frame-line);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 34px var(--frame-glow);
  pointer-events: none;
  content: "";
}

.app-shell {
  position: relative;
  z-index: 1;
}

.sidebar {
  border-right-color: rgba(193, 107, 255, 0.18);
  background: var(--sidebar-bg);
  box-shadow: 18px 0 60px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(22px) saturate(1.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.16);
}

.main-content {
  padding: 32px;
}

.brand-mark {
  border-color: rgba(216, 148, 255, 0.72);
  background: rgba(193, 107, 255, 0.12);
  color: var(--brand-mark-text);
  box-shadow: 0 0 24px rgba(193, 107, 255, 0.26);
}

.nav-item,
.primary-button,
.secondary-button,
.text-button,
.mega-cta,
.entry-card,
.recent-job,
.metric,
.analysis-panel,
.live-panel,
.future-hero,
.future-card,
.result-metric,
.radar-card,
.explain-card,
.what-if-panel,
.breakdown-card,
.scenario-panel,
.scenario-card,
.what-if-chip,
.settings-card,
.detail-card,
.project-table-wrap,
.time-row,
.risk-item,
.mini-metrics div,
.hero-number-row div,
.negotiation-row,
.transparent-rule,
.total-pill,
.time-total,
.risk-readout,
.standard-note,
.sidebar-card,
.empty-state,
.language-options {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 360ms cubic-bezier(0.16, 1, 0.3, 1),
    background 360ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1),
    color 260ms ease;
}

.metric,
.entry-card,
.recent-job,
.analysis-panel,
.live-panel,
.future-hero,
.future-card,
.explain-card,
.what-if-panel,
.breakdown-card,
.scenario-panel,
.scenario-card,
.what-if-chip,
.settings-card,
.detail-card,
.project-table-wrap,
.result-metric,
.dashboard-hero,
.decision-hero,
.time-row,
.risk-item,
.mini-metrics div,
.hero-number-row div,
.negotiation-row,
.transparent-rule,
.total-pill,
.time-total,
.risk-readout,
.standard-note,
.sidebar-card,
.empty-state {
  border-color: var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035)),
    var(--card-bg);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.metric::before,
.entry-card::before,
.recent-job::before,
.analysis-panel::before,
.live-panel::before,
.future-hero::before,
.future-card::before,
.result-metric::before,
.radar-card::before,
.explain-card::before,
.what-if-panel::before,
.scenario-panel::before,
.settings-card::before,
.detail-card::before,
.dashboard-hero::before,
.decision-hero::before,
.time-row::before,
.risk-item::before,
.sidebar-card::before,
.mini-metrics div::before,
.hero-number-row div::before,
.negotiation-row::before,
.what-if-chip::before,
.transparent-rule::before {
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 0%), rgba(216, 148, 255, 0.18), transparent 44%);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1);
  content: "";
}

.metric:hover,
.entry-card:hover,
.recent-job:hover,
.result-metric:hover,
.breakdown-card:hover,
.scenario-card:hover,
.what-if-chip:hover,
.time-row:hover,
.risk-item:hover,
.mini-metrics div:hover,
.hero-number-row div:hover,
.project-table-wrap:hover,
.radar-card:hover {
  border-color: var(--hover-line);
  transform: translateY(-3px);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.3),
    0 0 34px rgba(193, 107, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.metric:hover::before,
.entry-card:hover::before,
.recent-job:hover::before,
.analysis-panel:hover::before,
.live-panel:hover::before,
.future-hero:hover::before,
.future-card:hover::before,
.result-metric:hover::before,
.radar-card:hover::before,
.explain-card:hover::before,
.what-if-panel:hover::before,
.scenario-panel:hover::before,
.settings-card:hover::before,
.detail-card:hover::before,
.dashboard-hero:hover::before,
.decision-hero:hover::before,
.time-row:hover::before,
.risk-item:hover::before,
.sidebar-card:hover::before,
.mini-metrics div:hover::before,
.hero-number-row div:hover::before,
.negotiation-row:hover::before,
.transparent-rule:hover::before {
  opacity: 1;
}

button,
input,
select,
textarea {
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 260ms cubic-bezier(0.16, 1, 0.3, 1),
    background 260ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1),
    color 220ms ease;
}

.nav-item::before,
.primary-button::before,
.secondary-button::before,
.mega-cta::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255, 255, 255, 0.25), transparent 38%);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  content: "";
}

.nav-item:hover::before,
.primary-button:hover::before,
.secondary-button:hover::before,
.mega-cta:hover::before {
  opacity: 1;
}

button:active,
.entry-card:active,
.recent-job:active,
.metric:active,
.result-metric:active,
.time-row:active,
.risk-item:active {
  transform: translateY(1px) scale(0.99);
  transition-duration: 90ms;
}

.pressing {
  animation: tactilePress 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.primary-button,
.mega-cta {
  border-color: rgba(229, 178, 255, 0.6);
  background:
    linear-gradient(135deg, #d37aff 0%, #a562ff 54%, #8ff2ce 130%);
  color: #170f1f;
  box-shadow:
    0 12px 32px rgba(193, 107, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.primary-button:hover,
.mega-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 44px rgba(193, 107, 255, 0.34),
    0 0 26px rgba(143, 242, 206, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.secondary-button,
.text-button {
  border-color: rgba(193, 107, 255, 0.3);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}

.secondary-button:hover,
.text-button:hover {
  border-color: var(--hover-line);
  background: rgba(193, 107, 255, 0.12);
  transform: translateY(-2px);
}

.nav-item {
  border-color: transparent;
  border-radius: 8px;
}

.nav-item:hover,
.nav-item.active {
  border-color: rgba(216, 148, 255, 0.58);
  background: rgba(193, 107, 255, 0.11);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(193, 107, 255, 0.12);
}

.nav-icon {
  box-shadow: 0 0 14px rgba(193, 107, 255, 0.18);
}

input,
select,
textarea,
.input-prefix,
.input-suffix {
  border-color: rgba(198, 112, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

input:hover,
select:hover,
textarea:hover,
.input-prefix:hover,
.input-suffix:hover {
  border-color: rgba(216, 148, 255, 0.52);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus);
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 0 0 4px rgba(193, 107, 255, 0.14),
    0 10px 28px rgba(0, 0, 0, 0.16);
}

.language-options button.active,
.toggle-pair button.active {
  background: rgba(193, 107, 255, 0.22);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(216, 148, 255, 0.34);
}

.dashboard-hero,
.decision-hero {
  border-color: rgba(193, 107, 255, 0.4);
}

.dashboard-hero {
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-copy h2,
#resultTitle {
  text-shadow: 0 0 28px rgba(193, 107, 255, 0.14);
}

.eyebrow,
.mini-label,
.step-kicker,
.metric span,
.result-metric span,
.hero-number-row span,
.negotiation-row span,
.total-pill span,
.time-total span,
.risk-readout span {
  color: var(--label-soft);
}

.decision-badge,
.risk-badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.decision-badge.worth,
.risk-badge.low {
  background: rgba(149, 244, 201, 0.14);
}

.decision-badge.maybe,
.risk-badge.medium {
  background: rgba(255, 225, 143, 0.14);
}

.decision-badge.not,
.risk-badge.high {
  background: rgba(255, 154, 180, 0.14);
}

.stepper button {
  border-color: rgba(198, 112, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

.stepper button:hover {
  border-color: rgba(216, 148, 255, 0.52);
  transform: translateY(-2px);
}

.stepper button.active {
  border-color: var(--accent);
  background: rgba(193, 107, 255, 0.14);
  box-shadow: 0 0 24px rgba(193, 107, 255, 0.12);
}

.stepper button.complete {
  border-color: rgba(149, 244, 201, 0.52);
  background: rgba(149, 244, 201, 0.1);
}

.view.active {
  animation: viewEnter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.step-screen.active {
  animation: softSlideUp 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.toast {
  border-color: rgba(216, 148, 255, 0.48);
  background: rgba(31, 27, 40, 0.88);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.32),
    0 0 30px rgba(193, 107, 255, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.toast.show {
  animation: softSlideUp 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-table tbody tr {
  transition:
    background 240ms ease,
    color 240ms ease;
}

.project-table tbody tr:hover {
  background: rgba(193, 107, 255, 0.11);
}

.price-slider {
  accent-color: var(--accent);
  cursor: pointer;
}

.radar-outline,
.radar-bar span {
  filter: drop-shadow(0 0 12px rgba(193, 107, 255, 0.26));
}

@keyframes viewEnter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes softSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tactilePress {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(0.985);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes resultWebFloat {
  0%,
  100% {
    opacity: 0.16;
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    opacity: 0.28;
    transform: translateY(12px) rotate(1.6deg) scale(1.025);
  }
}

@keyframes loaderWebRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loaderWebParallax {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  50% {
    transform: translate3d(4px, -6px, 0) scale(1.035) rotate(2.4deg);
  }
}

@keyframes loaderWebWaver {
  0%,
  100% {
    transform: scale(1) skew(0deg, 0deg) rotate(0deg);
  }

  50% {
    transform: scale(1.012) skew(-0.45deg, 0.2deg) rotate(-1.1deg);
  }
}

@keyframes loaderRingFlow {
  to {
    stroke-dashoffset: -80;
  }
}

@keyframes loaderDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes loaderCellPulse {
  0%,
  100% {
    opacity: 0.42;
  }

  50% {
    opacity: 0.78;
  }
}

@keyframes loaderPoreIn {
  from {
    opacity: 0;
    transform: scale(0.72);
  }

  to {
    opacity: 0.9;
    transform: scale(1);
  }
}

@keyframes loaderPoreBreathe {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 0.95;
  }
}

@keyframes loaderCoreBreath {
  0%,
  100% {
    opacity: 0.44;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.86;
    transform: scale(1.08);
  }
}

@keyframes loaderSpark {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.72);
  }

  50% {
    opacity: 0.76;
    transform: scale(1.12);
  }
}

@keyframes loaderProgress {
  to {
    transform: scaleX(1);
  }
}

@keyframes radarLoaderSweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes radarLoaderAura {
  0%,
  100% {
    opacity: 0.66;
    transform: scale(0.985);
  }

  50% {
    opacity: 1;
    transform: scale(1.018);
  }
}

@keyframes radarLoaderCoreBreath {
  0%,
  100% {
    opacity: 0.52;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.86;
    transform: scale(1.08);
  }
}

@keyframes radarLoaderLivingDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -3px, 0) scale(1.012);
  }
}

@keyframes radarLoaderDash {
  to {
    stroke-dashoffset: -120;
  }
}

@keyframes radarLoaderDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes radarLoaderSignalBreath {
  0%,
  100% {
    opacity: 0.74;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.015);
  }
}

@keyframes radarLoaderPointPulse {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.88);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .view.active,
  .step-screen.active,
  .pressing,
  .web-loader-art::before,
  .web-loader-art svg,
  .radar-loader-art::before,
  .radar-loader-art::after,
  .radar-loader-sweep,
  .radar-loader-svg,
  .radar-loader-ring,
  .radar-loader-signal,
  .radar-loader-points circle,
  .radar-loader-core,
  .radar-loader-core-dot,
  .loader-web,
  .loader-ring,
  .loader-cell,
  .loader-membrane,
  .loader-pore,
  .loader-dust,
  .analysis-loader-progress span,
  .toast.show {
    animation: none !important;
  }

  .radar-loader-signal {
    stroke-dashoffset: 0 !important;
  }

  .loader-cell,
  .loader-membrane {
    stroke-dashoffset: 0 !important;
  }

  .loader-pore,
  .loader-dust {
    opacity: 1 !important;
  }

  .analysis-loader-progress span {
    transform: scaleX(1) !important;
  }
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

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

  .sidebar-card {
    display: none;
  }

  .analysis-layout {
    grid-template-columns: 1fr;
  }

  .live-panel {
    position: static;
  }

  .recent-list,
  .metric-grid,
  .insight-story,
  .future-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radar-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .what-if-toggles,
  .scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radar-orbit-dot.dot-a {
    --orbit-radius: 190px;
  }

  .radar-orbit-dot.dot-b {
    --orbit-radius: 156px;
  }

  .radar-orbit-dot.dot-c {
    --orbit-radius: 116px;
  }
}

@media (max-width: 720px) {
  .main-content {
    padding: 16px;
  }

  .topbar,
  .dashboard-hero,
  .section-header,
  .detail-header,
  .result-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-hero {
    display: flex;
  }

  .decision-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  #resultTitle {
    font-size: clamp(32px, 11vw, 56px);
  }

  .insight-card {
    grid-template-columns: 1fr;
  }

  .insight-visual-svg {
    max-height: 128px;
  }

  .mega-cta,
  .topbar .primary-button {
    width: 100%;
  }

  .topbar-actions {
    flex-direction: column;
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-item {
    justify-content: center;
  }

  .recent-list,
  .metric-grid,
  .entry-grid,
  .result-grid,
  .insight-story,
  .breakdown-grid,
  .radar-card,
  .radar-legend,
  .scenario-grid,
  .future-summary-grid,
  .field-grid.two,
  .time-grid,
  .hero-number-row,
  .detail-grid,
  .what-if-controls,
  .what-if-toggles,
  .negotiation-row {
    grid-template-columns: 1fr;
  }

  .stepper {
    grid-template-columns: 1fr;
  }

  .expense-row {
    grid-template-columns: 1fr;
  }

  .icon-button {
    width: 100%;
  }

  .radar-visual {
    min-height: 320px;
  }

  .radar-stage {
    width: min(100%, 360px);
  }

  .radar-burst {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.52;
  }

  .radar-energy-core {
    width: 118px;
  }

  .radar-orbit-dot.dot-a {
    --orbit-radius: 146px;
  }

  .radar-orbit-dot.dot-b {
    --orbit-radius: 122px;
  }

  .radar-orbit-dot.dot-c {
    --orbit-radius: 92px;
  }

  .radar-score-orb {
    width: 82px;
  }
}

/* Professional product refresh: calmer surfaces, clearer hierarchy, and usable mobile flow. */
:root {
  --bg: #f4f7f3;
  --surface: #ffffff;
  --surface-2: #edf4ef;
  --surface-3: #dcebe2;
  --field: #ffffff;
  --field-subtle: #f8faf7;
  --line: #c8d7cd;
  --line-soft: #e1e9e3;
  --text: #17231d;
  --muted: #647269;
  --faint: #8a968e;
  --accent: #2f6f54;
  --accent-2: #6f7f5f;
  --accent-ink: #ffffff;
  --good: #16734f;
  --good-bg: #e6f6ec;
  --warn: #94650d;
  --warn-bg: #fff4d5;
  --bad: #b74c3b;
  --bad-bg: #ffe9e4;
  --focus: #255d47;
  --shadow: 0 14px 38px rgba(31, 55, 41, 0.08);
  --sidebar-bg: rgba(255, 255, 255, 0.94);
  --hero-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 241, 0.94)),
    linear-gradient(90deg, rgba(47, 111, 84, 0.08), rgba(111, 127, 95, 0.06));
  --card-bg: rgba(255, 255, 255, 0.95);
  --hover-line: #9ab7a4;
  --hover-bg: #f5faf6;
  --good-line: rgba(22, 115, 79, 0.32);
  --warn-line: rgba(148, 101, 13, 0.34);
  --bad-line: rgba(183, 76, 59, 0.34);
  --decision-good-line: rgba(22, 115, 79, 0.48);
  --decision-warn-line: rgba(148, 101, 13, 0.5);
  --decision-bad-line: rgba(183, 76, 59, 0.48);
  --toggle-bg: #eef4ef;
  --table-hover: rgba(47, 111, 84, 0.06);
  --empty-bg: rgba(255, 255, 255, 0.72);
  --theme-wash: rgba(244, 247, 243, 0.74);
  --radar-fill: rgba(47, 111, 84, 0.18);
  --radar-glow: rgba(47, 111, 84, 0.24);
  --canvas-dot: rgba(47, 111, 84, 0.08);
  --canvas-start: #f8faf6;
  --canvas-mid: #f3f7f1;
  --canvas-end: #f8faf6;
  --frame-line: transparent;
  --frame-glow: transparent;
  --label-soft: #6f7a72;
  --brand-mark-text: #24563f;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #101511;
  --surface: #171f1a;
  --surface-2: #1f2b24;
  --surface-3: #2b3d32;
  --field: #111915;
  --field-subtle: #141d18;
  --line: #385344;
  --line-soft: #25382e;
  --text: #f2f7ef;
  --muted: #a8b8ac;
  --faint: #7f9285;
  --accent: #9ee0bb;
  --accent-2: #c6d08f;
  --accent-ink: #0d1f16;
  --good: #8fe0b0;
  --good-bg: #102c1f;
  --warn: #eccb74;
  --warn-bg: #302813;
  --bad: #f29a83;
  --bad-bg: #351a14;
  --focus: #b6edcc;
  --shadow: 0 16px 46px rgba(0, 0, 0, 0.3);
  --sidebar-bg: rgba(16, 21, 17, 0.94);
  --hero-bg:
    linear-gradient(135deg, rgba(28, 39, 32, 0.96), rgba(17, 25, 20, 0.94)),
    linear-gradient(90deg, rgba(158, 224, 187, 0.08), rgba(198, 208, 143, 0.05));
  --card-bg: rgba(23, 31, 26, 0.94);
  --hover-line: #55745f;
  --hover-bg: #1e2c24;
  --good-line: rgba(143, 224, 176, 0.42);
  --warn-line: rgba(236, 203, 116, 0.46);
  --bad-line: rgba(242, 154, 131, 0.44);
  --decision-good-line: rgba(143, 224, 176, 0.56);
  --decision-warn-line: rgba(236, 203, 116, 0.58);
  --decision-bad-line: rgba(242, 154, 131, 0.56);
  --toggle-bg: #101815;
  --table-hover: rgba(158, 224, 187, 0.07);
  --empty-bg: rgba(23, 31, 26, 0.74);
  --theme-wash: rgba(16, 21, 17, 0.76);
  --radar-fill: rgba(158, 224, 187, 0.18);
  --radar-glow: rgba(158, 224, 187, 0.22);
  --canvas-dot: rgba(158, 224, 187, 0.055);
  --canvas-start: #111611;
  --canvas-mid: #101511;
  --canvas-end: #151d18;
  --frame-line: transparent;
  --frame-glow: transparent;
  --label-soft: #a5b5aa;
  --brand-mark-text: #b7efce;
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle, var(--canvas-dot) 0.9px, transparent 1.1px) 0 0 / 20px 20px,
    linear-gradient(180deg, var(--canvas-start) 0%, var(--canvas-mid) 46%, var(--canvas-end) 100%);
}

body::after {
  display: none;
}

.main-content {
  padding: clamp(24px, 3vw, 36px);
}

.sidebar {
  border-right-color: var(--line-soft);
  background: var(--sidebar-bg);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.brand-mark {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--brand-mark-text);
  box-shadow: none;
}

.brand-block h1 {
  font-size: 20px;
}

.nav-list {
  gap: 6px;
}

.nav-item {
  min-height: 44px;
  border-color: transparent;
  border-radius: var(--radius);
  font-weight: 700;
}

.nav-item:hover,
.nav-item.active {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

.nav-icon {
  box-shadow: none;
}

.primary-button,
.mega-cta {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 22px rgba(47, 111, 84, 0.16);
}

:root[data-theme="dark"] .primary-button,
:root[data-theme="dark"] .mega-cta {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.primary-button:hover,
.mega-cta:hover {
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(47, 111, 84, 0.2);
}

.secondary-button,
.text-button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.secondary-button:hover,
.text-button:hover {
  border-color: var(--hover-line);
  background: var(--hover-bg);
  transform: translateY(-1px);
}

.text-button {
  color: var(--accent);
}

.dashboard-hero,
.decision-hero,
.metric,
.entry-card,
.recent-job,
.analysis-panel,
.live-panel,
.future-hero,
.future-card,
.explain-card,
.what-if-panel,
.breakdown-card,
.scenario-panel,
.scenario-card,
.what-if-chip,
.settings-card,
.detail-card,
.project-table-wrap,
.result-metric,
.time-row,
.risk-item,
.mini-metrics div,
.hero-number-row div,
.negotiation-row,
.transparent-rule,
.total-pill,
.time-total,
.risk-readout,
.standard-note,
.sidebar-card,
.empty-state {
  border-color: var(--line-soft);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.metric::before,
.entry-card::before,
.recent-job::before,
.analysis-panel::before,
.live-panel::before,
.future-hero::before,
.future-card::before,
.result-metric::before,
.explain-card::before,
.what-if-panel::before,
.scenario-panel::before,
.settings-card::before,
.detail-card::before,
.dashboard-hero::before,
.decision-hero::before,
.time-row::before,
.risk-item::before,
.sidebar-card::before,
.mini-metrics div::before,
.hero-number-row div::before,
.negotiation-row::before,
.what-if-chip::before,
.transparent-rule::before {
  display: none;
}

.metric:hover,
.entry-card:hover,
.recent-job:hover,
.result-metric:hover,
.breakdown-card:hover,
.scenario-card:hover,
.what-if-chip:hover,
.time-row:hover,
.risk-item:hover,
.mini-metrics div:hover,
.hero-number-row div:hover,
.project-table-wrap:hover,
.radar-card:hover {
  border-color: var(--hover-line);
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(31, 55, 41, 0.1);
}

.dashboard-hero {
  align-items: center;
  padding: clamp(22px, 3vw, 34px);
  border-color: var(--line);
  background: var(--hero-bg);
}

.hero-copy h2 {
  max-width: 740px;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.04;
  text-shadow: none;
}

.hero-copy p:last-child {
  max-width: 640px;
  margin-top: 14px;
  font-size: 15.5px;
}

.mega-cta {
  min-width: 210px;
  min-height: 56px;
}

.entry-card {
  min-height: 132px;
  padding: 18px;
}

.entry-card strong {
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.12;
}

.metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
}

.metric {
  min-height: 112px;
  padding: 16px;
}

.metric strong {
  font-size: clamp(24px, 2.7vw, 32px);
}

.recent-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.recent-job {
  min-height: 166px;
}

.analysis-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 20px;
}

.analysis-panel,
.live-panel,
.future-card,
.settings-card {
  padding: 24px;
}

.stepper {
  gap: 6px;
  margin-bottom: 24px;
}

.stepper button {
  min-height: 48px;
  border-color: var(--line-soft);
  background: var(--field-subtle);
  color: var(--muted);
  box-shadow: none;
}

.stepper button:hover {
  border-color: var(--hover-line);
  transform: translateY(-1px);
}

.stepper button.active {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(47, 111, 84, 0.08);
}

.stepper button.complete {
  border-color: var(--good-line);
  background: var(--good-bg);
}

input,
select,
textarea,
.input-prefix,
.input-suffix,
.language-options {
  border-color: var(--line);
  background: var(--field);
  box-shadow: none;
}

input:hover,
select:hover,
textarea:hover,
.input-prefix:hover,
.input-suffix:hover {
  border-color: var(--hover-line);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus);
  background: var(--field);
  box-shadow: 0 0 0 4px rgba(47, 111, 84, 0.12);
}

.language-options button.active,
.toggle-pair button.active {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: none;
}

.future-hero {
  padding: clamp(24px, 3.4vw, 38px);
}

.future-hero h3 {
  max-width: 820px;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.04;
}

.future-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.future-score-pill {
  border-color: var(--line);
  color: var(--accent);
  background: var(--field-subtle);
}

.project-table th,
.project-table td {
  padding: 13px 14px;
}

.project-table tbody tr:hover {
  background: var(--table-hover);
}

.radar-card {
  border-color: rgba(158, 184, 162, 0.38);
  background:
    radial-gradient(circle at 50% 44%, rgba(158, 224, 187, 0.22), transparent 48%),
    linear-gradient(135deg, #1f2c25, #111a15);
  color: #f4faf5;
  box-shadow: 0 22px 62px rgba(22, 34, 27, 0.28);
}

.radar-card::after {
  opacity: 0.16;
}

.radar-heading .eyebrow,
.radar-stat-top span {
  color: rgba(232, 242, 235, 0.68);
}

.radar-heading h3,
.radar-stat {
  color: #f4faf5;
}

.radar-bar span {
  background: linear-gradient(90deg, #7cc8a1, #c6d08f);
  box-shadow: 0 0 12px rgba(158, 224, 187, 0.34);
}

.analysis-loader {
  background: rgba(12, 18, 14, 0.72);
}

:root:not([data-theme="dark"]) .analysis-loader {
  background: rgba(243, 247, 241, 0.82);
}

.analysis-loader-panel {
  border-color: var(--line-soft);
  background: var(--surface);
  box-shadow: 0 22px 70px rgba(31, 55, 41, 0.16);
}

@media (max-width: 1120px) {
  .main-content {
    padding: 24px;
  }

  .sidebar {
    gap: 18px;
    padding: 18px 24px;
  }

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

  .nav-item {
    justify-content: center;
    min-width: 0;
  }

  .analysis-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body {
    background:
      radial-gradient(circle, var(--canvas-dot) 0.8px, transparent 1px) 0 0 / 18px 18px,
      var(--bg);
  }

  .main-content {
    padding: 18px 14px 28px;
  }

  .sidebar {
    gap: 14px;
    padding: 14px;
  }

  .brand-block {
    justify-content: flex-start;
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .nav-item {
    justify-content: flex-start;
    min-height: 40px;
    padding: 9px 10px;
    font-size: 14px;
  }

  .topbar {
    margin-bottom: 18px;
  }

  .topbar h2 {
    font-size: 26px;
  }

  .dashboard-hero {
    gap: 18px;
    padding: 20px;
  }

  .hero-copy h2,
  .future-hero h3 {
    font-size: 31px;
    line-height: 1.08;
  }

  .hero-copy p:last-child,
  .future-hero p:not(.eyebrow) {
    font-size: 15px;
  }

  .mega-cta {
    min-width: 0;
    min-height: 52px;
  }

  .entry-card {
    min-height: auto;
    padding: 18px;
  }

  .analysis-panel,
  .live-panel,
  .future-card,
  .future-hero,
  .settings-card,
  .detail-card {
    padding: 18px;
  }

  .step-heading h3 {
    font-size: 24px;
  }

  .stepper {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }

  .stepper li {
    flex: 0 0 118px;
    scroll-snap-align: start;
  }

  .stepper button {
    min-height: 44px;
    white-space: nowrap;
  }

  .risk-item {
    align-items: stretch;
    flex-direction: column;
  }

  .toggle-pair {
    width: 100%;
  }

  .toggle-pair button {
    flex: 1 1 0;
  }

  .row-actions,
  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .form-actions .primary-button,
  .form-actions .secondary-button,
  .row-actions .secondary-button {
    width: 100%;
  }

  .project-table {
    min-width: 820px;
  }
}

#resultTitle {
  max-width: min(100%, 760px);
  font-family: var(--font);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 850;
  line-height: 1.02;
  text-shadow: none;
}

.decision-title-row h3 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.02;
}

.insight-card,
:root:not([data-theme="dark"]) .insight-card {
  background:
    radial-gradient(circle at 86% 20%, rgba(47, 111, 84, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 247, 0.9)),
    var(--card-bg);
  box-shadow: var(--shadow);
}

:root[data-theme="dark"] .insight-card {
  background:
    radial-gradient(circle at 86% 20%, rgba(158, 224, 187, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    var(--card-bg);
}

.insight-card::before {
  display: none;
}

.insight-card:hover {
  border-color: var(--hover-line);
  box-shadow: 0 18px 42px rgba(31, 55, 41, 0.1);
  transform: translateY(-1px);
}

.insight-horizon,
.insight-thread {
  stroke: rgba(47, 111, 84, 0.52);
  filter: none;
}

.insight-thread,
:root:not([data-theme="dark"]) .insight-thread {
  stroke: rgba(47, 111, 84, 0.22);
}

.insight-halo,
:root:not([data-theme="dark"]) .insight-halo {
  fill: rgba(47, 111, 84, 0.1);
  stroke: rgba(47, 111, 84, 0.16);
}

.insight-spark {
  stroke: rgba(47, 111, 84, 0.78);
  fill: rgba(47, 111, 84, 0.7);
  filter: none;
}

:root:not([data-theme="dark"]) .radar-card,
.radar-card {
  border-color: rgba(158, 184, 162, 0.38);
  background:
    radial-gradient(circle at 50% 44%, rgba(158, 224, 187, 0.22), transparent 48%),
    linear-gradient(135deg, #1f2c25, #111a15);
  color: #f4faf5;
  box-shadow: 0 22px 62px rgba(22, 34, 27, 0.28);
}

:root:not([data-theme="dark"]) .radar-card::after,
.radar-card::after {
  opacity: 0.16;
}

:root:not([data-theme="dark"]) .radar-heading .eyebrow,
.radar-heading .eyebrow,
:root:not([data-theme="dark"]) .radar-stat-top span,
.radar-stat-top span {
  color: rgba(232, 242, 235, 0.68);
}

:root:not([data-theme="dark"]) .radar-heading h3,
.radar-heading h3,
:root:not([data-theme="dark"]) .radar-stat,
.radar-stat {
  color: #f4faf5;
  text-shadow: none;
}

:root:not([data-theme="dark"]) .radar-stage::before,
.radar-stage::before {
  background:
    radial-gradient(circle, rgba(158, 224, 187, 0.28) 0%, rgba(47, 111, 84, 0.16) 36%, transparent 66%),
    conic-gradient(from 90deg, rgba(158, 224, 187, 0.24), rgba(198, 208, 143, 0.08), rgba(158, 224, 187, 0.2));
}

:root:not([data-theme="dark"]) .radar-energy-core,
.radar-energy-core {
  background:
    radial-gradient(circle, rgba(13, 31, 22, 0.86) 0%, rgba(34, 80, 58, 0.72) 36%, rgba(158, 224, 187, 0.18) 60%, transparent 76%);
  box-shadow:
    0 0 42px rgba(158, 224, 187, 0.24),
    0 0 76px rgba(47, 111, 84, 0.16);
}

.radar-ring,
:root:not([data-theme="dark"]) .radar-ring {
  stroke: rgba(232, 242, 235, 0.14);
}

.radar-axis-line,
:root:not([data-theme="dark"]) .radar-axis-line {
  stroke: rgba(232, 242, 235, 0.18);
}

.radar-label,
:root:not([data-theme="dark"]) .radar-label {
  fill: rgba(244, 250, 245, 0.84);
  filter: none;
}

.radar-outline,
:root:not([data-theme="dark"]) .radar-outline {
  stroke: #9ee0bb;
  filter: drop-shadow(0 8px 16px rgba(158, 224, 187, 0.28));
}

.radar-ghost-outline,
:root:not([data-theme="dark"]) .radar-ghost-outline {
  stroke: rgba(158, 224, 187, 0.22);
}

.radar-point,
:root:not([data-theme="dark"]) .radar-point {
  fill: #9ee0bb;
  stroke: #15221b;
  filter: drop-shadow(0 0 10px rgba(158, 224, 187, 0.46));
}

.radar-point-halo,
:root:not([data-theme="dark"]) .radar-point-halo {
  fill: rgba(158, 224, 187, 0.16);
  stroke: rgba(232, 242, 235, 0.34);
}

.radar-score-orb,
:root:not([data-theme="dark"]) .radar-score-orb {
  border-color: rgba(232, 242, 235, 0.24);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.34), transparent 28%),
    radial-gradient(circle, rgba(158, 224, 187, 0.46), rgba(47, 111, 84, 0.38) 58%, rgba(17, 45, 31, 0.28));
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.26),
    0 0 42px rgba(158, 224, 187, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.radar-bar span,
:root:not([data-theme="dark"]) .radar-bar span {
  background: linear-gradient(90deg, #7cc8a1, #c6d08f);
  box-shadow: 0 0 12px rgba(158, 224, 187, 0.34);
}

@media (max-width: 720px) {
  #resultTitle,
  .decision-title-row h3 {
    font-size: 34px;
  }
}

/* Interactive affordance: clickable cards should not look like read-only metrics. */
button.entry-card,
button.recent-job {
  border-color: rgba(47, 111, 84, 0.42);
  background:
    linear-gradient(135deg, rgba(47, 111, 84, 0.12), rgba(158, 224, 187, 0.08)),
    var(--card-bg);
  cursor: pointer;
  box-shadow:
    0 14px 34px rgba(31, 55, 41, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

button.entry-card::after,
button.recent-job::after {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(47, 111, 84, 0.34);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  content: ">";
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.96;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

button.entry-card {
  padding-right: 58px;
}

button.recent-job {
  padding-right: 50px;
}

button.entry-card:hover,
button.entry-card:focus-visible,
button.recent-job:hover,
button.recent-job:focus-visible {
  border-color: var(--accent);
  background:
    linear-gradient(135deg, rgba(47, 111, 84, 0.2), rgba(158, 224, 187, 0.12)),
    var(--card-bg);
  box-shadow:
    0 18px 44px rgba(31, 55, 41, 0.16),
    0 0 0 1px rgba(47, 111, 84, 0.12) inset;
}

button.entry-card:hover::after,
button.entry-card:focus-visible::after,
button.recent-job:hover::after,
button.recent-job:focus-visible::after {
  border-color: var(--accent);
  transform: translateX(2px);
}

.metric {
  border-color: rgba(100, 114, 105, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)),
    var(--field-subtle);
  box-shadow: none;
}

:root[data-theme="dark"] button.entry-card,
:root[data-theme="dark"] button.recent-job {
  border-color: rgba(158, 224, 187, 0.36);
  background:
    linear-gradient(135deg, rgba(158, 224, 187, 0.13), rgba(47, 111, 84, 0.12)),
    var(--card-bg);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] button.entry-card::after,
:root[data-theme="dark"] button.recent-job::after {
  border-color: rgba(158, 224, 187, 0.38);
  background: #9ee0bb;
  color: #0d1f16;
}

:root[data-theme="dark"] button.entry-card:hover,
:root[data-theme="dark"] button.entry-card:focus-visible,
:root[data-theme="dark"] button.recent-job:hover,
:root[data-theme="dark"] button.recent-job:focus-visible {
  border-color: #9ee0bb;
  background:
    linear-gradient(135deg, rgba(158, 224, 187, 0.2), rgba(47, 111, 84, 0.16)),
    var(--card-bg);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(158, 224, 187, 0.12) inset;
}

:root[data-theme="dark"] .metric {
  border-color: rgba(168, 184, 172, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    var(--field-subtle);
  box-shadow: none;
}

/* Recent job statuses should read as quiet metadata, not promotional pills. */
.recent-job .decision-badge {
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: lowercase;
  white-space: nowrap;
}

.recent-job .decision-badge::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  content: "";
  opacity: 0.82;
}

.recent-job .decision-badge.worth {
  color: #2f6f54;
}

.recent-job .decision-badge.maybe {
  color: #765816;
}

.recent-job .decision-badge.not {
  color: #934739;
}

button.recent-job::after {
  right: 12px;
  bottom: 12px;
  width: 24px;
  height: 24px;
  border-color: rgba(47, 111, 84, 0.28);
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  opacity: 0.9;
}

button.recent-job:hover::after,
button.recent-job:focus-visible::after {
  background: rgba(47, 111, 84, 0.08);
}

:root[data-theme="dark"] .recent-job .decision-badge.worth {
  color: #9bcdb1;
}

:root[data-theme="dark"] .recent-job .decision-badge.maybe {
  color: #d5bf7c;
}

:root[data-theme="dark"] .recent-job .decision-badge.not {
  color: #d19385;
}

:root[data-theme="dark"] button.recent-job::after {
  border-color: rgba(158, 224, 187, 0.28);
  background: transparent;
  color: #9ee0bb;
}

:root[data-theme="dark"] button.recent-job:hover::after,
:root[data-theme="dark"] button.recent-job:focus-visible::after {
  background: rgba(158, 224, 187, 0.08);
}

/* Result risk is a status note, so keep it quieter than the decision headline. */
#resultRiskBadge {
  gap: 7px;
  align-self: flex-start;
  min-height: 0;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: lowercase;
  white-space: nowrap;
}

#resultRiskBadge::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  content: "";
  opacity: 0.82;
}

#resultRiskBadge.low {
  color: #2f6f54;
}

#resultRiskBadge.medium {
  color: #765816;
}

#resultRiskBadge.high {
  color: #934739;
}

:root[data-theme="dark"] #resultRiskBadge.low {
  color: #9bcdb1;
}

:root[data-theme="dark"] #resultRiskBadge.medium {
  color: #d5bf7c;
}

:root[data-theme="dark"] #resultRiskBadge.high {
  color: #d19385;
}

/* Color base system: palette changes sit above light/dark mode. */
:root {
  --accent-rgb: 47, 111, 84;
  --accent-2-rgb: 111, 127, 95;
  --accent-soft: rgba(var(--accent-rgb), 0.08);
  --accent-wash: rgba(var(--accent-rgb), 0.12);
  --accent-strong-wash: rgba(var(--accent-rgb), 0.18);
  --accent-line: rgba(var(--accent-rgb), 0.34);
  --accent-line-strong: rgba(var(--accent-rgb), 0.48);
  --accent-shadow: rgba(var(--accent-rgb), 0.16);
  --accent-shadow-strong: rgba(var(--accent-rgb), 0.22);
  --card-hover-shadow: rgba(var(--accent-rgb), 0.1);
  --interactive-line: rgba(var(--accent-rgb), 0.42);
  --interactive-start: rgba(var(--accent-rgb), 0.12);
  --interactive-end: rgba(var(--accent-2-rgb), 0.08);
  --interactive-hover-start: rgba(var(--accent-rgb), 0.2);
  --interactive-hover-end: rgba(var(--accent-2-rgb), 0.12);
  --focus-ring: rgba(var(--accent-rgb), 0.12);
  --status-good: #2f6f54;
  --status-warn: #765816;
  --status-bad: #934739;
  --radar-card-start: #1f2c25;
  --radar-card-end: #111a15;
  --radar-card-line: rgba(158, 184, 162, 0.38);
  --radar-accent: #9ee0bb;
  --radar-accent-2: #c6d08f;
  --radar-ink: #f4faf5;
  --radar-muted: rgba(232, 242, 235, 0.68);
  --radar-point-stroke: #15221b;
}

:root:not([data-theme="dark"]) {
  --bg: #f4f7f3;
  --surface: #ffffff;
  --surface-2: #edf4ef;
  --surface-3: #dcebe2;
  --field: #ffffff;
  --field-subtle: #f8faf7;
  --line: #c8d7cd;
  --line-soft: #e1e9e3;
  --text: #17231d;
  --muted: #647269;
  --faint: #8a968e;
  --accent: #2f6f54;
  --accent-2: #6f7f5f;
  --accent-ink: #ffffff;
  --focus: #255d47;
  --shadow: 0 14px 38px rgba(31, 55, 41, 0.08);
  --sidebar-bg: rgba(255, 255, 255, 0.94);
  --hero-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 241, 0.94)),
    linear-gradient(90deg, rgba(47, 111, 84, 0.08), rgba(111, 127, 95, 0.06));
  --card-bg: rgba(255, 255, 255, 0.95);
  --hover-line: #9ab7a4;
  --hover-bg: #f5faf6;
  --table-hover: rgba(47, 111, 84, 0.06);
  --theme-wash: rgba(244, 247, 243, 0.74);
  --radar-fill: rgba(47, 111, 84, 0.18);
  --radar-glow: rgba(47, 111, 84, 0.24);
  --canvas-dot: rgba(47, 111, 84, 0.08);
  --canvas-start: #f8faf6;
  --canvas-mid: #f3f7f1;
  --canvas-end: #f8faf6;
  --label-soft: #6f7a72;
  --brand-mark-text: #24563f;
}

:root[data-theme="dark"] {
  --accent-rgb: 158, 224, 187;
  --accent-2-rgb: 198, 208, 143;
  --accent-soft: rgba(var(--accent-rgb), 0.07);
  --accent-wash: rgba(var(--accent-rgb), 0.11);
  --accent-strong-wash: rgba(var(--accent-rgb), 0.16);
  --accent-line: rgba(var(--accent-rgb), 0.32);
  --accent-line-strong: rgba(var(--accent-rgb), 0.48);
  --accent-shadow: rgba(0, 0, 0, 0.28);
  --accent-shadow-strong: rgba(0, 0, 0, 0.34);
  --card-hover-shadow: rgba(0, 0, 0, 0.3);
  --interactive-line: rgba(var(--accent-rgb), 0.36);
  --interactive-start: rgba(var(--accent-rgb), 0.13);
  --interactive-end: rgba(var(--accent-2-rgb), 0.08);
  --interactive-hover-start: rgba(var(--accent-rgb), 0.2);
  --interactive-hover-end: rgba(var(--accent-2-rgb), 0.12);
  --focus-ring: rgba(var(--accent-rgb), 0.13);
  --status-good: #9bcdb1;
  --status-warn: #d5bf7c;
  --status-bad: #d19385;
  --radar-card-start: #1f2c25;
  --radar-card-end: #111a15;
  --radar-card-line: rgba(158, 184, 162, 0.38);
  --radar-accent: #9ee0bb;
  --radar-accent-2: #c6d08f;
  --radar-ink: #f4faf5;
  --radar-muted: rgba(232, 242, 235, 0.68);
  --radar-point-stroke: #15221b;
}

:root:not([data-theme="dark"])[data-palette="graphite"] {
  --accent-rgb: 36, 123, 143;
  --accent-2-rgb: 101, 112, 111;
  --bg: #f5f6f4;
  --surface: #ffffff;
  --surface-2: #edf2f2;
  --surface-3: #dbe5e5;
  --field-subtle: #f7f8f7;
  --line: #cfd8d8;
  --line-soft: #e2e7e6;
  --text: #151918;
  --muted: #66716f;
  --faint: #899290;
  --accent: #247b8f;
  --accent-2: #65706f;
  --focus: #1f6575;
  --shadow: 0 14px 38px rgba(36, 58, 63, 0.08);
  --sidebar-bg: rgba(255, 255, 255, 0.94);
  --hero-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 244, 244, 0.94)),
    linear-gradient(90deg, rgba(36, 123, 143, 0.08), rgba(101, 112, 111, 0.06));
  --card-bg: rgba(255, 255, 255, 0.95);
  --hover-line: #90acb2;
  --hover-bg: #f4f8f8;
  --table-hover: rgba(36, 123, 143, 0.06);
  --theme-wash: rgba(245, 246, 244, 0.74);
  --radar-fill: rgba(36, 123, 143, 0.18);
  --radar-glow: rgba(36, 123, 143, 0.22);
  --canvas-dot: rgba(36, 123, 143, 0.075);
  --canvas-start: #f8faf9;
  --canvas-mid: #f1f5f4;
  --canvas-end: #f8faf9;
  --label-soft: #6c7775;
  --brand-mark-text: #16596a;
  --radar-card-start: #1d282b;
  --radar-card-end: #101719;
  --radar-accent: #92d8e6;
  --radar-accent-2: #b8c4bf;
}

:root:not([data-theme="dark"])[data-palette="indigo"] {
  --accent-rgb: 75, 95, 215;
  --accent-2-rgb: 192, 93, 84;
  --bg: #f6f6fb;
  --surface-2: #eef0fb;
  --surface-3: #dfe3f8;
  --field-subtle: #f8f8fd;
  --line: #cfd4eb;
  --line-soft: #e2e5f2;
  --text: #171829;
  --muted: #66697c;
  --faint: #8a8da0;
  --accent: #4b5fd7;
  --accent-2: #c05d54;
  --focus: #3e50b8;
  --shadow: 0 14px 38px rgba(39, 48, 100, 0.09);
  --hero-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 242, 252, 0.94)),
    linear-gradient(90deg, rgba(75, 95, 215, 0.08), rgba(192, 93, 84, 0.06));
  --hover-line: #9aa5df;
  --hover-bg: #f5f6fd;
  --table-hover: rgba(75, 95, 215, 0.06);
  --theme-wash: rgba(246, 246, 251, 0.74);
  --radar-fill: rgba(75, 95, 215, 0.18);
  --radar-glow: rgba(75, 95, 215, 0.22);
  --canvas-dot: rgba(75, 95, 215, 0.075);
  --canvas-start: #f9f9fe;
  --canvas-mid: #f2f3fb;
  --canvas-end: #faf8fc;
  --label-soft: #6f7083;
  --brand-mark-text: #3545ab;
  --radar-card-start: #20243e;
  --radar-card-end: #111321;
  --radar-accent: #aeb8ff;
  --radar-accent-2: #ffb29b;
}

:root:not([data-theme="dark"])[data-palette="plum"] {
  --accent-rgb: 123, 74, 143;
  --accent-2-rgb: 41, 122, 117;
  --bg: #f8f5f8;
  --surface-2: #f2edf4;
  --surface-3: #e6ddeb;
  --field-subtle: #fbf8fb;
  --line: #dccfe2;
  --line-soft: #eee5f0;
  --text: #201724;
  --muted: #75687a;
  --faint: #98899d;
  --accent: #7b4a8f;
  --accent-2: #297a75;
  --focus: #6a3e7d;
  --shadow: 0 14px 38px rgba(68, 39, 78, 0.09);
  --hero-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 239, 248, 0.94)),
    linear-gradient(90deg, rgba(123, 74, 143, 0.08), rgba(41, 122, 117, 0.06));
  --hover-line: #b999c4;
  --hover-bg: #faf6fb;
  --table-hover: rgba(123, 74, 143, 0.06);
  --theme-wash: rgba(248, 245, 248, 0.74);
  --radar-fill: rgba(123, 74, 143, 0.18);
  --radar-glow: rgba(123, 74, 143, 0.22);
  --canvas-dot: rgba(123, 74, 143, 0.07);
  --canvas-start: #fcf9fc;
  --canvas-mid: #f5eef7;
  --canvas-end: #faf8f9;
  --label-soft: #75687a;
  --brand-mark-text: #683a78;
  --radar-card-start: #2b2130;
  --radar-card-end: #151018;
  --radar-accent: #d6a6e9;
  --radar-accent-2: #8edbd0;
}

:root:not([data-theme="dark"])[data-palette="ruby"] {
  --accent-rgb: 156, 63, 80;
  --accent-2-rgb: 167, 131, 56;
  --bg: #fbf5f4;
  --surface-2: #f7eceb;
  --surface-3: #efd9d7;
  --field-subtle: #fcf8f6;
  --line: #e4cecc;
  --line-soft: #f0e3e0;
  --text: #251718;
  --muted: #766564;
  --faint: #9a8886;
  --accent: #9c3f50;
  --accent-2: #a78338;
  --focus: #823344;
  --shadow: 0 14px 38px rgba(91, 43, 49, 0.09);
  --hero-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 239, 237, 0.94)),
    linear-gradient(90deg, rgba(156, 63, 80, 0.08), rgba(167, 131, 56, 0.06));
  --hover-line: #c99ba2;
  --hover-bg: #fcf6f4;
  --table-hover: rgba(156, 63, 80, 0.06);
  --theme-wash: rgba(251, 245, 244, 0.74);
  --radar-fill: rgba(156, 63, 80, 0.18);
  --radar-glow: rgba(156, 63, 80, 0.22);
  --canvas-dot: rgba(156, 63, 80, 0.07);
  --canvas-start: #fdf9f7;
  --canvas-mid: #f8eeee;
  --canvas-end: #fcf8f4;
  --label-soft: #796767;
  --brand-mark-text: #823344;
  --radar-card-start: #302022;
  --radar-card-end: #171012;
  --radar-accent: #f0a5ae;
  --radar-accent-2: #dec378;
}

:root:not([data-theme="dark"])[data-palette="cobalt"] {
  --accent-rgb: 34, 103, 184;
  --accent-2-rgb: 46, 138, 114;
  --bg: #f3f7fb;
  --surface-2: #ebf2fa;
  --surface-3: #d9e7f5;
  --field-subtle: #f7fbfe;
  --line: #c9d9e9;
  --line-soft: #e0e9f1;
  --text: #132033;
  --muted: #627083;
  --faint: #8493a5;
  --accent: #2267b8;
  --accent-2: #2e8a72;
  --focus: #1d579b;
  --shadow: 0 14px 38px rgba(31, 65, 110, 0.09);
  --hero-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(237, 245, 252, 0.94)),
    linear-gradient(90deg, rgba(34, 103, 184, 0.08), rgba(46, 138, 114, 0.06));
  --hover-line: #92add0;
  --hover-bg: #f3f8fd;
  --table-hover: rgba(34, 103, 184, 0.06);
  --theme-wash: rgba(243, 247, 251, 0.74);
  --radar-fill: rgba(34, 103, 184, 0.18);
  --radar-glow: rgba(34, 103, 184, 0.22);
  --canvas-dot: rgba(34, 103, 184, 0.07);
  --canvas-start: #f8fbff;
  --canvas-mid: #eef5fb;
  --canvas-end: #f7fbfa;
  --label-soft: #687688;
  --brand-mark-text: #1c579b;
  --radar-card-start: #182842;
  --radar-card-end: #0d1422;
  --radar-accent: #8ebcff;
  --radar-accent-2: #7ee3ca;
}

:root[data-theme="dark"][data-palette="graphite"] {
  --accent-rgb: 143, 213, 230;
  --accent-2-rgb: 184, 196, 191;
  --bg: #101214;
  --surface: #171b1e;
  --surface-2: #1f292d;
  --surface-3: #29383d;
  --field: #11171a;
  --field-subtle: #141c1f;
  --line: #33464c;
  --line-soft: #25343a;
  --text: #eff4f4;
  --muted: #a7b4b7;
  --faint: #7c8b8f;
  --accent: #8fd5e6;
  --accent-2: #b8c4bf;
  --accent-ink: #08191e;
  --focus: #a7e6f2;
  --sidebar-bg: rgba(16, 18, 20, 0.94);
  --hero-bg:
    linear-gradient(135deg, rgba(28, 35, 38, 0.96), rgba(17, 23, 26, 0.94)),
    linear-gradient(90deg, rgba(143, 213, 230, 0.08), rgba(184, 196, 191, 0.05));
  --card-bg: rgba(23, 27, 30, 0.94);
  --hover-line: #5d7981;
  --hover-bg: #1d282c;
  --table-hover: rgba(143, 213, 230, 0.07);
  --theme-wash: rgba(16, 18, 20, 0.76);
  --radar-fill: rgba(143, 213, 230, 0.18);
  --radar-glow: rgba(143, 213, 230, 0.22);
  --canvas-dot: rgba(143, 213, 230, 0.055);
  --canvas-start: #111416;
  --canvas-mid: #101214;
  --canvas-end: #151b1d;
  --label-soft: #a2b1b3;
  --brand-mark-text: #b4edf6;
  --radar-card-start: #1d282b;
  --radar-card-end: #101719;
  --radar-accent: #92d8e6;
  --radar-accent-2: #b8c4bf;
}

:root[data-theme="dark"][data-palette="indigo"] {
  --accent-rgb: 174, 184, 255;
  --accent-2-rgb: 255, 178, 155;
  --bg: #11131d;
  --surface: #181b2b;
  --surface-2: #222741;
  --surface-3: #30375d;
  --field: #121625;
  --field-subtle: #161a2c;
  --line: #39436f;
  --line-soft: #282f51;
  --text: #f3f5ff;
  --muted: #aeb5d3;
  --faint: #8088aa;
  --accent: #aeb8ff;
  --accent-2: #ffb29b;
  --accent-ink: #101426;
  --focus: #c0c8ff;
  --sidebar-bg: rgba(17, 19, 29, 0.94);
  --hero-bg:
    linear-gradient(135deg, rgba(28, 32, 53, 0.96), rgba(17, 20, 34, 0.94)),
    linear-gradient(90deg, rgba(174, 184, 255, 0.08), rgba(255, 178, 155, 0.05));
  --card-bg: rgba(24, 27, 43, 0.94);
  --hover-line: #6571ad;
  --hover-bg: #202642;
  --table-hover: rgba(174, 184, 255, 0.07);
  --theme-wash: rgba(17, 19, 29, 0.76);
  --radar-fill: rgba(174, 184, 255, 0.18);
  --radar-glow: rgba(174, 184, 255, 0.22);
  --canvas-dot: rgba(174, 184, 255, 0.055);
  --canvas-start: #121522;
  --canvas-mid: #11131d;
  --canvas-end: #171a2a;
  --label-soft: #abb2d0;
  --brand-mark-text: #d7dcff;
  --radar-card-start: #20243e;
  --radar-card-end: #111321;
  --radar-accent: #aeb8ff;
  --radar-accent-2: #ffb29b;
}

:root[data-theme="dark"][data-palette="plum"] {
  --accent-rgb: 211, 160, 230;
  --accent-2-rgb: 142, 219, 208;
  --bg: #17111b;
  --surface: #211927;
  --surface-2: #2b2234;
  --surface-3: #3d3049;
  --field: #18121d;
  --field-subtle: #1d1624;
  --line: #4b3a58;
  --line-soft: #31263a;
  --text: #f8f1fb;
  --muted: #c0aec8;
  --faint: #8d7a97;
  --accent: #d3a0e6;
  --accent-2: #8edbd0;
  --accent-ink: #190f20;
  --focus: #e0b2f0;
  --sidebar-bg: rgba(23, 17, 27, 0.94);
  --hero-bg:
    linear-gradient(135deg, rgba(36, 27, 43, 0.96), rgba(22, 16, 27, 0.94)),
    linear-gradient(90deg, rgba(211, 160, 230, 0.08), rgba(142, 219, 208, 0.05));
  --card-bg: rgba(33, 25, 39, 0.94);
  --hover-line: #7b5c8c;
  --hover-bg: #2a2031;
  --table-hover: rgba(211, 160, 230, 0.07);
  --theme-wash: rgba(23, 17, 27, 0.76);
  --radar-fill: rgba(211, 160, 230, 0.18);
  --radar-glow: rgba(211, 160, 230, 0.22);
  --canvas-dot: rgba(211, 160, 230, 0.055);
  --canvas-start: #18121d;
  --canvas-mid: #17111b;
  --canvas-end: #201726;
  --label-soft: #bca9c6;
  --brand-mark-text: #efd4f7;
  --radar-card-start: #2b2130;
  --radar-card-end: #151018;
  --radar-accent: #d6a6e9;
  --radar-accent-2: #8edbd0;
}

:root[data-theme="dark"][data-palette="ruby"] {
  --accent-rgb: 240, 165, 174;
  --accent-2-rgb: 222, 195, 120;
  --bg: #1a1113;
  --surface: #24181b;
  --surface-2: #312125;
  --surface-3: #452f34;
  --field: #1b1215;
  --field-subtle: #201619;
  --line: #56363c;
  --line-soft: #372428;
  --text: #fff2f2;
  --muted: #ccb0b0;
  --faint: #987f80;
  --accent: #f0a5ae;
  --accent-2: #dec378;
  --accent-ink: #221012;
  --focus: #f5b9c0;
  --sidebar-bg: rgba(26, 17, 19, 0.94);
  --hero-bg:
    linear-gradient(135deg, rgba(39, 26, 29, 0.96), rgba(24, 16, 18, 0.94)),
    linear-gradient(90deg, rgba(240, 165, 174, 0.08), rgba(222, 195, 120, 0.05));
  --card-bg: rgba(36, 24, 27, 0.94);
  --hover-line: #895d65;
  --hover-bg: #2d2023;
  --table-hover: rgba(240, 165, 174, 0.07);
  --theme-wash: rgba(26, 17, 19, 0.76);
  --radar-fill: rgba(240, 165, 174, 0.18);
  --radar-glow: rgba(240, 165, 174, 0.22);
  --canvas-dot: rgba(240, 165, 174, 0.055);
  --canvas-start: #1b1214;
  --canvas-mid: #1a1113;
  --canvas-end: #24181a;
  --label-soft: #c6a9aa;
  --brand-mark-text: #ffd7db;
  --radar-card-start: #302022;
  --radar-card-end: #171012;
  --radar-accent: #f0a5ae;
  --radar-accent-2: #dec378;
}

:root[data-theme="dark"][data-palette="cobalt"] {
  --accent-rgb: 142, 188, 255;
  --accent-2-rgb: 126, 227, 202;
  --bg: #0e1420;
  --surface: #151d2b;
  --surface-2: #1d2a3d;
  --surface-3: #2a3d5a;
  --field: #101827;
  --field-subtle: #131d2d;
  --line: #304561;
  --line-soft: #223248;
  --text: #eef5ff;
  --muted: #a7b8ce;
  --faint: #7890ab;
  --accent: #8ebcff;
  --accent-2: #7ee3ca;
  --accent-ink: #071320;
  --focus: #a5caff;
  --sidebar-bg: rgba(14, 20, 32, 0.94);
  --hero-bg:
    linear-gradient(135deg, rgba(22, 32, 49, 0.96), rgba(13, 20, 34, 0.94)),
    linear-gradient(90deg, rgba(142, 188, 255, 0.08), rgba(126, 227, 202, 0.05));
  --card-bg: rgba(21, 29, 43, 0.94);
  --hover-line: #58779f;
  --hover-bg: #1c2a40;
  --table-hover: rgba(142, 188, 255, 0.07);
  --theme-wash: rgba(14, 20, 32, 0.76);
  --radar-fill: rgba(142, 188, 255, 0.18);
  --radar-glow: rgba(142, 188, 255, 0.22);
  --canvas-dot: rgba(142, 188, 255, 0.055);
  --canvas-start: #0f1725;
  --canvas-mid: #0e1420;
  --canvas-end: #152033;
  --label-soft: #a3b6ce;
  --brand-mark-text: #d0e2ff;
  --radar-card-start: #182842;
  --radar-card-end: #0d1422;
  --radar-accent: #8ebcff;
  --radar-accent-2: #7ee3ca;
}

.palette-field {
  grid-column: 1 / -1;
}

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

.palette-option {
  --swatch-a: #2f6f54;
  --swatch-b: #c6d08f;
  --swatch-c: #f4f7f3;
  display: flex;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field-subtle);
  color: var(--text);
  text-align: left;
  font-weight: 800;
}

.palette-option:hover {
  border-color: var(--hover-line);
  background: var(--hover-bg);
}

.palette-option.active {
  border-color: var(--accent);
  background:
    linear-gradient(135deg, var(--accent-soft), rgba(var(--accent-2-rgb), 0.06)),
    var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

.palette-swatch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.palette-swatch span {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 999px;
  background: var(--swatch-a);
  box-shadow: 0 1px 4px rgba(10, 16, 14, 0.14);
}

.palette-swatch span:nth-child(2) {
  background: var(--swatch-b);
}

.palette-swatch span:nth-child(3) {
  background: var(--swatch-c);
}

.palette-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-option[data-palette-option="graphite"] {
  --swatch-a: #247b8f;
  --swatch-b: #65706f;
  --swatch-c: #edf2f2;
}

.palette-option[data-palette-option="indigo"] {
  --swatch-a: #4b5fd7;
  --swatch-b: #c05d54;
  --swatch-c: #eef0fb;
}

.palette-option[data-palette-option="plum"] {
  --swatch-a: #7b4a8f;
  --swatch-b: #297a75;
  --swatch-c: #f2edf4;
}

.palette-option[data-palette-option="ruby"] {
  --swatch-a: #9c3f50;
  --swatch-b: #a78338;
  --swatch-c: #f7eceb;
}

.palette-option[data-palette-option="cobalt"] {
  --swatch-a: #2267b8;
  --swatch-b: #2e8a72;
  --swatch-c: #ebf2fa;
}

:root[data-theme="dark"] .palette-option {
  background: var(--field-subtle);
}

.primary-button,
.mega-cta {
  box-shadow: 0 10px 22px var(--accent-shadow);
}

.primary-button:hover,
.mega-cta:hover {
  box-shadow: 0 14px 30px var(--accent-shadow-strong);
}

:root[data-theme="dark"] .primary-button,
:root[data-theme="dark"] .mega-cta {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

:root[data-theme="dark"] .primary-button:hover,
:root[data-theme="dark"] .mega-cta:hover {
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

.metric:hover,
.entry-card:hover,
.recent-job:hover,
.result-metric:hover,
.breakdown-card:hover,
.scenario-card:hover,
.what-if-chip:hover,
.time-row:hover,
.risk-item:hover,
.mini-metrics div:hover,
.hero-number-row div:hover,
.project-table-wrap:hover,
.radar-card:hover {
  box-shadow: 0 18px 42px var(--card-hover-shadow);
}

.stepper button.active {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 4px var(--focus-ring);
}

button.entry-card,
button.recent-job,
:root[data-theme="dark"] button.entry-card,
:root[data-theme="dark"] button.recent-job {
  border-color: var(--interactive-line);
  background:
    linear-gradient(135deg, var(--interactive-start), var(--interactive-end)),
    var(--card-bg);
}

button.entry-card::after,
button.recent-job::after,
:root[data-theme="dark"] button.entry-card::after,
:root[data-theme="dark"] button.recent-job::after {
  border-color: var(--accent-line);
}

button.entry-card:hover,
button.entry-card:focus-visible,
button.recent-job:hover,
button.recent-job:focus-visible,
:root[data-theme="dark"] button.entry-card:hover,
:root[data-theme="dark"] button.entry-card:focus-visible,
:root[data-theme="dark"] button.recent-job:hover,
:root[data-theme="dark"] button.recent-job:focus-visible {
  border-color: var(--accent);
  background:
    linear-gradient(135deg, var(--interactive-hover-start), var(--interactive-hover-end)),
    var(--card-bg);
}

button.recent-job:hover::after,
button.recent-job:focus-visible::after,
:root[data-theme="dark"] button.recent-job:hover::after,
:root[data-theme="dark"] button.recent-job:focus-visible::after {
  background: var(--accent-soft);
}

.recent-job .decision-badge.worth,
#resultRiskBadge.low {
  color: var(--status-good);
}

.recent-job .decision-badge.maybe,
#resultRiskBadge.medium {
  color: var(--status-warn);
}

.recent-job .decision-badge.not,
#resultRiskBadge.high {
  color: var(--status-bad);
}

.insight-card,
:root:not([data-theme="dark"]) .insight-card {
  background:
    radial-gradient(circle at 86% 20%, rgba(var(--accent-rgb), 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 247, 0.9)),
    var(--card-bg);
}

:root[data-theme="dark"] .insight-card {
  background:
    radial-gradient(circle at 86% 20%, rgba(var(--accent-rgb), 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    var(--card-bg);
}

.insight-horizon,
.insight-thread {
  stroke: rgba(var(--accent-rgb), 0.52);
}

.insight-thread,
:root:not([data-theme="dark"]) .insight-thread {
  stroke: rgba(var(--accent-rgb), 0.22);
}

.insight-halo,
:root:not([data-theme="dark"]) .insight-halo {
  fill: rgba(var(--accent-rgb), 0.1);
  stroke: rgba(var(--accent-rgb), 0.16);
}

.insight-spark {
  fill: rgba(var(--accent-rgb), 0.7);
  stroke: rgba(var(--accent-rgb), 0.78);
}

.insight-meter-bg {
  stroke: rgba(var(--accent-rgb), 0.16);
}

:root:not([data-theme="dark"]) .radar-card,
.radar-card {
  border-color: var(--radar-card-line);
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), 0.22), transparent 48%),
    linear-gradient(135deg, var(--radar-card-start), var(--radar-card-end));
  color: var(--radar-ink);
}

:root:not([data-theme="dark"]) .radar-heading .eyebrow,
.radar-heading .eyebrow,
:root:not([data-theme="dark"]) .radar-stat-top span,
.radar-stat-top span {
  color: var(--radar-muted);
}

:root:not([data-theme="dark"]) .radar-heading h3,
.radar-heading h3,
:root:not([data-theme="dark"]) .radar-stat,
.radar-stat {
  color: var(--radar-ink);
}

:root:not([data-theme="dark"]) .radar-stage::before,
.radar-stage::before {
  background:
    radial-gradient(circle, rgba(var(--accent-rgb), 0.28) 0%, rgba(var(--accent-2-rgb), 0.14) 36%, transparent 66%),
    conic-gradient(from 90deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-2-rgb), 0.08), rgba(var(--accent-rgb), 0.2));
}

:root:not([data-theme="dark"]) .radar-energy-core,
.radar-energy-core {
  background:
    radial-gradient(circle, rgba(13, 20, 22, 0.86) 0%, rgba(var(--accent-rgb), 0.38) 36%, rgba(var(--accent-2-rgb), 0.18) 60%, transparent 76%);
  box-shadow:
    0 0 42px rgba(var(--accent-rgb), 0.24),
    0 0 76px rgba(var(--accent-2-rgb), 0.16);
}

.radar-outline,
:root:not([data-theme="dark"]) .radar-outline {
  stroke: var(--radar-accent);
  filter: drop-shadow(0 8px 16px rgba(var(--accent-rgb), 0.28));
}

.radar-ghost-outline,
:root:not([data-theme="dark"]) .radar-ghost-outline {
  stroke: rgba(var(--accent-rgb), 0.22);
}

.radar-point,
:root:not([data-theme="dark"]) .radar-point {
  fill: var(--radar-accent);
  stroke: var(--radar-point-stroke);
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.46));
}

.radar-point-halo,
:root:not([data-theme="dark"]) .radar-point-halo {
  fill: rgba(var(--accent-rgb), 0.16);
  stroke: rgba(232, 242, 235, 0.34);
}

.radar-score-orb,
:root:not([data-theme="dark"]) .radar-score-orb {
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.34), transparent 28%),
    radial-gradient(circle, rgba(var(--accent-rgb), 0.46), rgba(var(--accent-2-rgb), 0.34) 58%, rgba(17, 22, 31, 0.28));
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.26),
    0 0 42px rgba(var(--accent-rgb), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.radar-bar span,
:root:not([data-theme="dark"]) .radar-bar span {
  background: linear-gradient(90deg, var(--radar-accent), var(--radar-accent-2));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.34);
}

@media (max-width: 720px) {
  .palette-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .palette-options {
    grid-template-columns: 1fr;
  }
}

/* Keep the radar visualization in sync with the selected page mode. */
:root:not([data-theme="dark"]) .radar-card {
  border-color: var(--line);
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.1), transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(var(--accent-rgb), 0.045)),
    var(--card-bg);
  color: var(--text);
  box-shadow: var(--shadow);
}

:root:not([data-theme="dark"]) .radar-card::after {
  background:
    radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0.9px, transparent 1.3px),
    linear-gradient(115deg, transparent 0%, rgba(var(--accent-rgb), 0.035) 48%, transparent 72%);
  opacity: 0.18;
  mix-blend-mode: multiply;
}

:root:not([data-theme="dark"]) .radar-heading .eyebrow,
:root:not([data-theme="dark"]) .radar-stat-top span {
  color: var(--label-soft);
}

:root:not([data-theme="dark"]) .radar-heading h3,
:root:not([data-theme="dark"]) .radar-stat {
  color: var(--text);
}

:root:not([data-theme="dark"]) .radar-heading h3 {
  text-shadow: none;
}

:root:not([data-theme="dark"]) .radar-stage::before {
  background:
    radial-gradient(circle, rgba(var(--accent-rgb), 0.16) 0%, rgba(var(--accent-2-rgb), 0.08) 38%, transparent 66%),
    conic-gradient(from 90deg, rgba(var(--accent-rgb), 0.13), rgba(var(--accent-2-rgb), 0.06), rgba(var(--accent-rgb), 0.11));
  opacity: 0.55;
  filter: blur(22px);
}

:root:not([data-theme="dark"]) .radar-atmosphere::before,
:root:not([data-theme="dark"]) .radar-atmosphere::after {
  border-color: rgba(var(--accent-rgb), 0.1);
}

:root:not([data-theme="dark"]) .radar-chart {
  filter: drop-shadow(0 22px 38px rgba(var(--accent-rgb), 0.16));
}

:root:not([data-theme="dark"]) .radar-ring {
  stroke: rgba(var(--accent-rgb), 0.16);
}

:root:not([data-theme="dark"]) .radar-axis-line {
  stroke: rgba(var(--accent-rgb), 0.14);
}

:root:not([data-theme="dark"]) .radar-label {
  fill: var(--text);
  filter: drop-shadow(0 1px 6px rgba(255, 255, 255, 0.76));
}

:root:not([data-theme="dark"]) .radar-ghost-outline {
  stroke: rgba(var(--accent-rgb), 0.18);
}

:root:not([data-theme="dark"]) .radar-outline {
  stroke: var(--accent);
  filter: drop-shadow(0 8px 16px rgba(var(--accent-rgb), 0.22));
}

:root:not([data-theme="dark"]) .radar-point-halo {
  fill: rgba(var(--accent-rgb), 0.13);
  stroke: rgba(var(--accent-rgb), 0.24);
}

:root:not([data-theme="dark"]) .radar-point {
  fill: var(--accent);
  stroke: #ffffff;
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.24));
}

:root:not([data-theme="dark"]) .radar-energy-core {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.68) 0%, rgba(var(--accent-rgb), 0.18) 36%, rgba(var(--accent-2-rgb), 0.1) 60%, transparent 76%);
  box-shadow:
    0 0 30px rgba(var(--accent-rgb), 0.12),
    0 0 54px rgba(var(--accent-2-rgb), 0.1);
}

:root:not([data-theme="dark"]) .radar-score-orb {
  border-color: rgba(var(--accent-rgb), 0.18);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.92), transparent 30%),
    radial-gradient(circle, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-2-rgb), 0.12) 58%, rgba(255, 255, 255, 0.58));
  box-shadow:
    0 18px 44px rgba(var(--accent-rgb), 0.14),
    0 0 30px rgba(var(--accent-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  color: var(--text);
}

:root:not([data-theme="dark"]) .radar-score-orb span {
  color: var(--muted);
}

:root:not([data-theme="dark"]) .radar-burst {
  opacity: 0.34;
  filter: none;
}

:root:not([data-theme="dark"]) .radar-burst-ray {
  stroke: rgba(var(--accent-rgb), 0.28);
}

:root:not([data-theme="dark"]) .radar-burst-ray.hot {
  stroke: rgba(var(--accent-rgb), 0.44);
}

:root:not([data-theme="dark"]) .radar-burst-ray.cool {
  stroke: rgba(var(--accent-2-rgb), 0.28);
}

:root:not([data-theme="dark"]) .radar-burst-dot {
  fill: rgba(var(--accent-rgb), 0.42);
  filter: none;
}

:root:not([data-theme="dark"]) .radar-scan-ring {
  background:
    conic-gradient(from 0deg, transparent 0deg, rgba(var(--accent-rgb), 0.22) 36deg, transparent 72deg),
    radial-gradient(circle, transparent 46%, rgba(var(--accent-rgb), 0.1) 47%, transparent 49%);
  opacity: 0.08;
}

:root:not([data-theme="dark"]) .radar-pulse {
  border-color: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.08);
}

:root:not([data-theme="dark"]) .radar-stat {
  border-bottom-color: rgba(var(--accent-rgb), 0.14);
}

:root:not([data-theme="dark"]) .radar-bar {
  background: rgba(var(--accent-rgb), 0.11);
}

:root:not([data-theme="dark"]) .radar-bar span {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.18);
}

/* ===== Homepage v2 redesign (bold hero + card grid, sidebar restyle) ===== */

.sidebar {
  gap: 32px;
  padding: 28px 22px;
}

.brand-block {
  gap: 14px;
  padding: 0 4px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  font-size: 17px;
}

.brand-block h1 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.nav-list {
  gap: 4px;
}

.nav-item {
  padding: 11px 14px;
  border-radius: 999px;
  font-weight: 650;
}

.nav-item:hover {
  border-color: transparent;
  background: var(--surface-2);
}

.nav-item.active {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.28);
}

.sidebar-card {
  border-radius: 16px;
}

/* Hero */

.dashboard-hero {
  grid-template-columns: minmax(0, 1fr);
  padding: 44px 40px;
  border-radius: 24px;
}

.hero-copy {
  max-width: 720px;
}

.hero-copy h2 {
  max-width: 660px;
  font-weight: 800;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.hero-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.hero-secondary-cta:hover {
  border-color: var(--hover-line);
  background: var(--hover-bg);
  transform: translateY(-1px);
}

.dashboard-hero .mega-cta {
  border-radius: 999px;
}

/* Feature card grid */

.entry-grid {
  gap: 18px;
  margin: 28px 0;
}

.entry-grid.single {
  grid-template-columns: 1fr;
}

.entry-grid.single .entry-card {
  max-width: 460px;
}

.entry-card {
  gap: 14px;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 1px 0 var(--line-soft);
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
}

.entry-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.entry-tile {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
}

.entry-card.future-entry .entry-tile {
  background: linear-gradient(135deg, var(--surface-3), var(--line));
}

.entry-card strong {
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 800;
}

/* Stat / metric cards */

.metric-grid {
  gap: 14px;
}

.metric {
  border-radius: 16px;
}

.recent-list .recent-job {
  border-radius: 16px;
}

@media (max-width: 720px) {
  .dashboard-hero {
    padding: 30px 22px;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-secondary-cta,
  .dashboard-hero .mega-cta {
    width: 100%;
  }
}

.toggle-trio button {
  min-width: 66px;
  padding: 0 6px;
  font-size: 13px;
}

.custom-time-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.custom-time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) 42px;
  gap: 10px;
  align-items: center;
}

.custom-time-row .field {
  margin: 0;
}