@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,700&display=swap');

:root {
  --bg: #060c18;
  --panel: #0c1525;
  --panel-alt: #0a1220;
  --text: #e8eeff;
  --muted: #8fa5c8;
  --line: #1e2e4a;
  --accent: #5b9eff;
  --accent-2: #22c9a5;
  --accent-warm: #ff9f5f;
  --accent-soft: #152038;
  --success-soft: #0f3328;
  --danger: #f06860;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow-lg: 0 28px 52px rgba(1, 4, 12, 0.65);
  --shadow-md: 0 16px 32px rgba(1, 4, 12, 0.5);
  --shadow-sm: 0 10px 20px rgba(1, 4, 12, 0.4);
  --surface-start: rgba(14, 24, 42, 0.92);
  --surface-end: rgba(8, 15, 28, 0.92);
  --surface-border: rgba(78, 100, 138, 0.48);
  --card-start: rgba(16, 26, 44, 0.96);
  --card-end: rgba(10, 18, 32, 0.96);
  --builder-row-start: rgba(14, 24, 42, 0.96);
  --builder-row-end: rgba(10, 18, 32, 0.96);
  --input-bg: #09101e;
  --input-border: #2e4266;
  --input-hover-border: #4462a0;
  --input-focus-bg: #0c1628;
  --label-color: #a8c0e8;
  --glow-primary: 0 0 24px rgba(91, 158, 255, 0.25);
  --glow-success: 0 0 20px rgba(34, 201, 165, 0.2);
  --glow-warm: 0 0 20px rgba(255, 159, 95, 0.2);
  --sa-question-bg: #0d1829;
  --sa-question-border: #3e547a;
  --sa-question-title: #90afe5;
  --sa-question-text: #dbe8ff;
  --sa-option-bg: #0f1930;
  --sa-result-good-border: #2a7867;
  --sa-result-good-bg: rgba(17, 53, 47, 0.44);
  --sa-result-mid-border: #5a75a2;
  --sa-result-mid-bg: rgba(21, 39, 63, 0.5);
  --sa-result-low-border: #7a3847;
  --sa-result-low-bg: rgba(53, 27, 33, 0.44);
  --target-score-bg: #162d4a;
  --target-score-border: #365d8c;
  --target-score-text: #c5ddff;
  --target-matched-bg: #11352f;
  --target-matched-border: #2a7867;
  --target-matched-text: #c7efe7;
  --target-missing-bg: #351b21;
  --target-missing-border: #7a3847;
  --target-missing-text: #f4cad3;
}

:root[data-theme='light'],
body[data-theme='light'] {
  --bg: #f0f4fa;
  --panel: #ffffff;
  --panel-alt: #f5f8fd;
  --text: #182438;
  --muted: #5a6d8a;
  --line: #d0dcea;
  --accent: #2d6ed6;
  --accent-2: #18a088;
  --accent-warm: #d4844c;
  --accent-soft: #e8f0fb;
  --success-soft: #ddf2e8;
  --shadow-lg: 0 24px 48px rgba(14, 38, 82, 0.12);
  --shadow-md: 0 14px 28px rgba(14, 38, 82, 0.09);
  --shadow-sm: 0 8px 16px rgba(14, 38, 82, 0.07);
  --surface-start: rgba(255, 255, 255, 0.96);
  --surface-end: rgba(244, 248, 254, 0.97);
  --surface-border: rgba(168, 188, 220, 0.72);
  --card-start: rgba(255, 255, 255, 0.99);
  --card-end: rgba(248, 252, 255, 0.99);
  --builder-row-start: rgba(255, 255, 255, 0.98);
  --builder-row-end: rgba(250, 254, 255, 0.98);
  --input-bg: #f8fbff;
  --input-border: #b4c8de;
  --input-hover-border: #8eb0cc;
  --input-focus-bg: #ffffff;
  --label-color: #445878;
  --glow-primary: 0 0 20px rgba(45, 110, 214, 0.15);
  --glow-success: 0 0 18px rgba(24, 160, 136, 0.12);
  --glow-warm: 0 0 18px rgba(212, 132, 76, 0.12);
}

html[data-theme='light'],
body[data-theme='light'] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

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

body.radix-shell {
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

#radixPageApp,
#landingRadixApp {
  min-height: 100dvh;
}

html[data-app-shell='mobile'] {
  scroll-behavior: smooth;
}

body[data-app-platform='mobile-web'].radix-shell button,
body[data-app-platform='mobile-web'].radix-shell a {
  touch-action: manipulation;
}

body[data-app-platform='mobile-web'].radix-shell {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --fallback-safe-area-bottom: 34px;
}

body[data-app-platform='mobile-web'].radix-shell [style*='position: fixed'],
body[data-app-platform='mobile-web'].radix-shell [style*='position:fixed'] {
  padding-bottom: env(safe-area-inset-bottom);
}

body[data-theme='light'] {
  background:
    radial-gradient(circle at 10% -10%, rgba(46, 112, 222, 0.2), transparent 40%),
    radial-gradient(circle at 100% 0, rgba(26, 154, 127, 0.14), transparent 36%),
    radial-gradient(circle at 90% 100%, rgba(218, 138, 82, 0.12), transparent 36%),
    var(--bg);
}

body {
  margin: 0;
  font-family: 'Sora', 'Segoe UI', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% -10%, rgba(76, 146, 255, 0.22), transparent 38%),
    radial-gradient(circle at 100% 0, rgba(31, 183, 154, 0.16), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(255, 154, 87, 0.16), transparent 34%),
    var(--bg);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(161, 181, 220, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(161, 181, 220, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.85), transparent 78%);
  z-index: -1;
}

body[data-theme='light']::before {
  background-image: linear-gradient(rgba(115, 136, 169, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 136, 169, 0.11) 1px, transparent 1px);
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.42), transparent 78%);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

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

@keyframes fade-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

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

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

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

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.2);
  }

  50% {
    box-shadow: 0 0 20px rgba(91, 158, 255, 0.4);
  }
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  width: min(1160px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.7rem 0 2.8rem;
}

.container > * {
  animation: rise-in 360ms ease both;
}

.container > :nth-child(2) {
  animation-delay: 60ms;
}

.container > :nth-child(3) {
  animation-delay: 110ms;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.topbar-theme {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-left: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--text);
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 1.62rem;
  height: 1.62rem;
  border-radius: 0.48rem;
  background: conic-gradient(from 180deg at 50% 50%, var(--accent), var(--accent-2), var(--accent-warm), var(--accent));
  box-shadow: 0 6px 14px rgba(23, 105, 255, 0.38);
}

.lang-label {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
}

.theme-label {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
}

.lang-switcher {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-alt);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.4rem 0.72rem;
  box-shadow: var(--shadow-sm);
}

.theme-switch {
  position: relative;
  width: 52px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-alt);
  padding: 0 2px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.theme-switch-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
}

.theme-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.36);
  background: #f7fbff;
  box-shadow: 0 2px 6px rgba(14, 35, 66, 0.28);
}

body[data-theme='light'] .theme-switch {
  background: #f3f7fd;
  border-color: #bacbe2;
}

body[data-theme='light'] .theme-switch-knob {
  left: calc(100% - 23px);
  background: #ffffff;
  border-color: rgba(167, 187, 214, 0.9);
  box-shadow: 0 2px 6px rgba(32, 67, 122, 0.2);
}

body[data-theme='dark'] .theme-switch {
  background: #121d2f;
  border-color: #415978;
}

body[data-theme='dark'] .theme-switch-knob {
  left: 3px;
  background: #dfe6f5;
  border-color: rgba(255, 255, 255, 0.34);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 0.72rem 1.3rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible,
.lang-switcher:focus-visible,
.theme-switch:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(91, 158, 255, 0.5);
  outline-offset: 2px;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #1769ff 0%, #0d7fe3 50%, #0da28f 100%);
  box-shadow: 0 14px 26px rgba(23, 105, 255, 0.35), var(--glow-primary);
}

.btn-primary:hover {
  box-shadow: 0 18px 32px rgba(23, 105, 255, 0.45), var(--glow-primary);
}

.btn-outline {
  color: var(--text);
  background: var(--panel-alt);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.btn-small {
  padding: 0.5rem 0.9rem;
  font-size: 0.88rem;
}

.hero,
.panel,
.resume-main,
.resume-side,
.resume-top-panel,
.resume-wide-panel {
  position: relative;
  background: linear-gradient(180deg, var(--surface-start), var(--surface-end));
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
}

.hero {
  overflow: hidden;
  padding: clamp(1.35rem, 2.5vw, 2.1rem);
  margin-bottom: 1rem;
}

.hero::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  right: -140px;
  top: -180px;
  background: radial-gradient(circle, rgba(23, 105, 255, 0.22), rgba(23, 105, 255, 0));
  pointer-events: none;
}

.hero h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.65rem, 3.2vw, 2.7rem);
  line-height: 1.08;
  font-family: 'Fraunces', 'Georgia', serif;
  letter-spacing: 0.01em;
}

.hero p {
  margin: 0;
  color: var(--muted);
  max-width: 72ch;
  line-height: 1.65;
}

.panel-pad-lg {
  padding: 1.2rem;
}

.panel-pad-md {
  padding: 1rem;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel-title {
  margin: 0;
  font-size: 1.03rem;
  letter-spacing: 0.01em;
}

.grid {
  display: grid;
  gap: 1rem;
}

.resume-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.worker-assessment-list {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 0.72rem;
}

.worker-assessment-card h4 {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.worker-assessment-profile-card p {
  margin-bottom: 0.72rem;
}

.worker-assessment-skills {
  margin-top: 0.72rem;
}

.header-chat-button {
  position: relative;
}

.header-chat-button > * + * {
  margin-left: 0.45rem;
}

.header-chat-unread {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.34rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--red-9), var(--orange-9));
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-3) 45%, transparent);
  animation: header-chat-pulse 1.8s ease-in-out infinite;
}

.header-chat-unread[hidden] {
  display: none !important;
}

@keyframes header-chat-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.32);
  }

  50% {
    transform: scale(1.09);
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

.landing-split-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-role-card h2 {
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
}

.landing-role-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.landing-radix-panel {
  margin-top: 1rem;
}

.landing-radix-head {
  margin-bottom: 0.88rem;
}

.landing-radix-title {
  margin: 0 0 0.38rem;
  font-size: clamp(1.18rem, 2.3vw, 1.55rem);
  letter-spacing: 0.01em;
}

.landing-radix-hint {
  margin: 0;
  color: var(--muted);
  max-width: 72ch;
  line-height: 1.52;
}

:root {
  --radix-feature-bg: var(--slate-dark-2, #0f1625);
  --radix-feature-border: var(--slate-dark-6, #2d3a4f);
  --radix-feature-border-active: var(--blue-dark-7, #2e5ca8);
  --radix-feature-text: var(--slate-dark-12, #eef3ff);
  --radix-feature-muted: var(--slate-dark-11, #a9b8d0);
  --radix-feature-badge-bg: var(--blue-dark-4, #153761);
  --radix-feature-badge-text: var(--blue-dark-11, #93c2ff);
}

:root[data-theme='light'],
body[data-theme='light'] {
  --radix-feature-bg: var(--slate-2, #f9f9fb);
  --radix-feature-border: var(--slate-7, #cdced6);
  --radix-feature-border-active: var(--blue-7, #5b9eff);
  --radix-feature-text: var(--slate-12, #1f1f25);
  --radix-feature-muted: var(--slate-11, #60646c);
  --radix-feature-badge-bg: var(--blue-3, #d5e2ff);
  --radix-feature-badge-text: var(--blue-11, #205dca);
}

.radix-feature-accordion {
  display: grid;
  gap: 0.58rem;
}

.radix-feature-item {
  border: 1px solid var(--radix-feature-border);
  border-radius: 14px;
  background: var(--radix-feature-bg);
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.radix-feature-item[data-state='open'] {
  border-color: var(--radix-feature-border-active);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--radix-feature-border-active) 35%, transparent);
}

.radix-feature-header {
  margin: 0;
}

.radix-feature-trigger {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--radix-feature-text);
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  text-align: left;
  padding: 0.86rem 0.94rem;
  cursor: pointer;
}

.radix-feature-trigger:hover {
  background: color-mix(in srgb, var(--radix-feature-bg) 82%, #ffffff 18%);
}

.radix-feature-trigger-main {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.radix-feature-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  background: var(--radix-feature-badge-bg);
  color: var(--radix-feature-badge-text);
}

.radix-feature-title {
  color: var(--radix-feature-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

.radix-feature-chevron {
  flex: none;
  color: var(--radix-feature-muted);
  transition: transform 160ms ease, color 160ms ease;
}

.radix-feature-item[data-state='open'] .radix-feature-chevron {
  transform: rotate(180deg);
  color: var(--radix-feature-text);
}

.radix-feature-content {
  overflow: hidden;
}

.radix-feature-content[data-state='open'] {
  animation: radix-slide-down 170ms ease-out;
}

.radix-feature-content[data-state='closed'] {
  animation: radix-slide-up 170ms ease-out;
}

.radix-feature-content-inner {
  border-top: 1px solid color-mix(in srgb, var(--radix-feature-border) 76%, transparent);
  padding: 0.76rem 0.94rem 0.9rem;
  display: grid;
  gap: 0.58rem;
}

.radix-feature-text {
  margin: 0;
  color: var(--radix-feature-muted);
  line-height: 1.52;
}

.radix-feature-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.32rem;
  color: var(--radix-feature-text);
}

.radix-feature-list li {
  line-height: 1.44;
}

body.landing-radix-page::before {
  display: none;
}

body.landing-radix-page {
  background: #101113;
}

body[data-theme='light'].landing-radix-page {
  background: #f8f8f9;
}

.landing-radix-root {
  min-height: 100vh;
  width: 100%;
  padding: 1.2rem 0 2rem;
}

.landing-radix-container {
  width: 100%;
  max-width: none;
  padding-inline: clamp(0.75rem, 2vw, 1.4rem);
  display: grid;
  gap: 1rem;
}

.landing-radix-topbar {
  border: 1px solid var(--gray-a6);
  border-radius: 14px;
  padding: 0.75rem 0.86rem;
  background: var(--gray-a2);
  backdrop-filter: blur(8px);
}

.landing-radix-brand-mark {
  width: 1.42rem;
  height: 1.42rem;
  border-radius: 0.36rem;
  background: linear-gradient(145deg, var(--indigo-9), var(--indigo-8));
}

.landing-radix-brand-kicker {
  color: var(--gray-11);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-radix-control {
  border: 1px solid var(--gray-a6);
  border-radius: 999px;
  padding: 0.26rem 0.46rem;
  background: var(--gray-a2);
}

.landing-radix-control-label {
  color: var(--gray-11);
}

.landing-radix-select {
  min-width: 116px;
}

.landing-radix-hero {
  border: 1px solid var(--gray-a6);
  background: var(--gray-a2);
}

.landing-radix-hero-title {
  max-width: 15ch;
  letter-spacing: -0.02em;
}

.landing-radix-flow-card,
.landing-radix-role-card,
.landing-radix-features-card {
  border: 1px solid var(--gray-a6);
  background: var(--gray-a2);
}

.landing-radix-role-card[data-tone='candidate'] {
  box-shadow: inset 0 0 0 1px var(--indigo-a5);
}

.landing-radix-role-card[data-tone='employer'] {
  box-shadow: inset 0 0 0 1px var(--cyan-a5);
}

.landing-radix-icon-chip {
  width: 1.92rem;
  height: 1.92rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-a6);
  background: var(--gray-a3);
}

.landing-radix-card-title {
  margin: 0;
}

.landing-radix-card-text,
.landing-radix-muted {
  color: var(--gray-11);
  line-height: 1.58;
}

.landing-radix-tab-content {
  margin-top: 0.72rem;
}

.landing-radix-list {
  margin: 0;
  padding-left: 1.08rem;
  display: grid;
  gap: 0.38rem;
}

.landing-radix-list li {
  color: var(--gray-12);
  line-height: 1.46;
}

.landing-radix-accordion {
  display: grid;
  gap: 0.56rem;
}

.landing-radix-accordion-item {
  border: 1px solid var(--gray-a6);
  border-radius: 12px;
  overflow: hidden;
  background: var(--gray-a2);
}

.landing-radix-accordion-item[data-state='open'] {
  border-color: var(--indigo-a7);
}

.landing-radix-accordion-header {
  margin: 0;
}

.landing-radix-accordion-trigger {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--gray-12);
  font: inherit;
  cursor: pointer;
  padding: 0.74rem 0.86rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.78rem;
  text-align: left;
}

.landing-radix-accordion-trigger:hover {
  background: var(--gray-a3);
}

.landing-radix-accordion-main {
  display: grid;
  gap: 0.3rem;
}

.landing-radix-accordion-title {
  font-weight: 600;
}

.landing-radix-accordion-chevron {
  color: var(--gray-11);
  transition: transform 160ms ease, color 160ms ease;
}

.landing-radix-accordion-item[data-state='open'] .landing-radix-accordion-chevron {
  transform: rotate(180deg);
  color: var(--gray-12);
}

.landing-radix-accordion-content {
  overflow: hidden;
}

.landing-radix-accordion-content[data-state='open'] {
  animation: landing-radix-slide-down 170ms ease-out;
}

.landing-radix-accordion-content[data-state='closed'] {
  animation: landing-radix-slide-up 170ms ease-out;
}

.landing-radix-accordion-body {
  border-top: 1px solid var(--gray-a5);
  padding: 0.68rem 0.86rem 0.8rem;
  display: grid;
  gap: 0.54rem;
}

@keyframes slide-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes slide-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

@keyframes landing-radix-slide-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes landing-radix-slide-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

@keyframes radix-slide-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes radix-slide-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

.auth-panel {
  max-width: 720px;
}

body.radix-shell .auth-centered-stage {
  width: min(960px, 100%);
  margin: 0 auto;
  min-height: clamp(430px, calc(100vh - 220px), 640px);
  display: flex;
  align-items: center;
}

body.radix-shell .auth-shell-card {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--dashboard-border-strong) 62%, var(--dashboard-border) 38%);
  background:
    radial-gradient(circle at 2% 0%, color-mix(in srgb, var(--cyan-a5) 36%, transparent) 0%, transparent 36%),
    var(--dashboard-panel-bg);
  box-shadow: var(--dashboard-shadow);
  animation: auth-shell-rise 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.radix-shell .auth-shell-card::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  top: -130px;
  right: -110px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--indigo-a6) 34%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

body.radix-shell .auth-shell-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(330px, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
  align-items: stretch;
}

body.radix-shell .auth-intro-panel {
  border: 1px solid color-mix(in srgb, var(--dashboard-border) 84%, transparent);
  border-radius: 16px;
  padding: clamp(14px, 2vw, 22px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-a4) 16%, transparent) 0%, transparent 100%),
    color-mix(in srgb, var(--panel-alt) 86%, transparent 14%);
  animation: auth-panel-fade 360ms ease both;
  animation-delay: 80ms;
}

body.radix-shell .auth-intro-badge {
  width: fit-content;
}

body.radix-shell .auth-intro-highlights {
  display: grid;
  gap: 0.56rem;
}

body.radix-shell .auth-intro-highlight {
  display: grid;
  gap: 0.2rem;
  padding: 0.56rem 0.66rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--dashboard-border) 78%, transparent);
  background: color-mix(in srgb, var(--panel) 88%, transparent 12%);
}

body.radix-shell .auth-form-card {
  border-color: color-mix(in srgb, var(--dashboard-border-strong) 56%, var(--dashboard-border) 44%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-a4) 12%, transparent) 0%, transparent 100%),
    var(--dashboard-panel-bg);
  animation: auth-panel-fade 360ms ease both;
  animation-delay: 140ms;
}

body.radix-shell .auth-mode-switch {
  width: 100%;
  margin-bottom: 0;
  display: flex;
}

body.radix-shell .auth-mode-switch .dashboard-segmented {
  width: 100%;
}

body.radix-shell .auth-mode-switch .dashboard-segmented .rt-SegmentedControlItem {
  flex: 1 1 0;
  justify-content: center;
}

body.radix-shell .auth-form {
  display: grid;
  gap: 0.96rem;
}

body.radix-shell .auth-form .form-grid {
  grid-template-columns: 1fr;
  gap: 0.72rem;
}

body.radix-shell .auth-fields-animated {
  animation: auth-fields-swap 190ms ease both;
}

body.radix-shell .auth-form label {
  margin-bottom: 0.3rem;
}

body.radix-shell .auth-consent-label {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  cursor: pointer;
  margin-bottom: 0;
}

body.radix-shell .auth-form-actions {
  margin-top: 0.2rem;
}

body.radix-shell .auth-form-actions .btn {
  width: 100%;
}

@keyframes auth-shell-rise {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
  }

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

@keyframes auth-panel-fade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

@keyframes auth-fields-swap {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

@media (max-width: 980px) {
  body.radix-shell .auth-centered-stage {
    min-height: auto;
  }

  body.radix-shell .auth-shell-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.radix-shell .auth-centered-stage {
    width: 100%;
  }

  body.radix-shell .auth-intro-panel {
    padding: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.radix-shell .auth-shell-card,
  body.radix-shell .auth-intro-panel,
  body.radix-shell .auth-form-card,
  body.radix-shell .auth-fields-animated {
    animation: none;
  }
}

.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card-start), var(--card-end));
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, border-color 200ms ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 32px rgba(1, 5, 12, 0.55);
  border-color: rgba(91, 158, 255, 0.4);
}

.card h3 {
  margin: 0 0 0.32rem;
  font-size: 1.01rem;
}

.card p {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.45;
}

.meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.88rem;
}

.card-actions .btn {
  flex: 1 1 120px;
  min-width: 0;
  text-align: center;
}

.status-ok {
  color: #89dccd;
}

.status-error {
  color: #ffaea8;
}

.employer-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: center;
}

.employer-limit {
  gap: 0.48rem;
}

.employer-limit select {
  width: auto;
  min-width: 74px;
}

.employer-results {
  grid-template-columns: 1fr;
}

.employer-results-head {
  align-items: flex-start;
}

.employer-head-meta {
  display: grid;
  gap: 0.24rem;
  justify-items: end;
}

.employer-vacancy-library-meta {
  gap: 0.45rem;
}

.employer-vacancy-library-list {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-bottom: 0.8rem;
}

.employer-screening-flow-panel {
  display: grid;
  gap: 0.65rem;
}

.employer-screening-pack-panel {
  display: grid;
  gap: 0.7rem;
}

.employer-screening-pack-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.employer-screening-pack-intro {
  grid-column: 1 / -1;
}

.employer-screening-pack-grid #screeningPackIntro {
  min-height: 84px;
  resize: vertical;
}

.employer-screening-pack-steps {
  grid-template-columns: 1fr;
  gap: 0.64rem;
}

.employer-screening-pack-step {
  padding: 0.74rem 0.82rem;
  display: grid;
  gap: 0.56rem;
}

.employer-screening-pack-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.employer-screening-pack-step-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
}

.employer-screening-pack-step-grid .inline-check {
  align-self: end;
}

.employer-screening-flow-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.employer-screening-flow-card {
  padding: 0.78rem 0.82rem;
  display: grid;
  gap: 0.52rem;
}

.employer-screening-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.employer-screening-flow-meta {
  display: flex;
  gap: 0.54rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.78rem;
}

.employer-screening-flow-note {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
}

.employer-screening-flow-result {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.78rem;
}

.employer-screening-flow-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.73rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.employer-screening-flow-pill-info {
  background: rgba(88, 128, 205, 0.18);
  border-color: rgba(106, 150, 231, 0.55);
  color: #d1e0ff;
}

.employer-screening-flow-pill-ok {
  background: rgba(53, 171, 130, 0.18);
  border-color: rgba(95, 214, 171, 0.55);
  color: #ccf2e4;
}

.employer-screening-flow-pill-error {
  background: rgba(211, 95, 95, 0.18);
  border-color: rgba(231, 128, 128, 0.55);
  color: #ffd9d9;
}

@media (max-width: 860px) {
  .employer-screening-pack-grid,
  .employer-screening-pack-step-grid {
    grid-template-columns: 1fr;
  }
}

.employer-vacancy-library-card.is-selected {
  border-color: #5f7fb4;
  box-shadow: 0 0 0 1px rgba(95, 127, 180, 0.45), 0 14px 24px rgba(7, 14, 26, 0.55);
}

.employer-vacancy-library-card {
  background: var(--color-panel-translucent);
  border-color: var(--gray-a6);
  box-shadow: none;
}

.employer-vacancy-library-card:hover {
  border-color: var(--gray-a7);
  box-shadow: none;
}

.employer-graph-head-meta .btn {
  justify-self: end;
}

.candidate-card {
  padding: 1rem 1.05rem;
}

.candidate-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
}

.candidate-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #365d8c;
  background: #162d4a;
  color: #c5ddff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.28rem 0.58rem;
  white-space: nowrap;
}

.candidate-meta {
  margin-top: 0.42rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.candidate-meta span {
  color: var(--muted);
  font-size: 0.82rem;
}

.candidate-access-note {
  margin-top: 0.38rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.candidate-coverage {
  margin-top: 0.8rem;
  border: 1px solid rgba(80, 105, 145, 0.55);
  border-radius: 11px;
  background: rgba(11, 24, 42, 0.84);
  padding: 0.56rem 0.64rem;
  display: grid;
  gap: 0.44rem;
}

.candidate-coverage-item {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  color: #c1d3f1;
  font-size: 0.83rem;
}

.candidate-coverage-item strong {
  color: #f0f6ff;
  font-weight: 700;
  white-space: nowrap;
}

.candidate-skill-grid {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.candidate-skill-section h4 {
  margin: 0 0 0.34rem;
  color: #b6c9ea;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.candidate-pill {
  font-size: 0.75rem;
}

.candidate-pill-matched {
  background: #11352f;
  border-color: #2a7867;
  color: #c7efe7;
}

.candidate-pill-missing {
  background: #351b21;
  border-color: #7a3847;
  color: #f4cad3;
}

.candidate-pill-neutral {
  background: #14223a;
  border-color: #2e4f83;
  color: #bfd8ff;
}

.candidate-pill-muted {
  background: #1c2131;
  border-color: #434e67;
  color: #c5cedf;
}

.candidate-experience {
  margin-top: 0.8rem;
}

.candidate-experience h4 {
  margin: 0 0 0.45rem;
  color: #b6c9ea;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.candidate-experience-list {
  display: grid;
  gap: 0.5rem;
}

.candidate-experience-item {
  border: 1px solid rgba(74, 99, 141, 0.62);
  border-radius: 10px;
  padding: 0.5rem 0.58rem;
  background: rgba(12, 24, 41, 0.76);
}

.candidate-experience-item h5 {
  margin: 0;
  font-size: 0.85rem;
}

.candidate-target-context {
  margin-top: 0.82rem;
  border: 1px solid rgba(74, 99, 141, 0.62);
  border-radius: 10px;
  padding: 0.52rem 0.6rem;
  background: rgba(12, 24, 41, 0.78);
  display: grid;
  gap: 0.34rem;
}

.candidate-target-context h4 {
  margin: 0;
  color: #b6c9ea;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.candidate-target-context p {
  margin: 0;
  color: #d2e0fa;
  font-size: 0.8rem;
}

.candidate-target-context-meta {
  display: flex;
  gap: 0.44rem 0.58rem;
  flex-wrap: wrap;
  color: #b8cbe9;
  font-size: 0.78rem;
}

.candidate-target-context-meta span {
  border-radius: 999px;
  border: 1px solid rgba(80, 111, 158, 0.55);
  background: rgba(16, 31, 54, 0.8);
  padding: 0.15rem 0.45rem;
}

.candidate-review-meta {
  margin-top: 0.82rem;
  border: 1px solid rgba(74, 99, 141, 0.62);
  border-radius: 10px;
  padding: 0.52rem 0.6rem;
  background: rgba(12, 24, 41, 0.78);
}

.candidate-review-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #d2e0fa;
}

.candidate-review-line strong {
  color: #ffffff;
}

.candidate-review-ticker {
  width: 0.66rem;
  height: 0.66rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(18, 35, 61, 0.32);
}

.candidate-review-comment {
  margin-top: 0.34rem;
  color: #b8cbe9;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.employer-graph-root {
  position: relative;
  width: 100%;
  min-height: 460px;
  border: 1px solid rgba(74, 99, 141, 0.52);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12, 23, 38, 0.92), rgba(9, 17, 30, 0.92));
  overflow: auto;
  padding: 0.4rem;
}

.employer-graph-svg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: 460px;
}

.employer-graph-svg .graph-node {
  transition: transform 140ms ease;
  cursor: pointer;
}

.employer-graph-svg .graph-node:hover {
  transform: none;
}

.employer-graph-svg .graph-node:focus-visible circle {
  stroke: #f0f6ff;
  stroke-width: 2;
}

.employer-graph-svg text {
  fill: #dbe8ff;
  font-size: 11px;
  font-family: 'Sora', 'Segoe UI', sans-serif;
  pointer-events: none;
}

.employer-graph-svg .graph-center text {
  fill: #f2f7ff;
  font-size: 12px;
  font-weight: 700;
}

.employer-graph-tooltip {
  position: absolute;
  z-index: 5;
  width: min(420px, calc(100% - 24px));
  border: 1px solid rgba(108, 138, 186, 0.88);
  border-radius: 12px;
  background: rgba(10, 20, 35, 0.97);
  box-shadow: 0 16px 30px rgba(4, 9, 16, 0.6);
  padding: 0.66rem 0.72rem;
}

.employer-graph-tooltip-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
}

.employer-graph-tooltip-head strong {
  color: #f2f7ff;
  font-size: 0.9rem;
}

.employer-graph-tooltip-score {
  border: 1px solid #365d8c;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  background: #132945;
  color: #d4e6ff;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.employer-graph-tooltip-sub {
  margin-top: 0.22rem;
  color: #bbcee9;
  font-size: 0.82rem;
}

.employer-graph-tooltip-line {
  margin-top: 0.48rem;
  display: grid;
  gap: 0.2rem;
}

.employer-graph-tooltip-line span {
  color: #8ea7cb;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.employer-graph-tooltip-line strong {
  color: #eaf2ff;
  font-size: 0.79rem;
  line-height: 1.35;
  font-weight: 600;
}

.employer-graph-tooltip-comment {
  margin-top: 0.48rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(88, 110, 148, 0.6);
}

.employer-graph-tooltip-comment span {
  color: #8ea7cb;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.employer-graph-tooltip-comment p {
  margin: 0.2rem 0 0;
  color: #e0ecff;
  font-size: 0.81rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.employer-graph-tooltip-actions {
  margin-top: 0.58rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.employer-graph-tooltip-actions .meta {
  font-size: 0.74rem;
}

.resume-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: start center;
  padding: 1rem;
  overflow-y: auto;
}

.resume-modal[hidden] {
  display: none;
}

.resume-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 18, 0.66);
}

.resume-modal-dialog {
  position: relative;
  width: min(1160px, 100%);
  max-height: calc(100vh - 2rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 24px 44px rgba(2, 8, 18, 0.56);
  padding: 0.9rem;
  display: grid;
  gap: 0.56rem;
  overflow-y: auto;
}

.resume-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.resume-modal-head h3 {
  margin: 0;
  font-size: 1rem;
}

.resume-modal-view-switch {
  display: inline-flex;
  gap: 0.44rem;
  flex-wrap: wrap;
}

.resume-modal-view-switch .btn.is-active {
  border-color: #6f98d6;
  background: #183459;
  color: #eef5ff;
}

.resume-modal-body {
  display: grid;
  gap: 0.5rem;
  min-height: 0;
}

.resume-modal-preview,
.resume-modal-json {
  width: 100%;
  height: min(58vh, 700px);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.resume-modal-preview {
  background: color-mix(in srgb, var(--panel) 92%, transparent 8%);
  color: var(--text);
  padding: 0.9rem;
  overflow: auto;
}

.resume-modal-json {
  background: rgba(8, 16, 28, 0.92);
  color: #dbe8ff;
  font: 500 0.78rem/1.5 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  padding: 0.7rem;
  margin: 0;
  overflow: auto;
  white-space: pre;
}

.resume-modal-json.is-error {
  color: #ffc8c4;
}

.resume-modal-consent {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.78rem 0.86rem;
  background: color-mix(in srgb, var(--panel-alt) 84%, transparent 16%);
  display: grid;
  gap: 0.56rem;
}

.resume-modal-consent-head,
.resume-modal-consent-meta,
.resume-modal-consent-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.resume-modal-consent-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.resume-modal-consent-tone {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.62rem;
  border: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 600;
}

.resume-modal-consent-tone.is-warning {
  border-color: color-mix(in srgb, var(--amber-a8) 70%, var(--line) 30%);
  color: var(--amber-11);
}

.resume-modal-consent-tone.is-ok {
  border-color: color-mix(in srgb, var(--green-a8) 70%, var(--line) 30%);
  color: var(--green-11);
}

.resume-preview-shell {
  display: grid;
  gap: 0.9rem;
  color: var(--text);
}

.resume-preview-shell.is-limited {
  background: color-mix(in srgb, var(--panel-alt) 30%, transparent 70%);
  border-radius: 12px;
  padding: 0.18rem;
}

.resume-preview-hero,
.resume-preview-card-head,
.resume-preview-contact-item,
.resume-preview-timeline-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.resume-preview-hero h4,
.resume-preview-section h5,
.resume-preview-card p {
  margin: 0;
}

.resume-preview-hero p,
.resume-preview-card p {
  margin: 0.28rem 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.resume-preview-meta,
.resume-preview-card-head span,
.resume-preview-contact-item span,
.resume-preview-timeline-item span,
.resume-preview-muted {
  color: var(--muted);
  font-size: 0.78rem;
}

.resume-preview-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-alt) 84%, transparent 16%);
  padding: 0.86rem;
  display: grid;
  gap: 0.6rem;
}

.resume-preview-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.resume-preview-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 0.18rem 0.58rem;
  font-size: 0.75rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 78%, var(--panel-alt) 22%);
}

.resume-preview-pill.is-verified {
  border-color: color-mix(in srgb, var(--green-a8) 70%, var(--line) 30%);
  color: var(--green-11);
}

.resume-preview-list,
.resume-preview-skill-groups,
.resume-preview-contact-list,
.resume-preview-timeline {
  display: grid;
  gap: 0.55rem;
}

.resume-preview-card,
.resume-preview-skill-group {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 76%, var(--panel-alt) 24%);
  padding: 0.7rem 0.78rem;
}

.resume-preview-card strong,
.resume-preview-skill-group strong,
.resume-preview-section h5,
.resume-preview-contact-item strong,
.resume-preview-timeline-item strong {
  color: var(--text);
}

.resume-modal-review {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.66rem;
  background: var(--panel-alt);
  display: grid;
  gap: 0.58rem;
}

.resume-modal-review h4 {
  margin: 0;
  font-size: 0.88rem;
  color: var(--label-color);
}

.employer-modal-review-grid textarea {
  min-height: 84px;
}

.employer-modal-review-grid input[type='color'] {
  height: 2.56rem;
  padding: 0.22rem;
  cursor: pointer;
}

.resume-modal-review-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 175;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.consent-modal[hidden] {
  display: block !important;
  visibility: hidden;
}

.consent-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.consent-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 18, 0.5);
}

.consent-modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(620px, calc(100vw - 2rem));
  transform: translate(-50%, calc(-50% + 18px));
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent 6%);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.consent-modal.is-open .consent-modal-dialog {
  transform: translate(-50%, -50%);
}

.consent-modal-head,
.consent-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
}

.consent-modal-head {
  border-bottom: 1px solid var(--line);
}

.consent-modal-actions {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}

.consent-modal-head h3 {
  margin: 0;
  font-size: 1rem;
}

.consent-modal-body {
  position: relative;
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
}

.consent-modal-text {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
}

.consent-modal-check {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.82rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent 14%);
  border-radius: 14px;
  color: var(--text);
  line-height: 1.45;
  cursor: pointer;
}

.consent-modal-check::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--panel-alt) 84%, transparent 16%);
}

.consent-modal-check:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line) 64%);
}

.consent-modal-check:hover::before {
  background: color-mix(in srgb, var(--panel-alt) 90%, var(--panel) 10%);
}

.consent-modal-check span {
  position: relative;
  z-index: 1;
  color: var(--text) !important;
}

.consent-modal-check input {
  position: relative;
  z-index: 1;
  margin-top: 0.18rem;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.consent-modal-error {
  border: 1px solid color-mix(in srgb, var(--tomato-a7) 80%, transparent 20%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tomato-a3) 68%, transparent 32%);
  color: var(--tomato-11);
  padding: 0.7rem 0.8rem;
  font-size: 0.84rem;
}

.chat-drawer {
  position: fixed;
  inset: 0;
  z-index: 170;
  pointer-events: none;
}

.chat-drawer[hidden] {
  display: block !important;
  visibility: hidden;
}

.chat-drawer.is-open {
  pointer-events: auto;
}

.chat-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 18, 0.44);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.chat-drawer.is-open .chat-drawer-backdrop {
  opacity: 1;
}

.chat-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(920px, 100%);
  height: 100%;
  border-left: 1px solid var(--line);
  background: var(--panel);
  box-shadow: -22px 0 44px rgba(2, 8, 18, 0.48);
  transform: translateX(100%);
  transition: transform 0.24s ease;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  overflow: hidden;
}

.chat-drawer.is-open .chat-drawer-panel {
  transform: translateX(0);
}

.chat-threads {
  border-right: 1px solid var(--line);
  background: var(--panel-alt);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.chat-threads-head {
  margin: 0;
  padding: 0.74rem 0.78rem;
  font-size: 0.95rem;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.chat-thread-list {
  overflow-y: auto;
  padding: 0.45rem;
  display: grid;
  gap: 0.42rem;
  align-content: start;
}

.chat-thread-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  width: 100%;
  padding: 0.55rem 0.58rem;
  display: grid;
  gap: 0.32rem;
  cursor: pointer;
}

.chat-thread-item:hover {
  border-color: var(--indigo-a7);
}

.chat-thread-item.is-active {
  border-color: var(--indigo-a8);
  background: color-mix(in srgb, var(--indigo-a4) 42%, transparent);
}

.chat-thread-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.42rem;
}

.chat-thread-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}

.chat-thread-time {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.chat-thread-meta,
.chat-thread-preview {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
}

.chat-context-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.chat-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent 18%);
  background: color-mix(in srgb, var(--panel-alt) 42%, transparent 58%);
  color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 400;
}

.chat-context-label,
.chat-context-value {
  font-weight: 400;
  color: inherit;
}

.chat-thread-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--indigo-a8);
  background: color-mix(in srgb, var(--indigo-a5) 64%, transparent 36%);
  color: var(--gray-12);
  font-size: 0.72rem;
  font-weight: 700;
}

.chat-main {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.chat-main-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.74rem 0.86rem;
  border-bottom: 1px solid var(--line);
}

.chat-main-title {
  margin: 0;
  font-size: 0.96rem;
}

.chat-main-sub {
  margin: 0.18rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.chat-messages {
  padding: 0.75rem 0.84rem;
  overflow-y: auto;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  background: color-mix(in srgb, var(--panel) 86%, transparent 14%);
}

.chat-message-row {
  display: flex;
}

.chat-message-row.mine {
  justify-content: flex-end;
}

.chat-message-row.theirs {
  justify-content: flex-start;
}

.chat-message {
  max-width: min(560px, 82%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.48rem 0.56rem;
  display: grid;
  gap: 0.28rem;
}

.chat-message-row.mine .chat-message {
  border-color: var(--indigo-a7);
  background: color-mix(in srgb, var(--indigo-a5) 36%, transparent 64%);
}

.chat-message-row.theirs .chat-message {
  background: color-mix(in srgb, var(--panel-alt) 82%, transparent 18%);
}

.chat-message-author {
  font-size: 0.72rem;
  color: var(--muted);
}

.chat-message-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.42;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-message-time {
  font-size: 0.7rem;
  color: var(--muted);
}

.chat-compose {
  border-top: 1px solid var(--line);
  padding: 0.66rem 0.8rem;
  display: grid;
  gap: 0.48rem;
  background: var(--panel);
}

.chat-compose textarea {
  min-height: 84px;
  resize: vertical;
}

.chat-compose-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

.chat-empty {
  color: var(--muted);
  font-size: 0.84rem;
}

body.modal-open {
  overflow: hidden;
}

.sa-config {
  display: grid;
  gap: 0.82rem;
}

.sa-dashboard-layout {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(0, 1.72fr) minmax(300px, 1fr);
  align-items: start;
}

.sa-dashboard-main {
  display: grid;
  gap: 0.9rem;
}

.sa-dashboard-side {
  position: sticky;
  top: clamp(12px, 2vh, 24px);
  align-self: start;
}

.sa-profile-verified-card {
  min-height: 0;
  height: fit-content;
  display: block;
}

.sa-config label {
  margin: 0;
}

.sa-block-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sa-block-selector-hint {
  margin-top: -0.1rem;
}

.sa-skill-select-hidden {
  display: none !important;
}

.sa-skill-cards-grid {
  display: grid;
  gap: 0.66rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sa-skill-card {
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 12px;
  padding: 0.56rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-a4) 14%, transparent) 0%, transparent 100%),
    color-mix(in srgb, var(--surface-start) 70%, var(--surface-end) 30%);
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  min-height: 132px;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.sa-skill-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-a8) 54%, var(--line) 46%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--slate-a8) 22%, transparent);
}

.sa-skill-card.is-selected {
  border-color: color-mix(in srgb, var(--accent-a9) 72%, var(--line) 28%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-a7) 48%, transparent), 0 10px 22px color-mix(in srgb, var(--slate-a8) 24%, transparent);
}

.sa-skill-card-head {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.sa-skill-card-head h4 {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.24;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  justify-content: flex-end;
}

.sa-skill-tag {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0.09rem 0.36rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--surface-end) 80%, transparent);
  color: var(--muted);
}

.sa-skill-tag.is-passed {
  border-color: color-mix(in srgb, var(--green-a8) 70%, transparent);
  color: color-mix(in srgb, var(--green-11) 82%, white 18%);
  background: color-mix(in srgb, var(--green-a4) 62%, transparent);
}

.sa-skill-tag.is-failed {
  border-color: color-mix(in srgb, var(--amber-a8) 72%, transparent);
  color: color-mix(in srgb, var(--amber-11) 78%, white 22%);
  background: color-mix(in srgb, var(--amber-a4) 60%, transparent);
}

.sa-skill-tag.is-pending {
  border-color: color-mix(in srgb, var(--gray-a8) 72%, transparent);
  color: var(--gray-11);
  background: color-mix(in srgb, var(--gray-a3) 68%, transparent);
}

.sa-skill-tag.is-verified {
  border-color: color-mix(in srgb, var(--cyan-a8) 66%, transparent);
  color: color-mix(in srgb, var(--cyan-11) 78%, white 22%);
  background: color-mix(in srgb, var(--cyan-a4) 62%, transparent);
}

.sa-skill-card-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.24;
  overflow-wrap: break-word;
}

.sa-skill-card-actions {
  margin-top: 0.08rem;
  display: flex;
  gap: 0.34rem;
  flex-wrap: wrap;
}

.sa-skill-select-btn,
.sa-skill-detail-btn {
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--surface-end) 86%, transparent);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.3rem 0.48rem;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.sa-skill-select-btn:hover,
.sa-skill-detail-btn:hover {
  border-color: color-mix(in srgb, var(--accent-a8) 60%, var(--line) 40%);
  background: color-mix(in srgb, var(--surface-end) 94%, transparent);
}

.sa-skill-card.is-selected .sa-skill-select-btn {
  border-color: color-mix(in srgb, var(--accent-a8) 74%, transparent);
  background: color-mix(in srgb, var(--accent-a4) 60%, var(--surface-end) 40%);
}

.sa-skill-card-details {
  margin-top: 0.12rem;
  border-top: 1px dashed color-mix(in srgb, var(--line) 72%, transparent);
  padding-top: 0.34rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.sa-skill-card-detail-item {
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 8px;
  padding: 0.24rem 0.34rem;
  background: color-mix(in srgb, var(--surface-end) 84%, transparent);
}

.sa-count-select {
  width: auto;
  min-width: 84px;
}

#saSkillBlock {
  min-width: 170px;
}

#saResumeSlug {
  min-width: 280px;
}

.sa-question-list {
  display: grid;
  gap: 0.82rem;
}

.sa-question-card {
  border: 1px solid rgba(74, 99, 141, 0.62);
  border-radius: 12px;
  padding: 0.76rem;
  background: linear-gradient(180deg, rgba(13, 24, 41, 0.9), rgba(10, 18, 31, 0.9));
}

.sa-question-card h3 {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  color: #90afe5;
}

.sa-question-card p {
  margin: 0 0 0.56rem;
  color: #dbe8ff;
  line-height: 1.45;
  font-size: 0.93rem;
}

.sa-option-list {
  display: grid;
  gap: 0.44rem;
}

.sa-option-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border: 1px solid rgba(62, 84, 122, 0.65);
  border-radius: 10px;
  padding: 0.45rem 0.54rem;
  background: rgba(15, 25, 42, 0.78);
  cursor: pointer;
  margin-bottom: 0;
}

.sa-option-item:hover {
  border-color: #5c7fba;
}

.sa-option-item input {
  margin-top: 0.2rem;
  width: auto;
}

.sa-option-item span {
  color: #dce8ff;
  font-size: 0.88rem;
  line-height: 1.4;
}

.sa-result-summary {
  border: 1px solid #35527d;
  border-radius: 12px;
  padding: 0.72rem 0.82rem;
  background: rgba(13, 24, 41, 0.84);
}

.sa-result-summary.is-good {
  border-color: #2a7867;
  background: rgba(17, 53, 47, 0.44);
}

.sa-result-summary.is-mid {
  border-color: #5a75a2;
  background: rgba(21, 39, 63, 0.5);
}

.sa-result-summary.is-low {
  border-color: #7a3847;
  background: rgba(53, 27, 33, 0.44);
}

.sa-result-main {
  font-size: 1.18rem;
  font-weight: 800;
  color: #f2f7ff;
}

.sa-result-sub {
  margin-top: 0.24rem;
  color: #c5d6f2;
  font-size: 0.9rem;
}

.sa-result-grid {
  margin-top: 0.74rem;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sa-result-card {
  border: 1px solid rgba(74, 99, 141, 0.62);
  border-radius: 12px;
  padding: 0.65rem 0.72rem;
  background: rgba(12, 24, 41, 0.76);
}

.sa-result-card h4,
.sa-validated-skills h4 {
  margin: 0 0 0.48rem;
  color: #b6c9ea;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sa-result-list {
  display: grid;
  gap: 0.4rem;
}

.sa-result-item {
  display: flex;
  justify-content: space-between;
  gap: 0.66rem;
  font-size: 0.86rem;
  color: #d8e5fb;
}

.sa-result-item strong {
  white-space: nowrap;
}

.sa-validated-skills {
  margin-top: 0.74rem;
  border: 1px solid rgba(74, 99, 141, 0.62);
  border-radius: 12px;
  padding: 0.65rem 0.72rem;
  background: rgba(12, 24, 41, 0.76);
}

.sa-profile-verified-card .sa-validated-skills {
  margin-top: 0;
  border: 0;
  padding: 0;
  background: transparent;
  min-height: 0;
  max-height: min(62vh, 560px);
  overflow: auto;
}

.sa-verified-grid {
  display: grid;
  gap: 0.44rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sa-verified-skill-card {
  display: flex;
  align-items: center;
  gap: 0.44rem;
  min-height: 32px;
  padding: 0.34rem 0.46rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--green-a8) 34%, var(--line) 66%);
  background: color-mix(in srgb, var(--green-a4) 26%, var(--surface-end) 74%);
  color: var(--text);
  font-size: 0.74rem;
  line-height: 1.2;
}

.sa-verified-skill-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green-a9) 72%, white 28%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-a5) 58%, transparent);
  flex: 0 0 auto;
}

@media (max-width: 1200px) {
  .sa-dashboard-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .sa-skill-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .sa-verified-grid {
    grid-template-columns: 1fr;
  }

  .sa-skill-card-details {
    grid-template-columns: 1fr;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.84rem;
}

.form-grid-full {
  grid-column: 1 / -1;
}

label {
  display: block;
  margin-bottom: 0.38rem;
  font-size: 0.84rem;
  color: var(--label-color);
  font-weight: 600;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--text);
  background: var(--input-bg);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--input-hover-border);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(91, 158, 255, 0.15), var(--glow-primary);
  background: var(--input-focus-bg);
}

textarea {
  resize: vertical;
  min-height: 88px;
}

.helper {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.stack {
  display: grid;
  gap: 1.04rem;
}

.builder-consent-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 88%, transparent 12%);
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.builder-consent-panel.is-warning {
  border-color: color-mix(in srgb, var(--amber-a7) 60%, var(--line) 40%);
}

.builder-consent-panel.is-active {
  border-color: color-mix(in srgb, var(--green-a7) 54%, var(--line) 46%);
}

.builder-consent-copy {
  display: grid;
  gap: 0.34rem;
}

.builder-consent-copy strong {
  font-size: 0.95rem;
  color: var(--text);
}

.builder-consent-copy p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.builder-consent-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.builder-consent-error {
  font-size: 0.8rem;
  color: var(--tomato-11);
}

.builder-rows {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
}

.builder-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--builder-row-start), var(--builder-row-end));
  padding: 0.78rem;
  box-shadow: 0 8px 18px rgba(2, 7, 18, 0.42);
}

.employer-vacancy-rows {
  gap: 0.9rem;
}

.employer-vacancy-row {
  padding: 0.84rem 0.9rem;
}

.employer-vacancy-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.66rem;
}

.employer-vacancy-head-left {
  min-width: 0;
}

.employer-vacancy-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.employer-vacancy-index {
  margin-top: 0.36rem;
  font-weight: 600;
}

.employer-vacancy-summary {
  display: none;
  margin-top: 0.28rem;
  line-height: 1.4;
  color: var(--muted);
  word-break: break-word;
}

.employer-vacancy-row.is-collapsed .form-grid {
  display: none;
}

.employer-vacancy-row.is-collapsed .employer-vacancy-summary {
  display: block;
}

.row-actions {
  margin-top: 0.68rem;
  display: flex;
  justify-content: flex-end;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--label-color);
}

.inline-check input {
  width: auto;
  margin: 0;
}

.experience-skill-picker {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-alt);
  padding: 0.56rem;
}

.employer-skill-picker {
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 0.52rem;
}

.employer-skill-group {
  padding: 0.52rem;
}

.employer-skill-chip {
  font-size: 0.77rem;
}

.employer-review-grid input[type='color'] {
  height: 2.56rem;
  padding: 0.22rem;
  cursor: pointer;
}

.skills-catalog-root {
  display: grid;
  gap: 0.62rem;
}

.skills-catalog-group {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-alt);
  padding: 0.56rem;
}

.skills-catalog-group h3 {
  margin: 0 0 0.48rem;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.skill-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.skill-option-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.33rem 0.56rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
}

.skill-option-chip:hover {
  background: var(--panel);
}

.skill-option-chip input {
  width: auto;
  margin: 0;
}

.catalog-skill-chip {
  position: relative;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.catalog-skill-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.catalog-skill-chip.is-selected {
  border-color: #5f7fb4;
  background: #16253e;
  color: #eef4ff;
}

.catalog-skill-chip.is-verified {
  border-color: #2f8f63;
  background: #0f2a22;
  color: #e5fff3;
}

.catalog-skill-chip.is-selected.is-verified {
  border-color: #39af79;
  background: #123528;
  color: #effff7;
}

body[data-theme='light'] .catalog-skill-chip.is-selected,
body[data-theme='light'] .catalog-skill-chip.is-selected span,
body[data-theme='light'] .catalog-skill-chip.is-verified,
body[data-theme='light'] .catalog-skill-chip.is-verified span,
body[data-theme='light'] .catalog-skill-chip.is-selected.is-verified,
body[data-theme='light'] .catalog-skill-chip.is-selected.is-verified span {
  color: #eef4ff;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.status {
  color: var(--muted);
  font-size: 0.9rem;
}

.resume-top-panel,
.resume-wide-panel {
  margin-bottom: 1rem;
  padding: 1.1rem;
}

.resume-page {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(290px, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.resume-main,
.resume-side {
  padding: 1.05rem;
}

.resume-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.95rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.resume-header-main {
  display: grid;
  gap: 0.4rem;
}

.resume-name {
  margin: 0;
  font-family: 'Fraunces', 'Georgia', serif;
  font-size: clamp(1.74rem, 3.3vw, 2.58rem);
  line-height: 1.05;
}

.resume-title {
  margin: 0.34rem 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.resume-hero-contacts {
  margin-top: 0.22rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.resume-hero-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gray-a6) 78%, transparent 22%);
  background: color-mix(in srgb, var(--panel-alt) 82%, transparent 18%);
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--muted);
}

.resume-hero-contact-chip strong {
  color: var(--text);
  font-weight: 600;
}

.resume-hero-contact-chip a {
  color: inherit;
  text-decoration: none;
}

.resume-hero-contact-chip a:hover {
  text-decoration: underline;
}

.resume-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.56rem;
}

.resume-hero-metric-card {
  border: 1px solid color-mix(in srgb, var(--gray-a6) 76%, transparent);
  border-radius: 12px;
  padding: 0.54rem 0.6rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-panel-translucent) 86%, var(--panel-alt) 14%),
    color-mix(in srgb, var(--color-panel-translucent) 72%, var(--panel-alt) 28%)
  );
  display: grid;
  gap: 0.34rem;
}

.resume-hero-metric-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.42rem;
}

.resume-hero-metric-head span {
  font-size: 0.72rem;
  color: var(--muted);
}

.resume-hero-metric-head strong {
  font-size: 1.04rem;
  line-height: 1;
  color: var(--text);
}

.resume-hero-metric-track {
  height: 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gray-a6) 72%, transparent);
  background: color-mix(in srgb, var(--gray-a4) 34%, transparent);
  overflow: hidden;
}

.resume-hero-metric-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--indigo-9), var(--cyan-9));
}

.section {
  margin-bottom: 1.16rem;
}

.section:last-child {
  margin-bottom: 0;
}

.section-title {
  margin: 0 0 0.6rem;
  color: #91ade0;
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.72rem;
}

.timeline li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.72rem;
  align-items: start;
}

.timeline-year {
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 700;
}

.timeline-scale-scroll {
  overflow-x: auto;
  padding-bottom: 0.42rem;
  position: relative;
}

.timeline-scale-scroll::-webkit-scrollbar {
  height: 8px;
}

.timeline-scale-scroll::-webkit-scrollbar-thumb {
  background: #3a5076;
  border-radius: 999px;
}

.timeline-scale {
  width: max(100%, 980px);
}

.timeline-rows {
  display: grid;
  gap: 0.65rem;
}

.timeline-track {
  position: relative;
  height: 2.06rem;
  overflow: visible;
}

.timeline-bar-chip {
  position: absolute;
  top: 0.24rem;
  height: 1.52rem;
  border-radius: 7px;
  padding: 0.12rem 0.44rem 0.34rem;
  overflow: visible;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: #d5dded;
  cursor: default;
  z-index: 1;
}

.timeline-bar-chip.work-experience {
  --timeline-color: #ff7a3d;
}

.timeline-bar-chip.education {
  --timeline-color: #1769ff;
}

.timeline-bar-chip.milestone {
  --timeline-color: #0da28f;
}

.timeline-bar-chip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  border-radius: 999px;
  background: var(--timeline-color, #1769ff);
}

.timeline-bar-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
  color: #d5deef;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-bar-meta {
  display: none;
}

.timeline-hover-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 170px;
  max-width: 320px;
  background: #101a2b;
  border: 1px solid #4e638c;
  border-radius: 9px;
  box-shadow: 0 14px 24px rgba(2, 7, 18, 0.62);
  padding: 0.46rem 0.55rem;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 20;
}

.timeline-tooltip-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: #e3ebfb;
  line-height: 1.24;
}

.timeline-tooltip-sub {
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #a6b7d5;
  line-height: 1.25;
}

.timeline-hover-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-axis {
  margin-top: 0.16rem;
}

.timeline-x-axis {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #445b83, #2c3f61);
}

.timeline-years {
  position: relative;
  margin-top: 0.5rem;
  height: 1.35rem;
}

.timeline-year-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: #95a8cc;
  font-size: 0.74rem;
  white-space: nowrap;
}

.timeline-year-tick.is-start {
  transform: translateX(0);
}

.timeline-year-tick.is-end {
  transform: translateX(-100%);
  text-align: right;
}

.resume-item {
  margin-bottom: 0.8rem;
}

.resume-item:last-child {
  margin-bottom: 0;
}

.resume-item h4 {
  margin: 0 0 0.18rem;
  font-size: 0.97rem;
}

.resume-item .sub {
  color: var(--muted);
  font-size: 0.88rem;
}

.resume-item p {
  margin: 0.34rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #c8d6f0;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.34rem 0.62rem;
  border: 1px solid #36506a;
  background: #0f2436;
  color: #bde6df;
  font-size: 0.79rem;
}

.verified-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem;
}

.verified-skill-pill {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.34rem;
  padding-right: 0.72rem;
}

.verified-skill-label {
  font-weight: 600;
}

.verified-skill-source {
  font-size: 0.68rem;
  line-height: 1.2;
  opacity: 0.82;
  white-space: nowrap;
}

.work-item {
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed #3a4f74;
}

.work-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.experience-skills-row {
  margin-top: 0.55rem;
  display: grid;
  gap: 0.38rem;
}

.experience-skill-pill {
  background: #14223a;
  border-color: #2e4f83;
  color: #b9d3ff;
}

.experience-skill-pill.is-verified {
  border-color: #2a7867;
  background: #11352f;
  color: #d5f5ee;
}

.target-match-list {
  display: grid;
  gap: 0.72rem;
}

.target-match-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.64rem;
  background: linear-gradient(180deg, rgba(14, 25, 43, 0.9), rgba(11, 19, 33, 0.9));
}

.target-match-wide-panel {
  margin-bottom: 1rem;
}

.target-private-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.56rem;
  margin-bottom: 0.56rem;
}

.target-private-head .section-title {
  margin: 0;
}

.target-private-badge {
  border-color: #2f4b70;
  background: #132337;
  color: #cfe1ff;
  font-size: 0.74rem;
  font-weight: 700;
}

.target-match-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
}

.target-match-head h4 {
  margin: 0;
  line-height: 1.32;
}

.target-head-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.36rem;
}

.target-applied-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #2a7867;
  background: #11352f;
  color: #c7efe7;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.2rem 0.52rem;
  white-space: nowrap;
}

.target-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #365d8c;
  background: #162d4a;
  color: #c5ddff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.2rem 0.52rem;
  white-space: nowrap;
}

.target-card-actions {
  margin-top: 0.44rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

body.radix-shell [data-worker-target-action],
body.radix-shell [data-target-action='apply'],
body.radix-shell [data-target-action='open-chat'] {
  cursor: pointer !important;
}

body.radix-shell [data-worker-target-action][disabled],
body.radix-shell [data-worker-target-action][data-disabled],
body.radix-shell [data-target-action='apply'][disabled],
body.radix-shell [data-target-action='apply'][data-disabled],
body.radix-shell [data-target-action='open-chat'][disabled],
body.radix-shell [data-target-action='open-chat'][data-disabled] {
  cursor: not-allowed !important;
}

.target-match-body {
  margin-top: 0.44rem;
  display: grid;
  gap: 0.38rem;
}

.target-coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  margin-top: 0.16rem;
}

.target-coverage-item {
  border: 1px solid color-mix(in srgb, var(--gray-a6) 76%, transparent);
  border-radius: 10px;
  padding: 0.38rem 0.44rem;
  background: color-mix(in srgb, var(--color-panel-translucent) 78%, var(--panel-alt) 22%);
  display: grid;
  gap: 0.22rem;
}

.target-coverage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

.target-coverage-head span {
  font-size: 0.68rem;
  color: var(--muted);
}

.target-coverage-head strong {
  font-size: 0.74rem;
  color: var(--text);
}

.target-coverage-track {
  height: 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gray-a6) 72%, transparent);
  background: color-mix(in srgb, var(--gray-a4) 34%, transparent);
  overflow: hidden;
}

.target-coverage-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--indigo-9), var(--cyan-9));
}

.target-coverage-meta {
  font-size: 0.68rem;
  color: var(--muted);
}

.target-match-card.is-collapsed .target-match-body {
  display: none;
}

.target-match-card.is-applied {
  border-color: #3d8f7d;
}

.target-hidden-toolbar {
  margin-bottom: 0.64rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.target-hidden-count {
  font-size: 0.86rem;
  color: var(--muted);
}

.target-skill-row {
  margin-top: 0;
  display: grid;
  gap: 0.26rem;
}

.target-skill-pill {
  background: #132337;
  border-color: #2f4b70;
  color: #cfe1ff;
}

.target-skill-pill.is-neutral {
  background: #132337;
  border-color: #2f4b70;
  color: #cfe1ff;
}

.target-skill-pill.is-matched {
  background: #11352f;
  border-color: #2a7867;
  color: #c7efe7;
}

.target-skill-pill.is-missing {
  background: #351b21;
  border-color: #7a3847;
  color: #f4cad3;
}

.target-missing-text {
  margin-top: 0.44rem !important;
  color: var(--muted) !important;
  font-size: 0.84rem !important;
}

.target-source-link a {
  word-break: break-all;
}

@media (min-width: 1160px) {
  .target-match-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.filter-summary {
  margin-bottom: 0.76rem;
  color: var(--muted);
  font-size: 0.87rem;
}

.skills-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

.skills-toolbar-text {
  color: var(--muted);
  font-size: 0.9rem;
}

.skills-clear-btn {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.skill-filter-pill {
  cursor: pointer;
  font: inherit;
  color: #eef4ff;
  background: #14253f;
  border-color: #355481;
  gap: 0.34rem;
}

.skill-filter-pill:hover {
  background: #1a3255;
}

.skill-filter-pill.is-selected {
  background: linear-gradient(135deg, var(--accent), #3d86ff);
  border-color: var(--accent);
  color: #fff;
}

.skill-filter-pill.is-verified {
  border-color: #2d826f;
  box-shadow: inset 0 0 0 1px rgba(42, 120, 103, 0.35);
}

.verified-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 999px;
  border: 1px solid #65d6a7;
  background: #1f9f64;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(19, 30, 53, 0.4);
}

.related-experience-section {
  margin-top: 0.95rem;
  padding-top: 0.78rem;
  border-top: 1px solid var(--line);
}

.empty {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

body.print-mode .topbar {
  display: none;
}

body.print-mode .container {
  padding-top: 0.7rem;
}

body.embed-mode .topbar {
  display: none !important;
}

body.embed-mode .container {
  padding-top: 0.7rem;
}

body.feature-figma-style {
  color: #f0efe8;
  background:
    radial-gradient(circle at 12% -16%, rgba(191, 152, 83, 0.24), transparent 34%),
    radial-gradient(circle at 88% 0, rgba(102, 120, 95, 0.24), transparent 32%),
    linear-gradient(180deg, #544a3a 0%, #4b4336 34%, #5f5747 100%);
}

body.feature-figma-style::before {
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  mask-image: none;
}

body.feature-figma-style .container {
  width: min(1340px, calc(100% - 1.4rem));
}

body.feature-figma-style #resume-root {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

body.feature-figma-style .feature-resume-layout {
  display: grid;
  grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 48px rgba(14, 10, 5, 0.35);
}

body.feature-figma-style .feature-left-panel {
  background: linear-gradient(180deg, #1c1c1a 0%, #141413 55%, #0f0f0e 100%);
  padding: 1.2rem 1.05rem 1.3rem;
  display: grid;
  gap: 1rem;
  align-content: start;
}

body.feature-figma-style .feature-name-block h1 {
  margin: 0;
  color: #f3f1e9;
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body.feature-figma-style .feature-name-block p {
  margin: 0.48rem 0 0;
  color: #b8b6ab;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body.feature-figma-style .feature-photo-block {
  border-radius: 12px;
  border: 1px solid rgba(244, 240, 224, 0.15);
  background: linear-gradient(155deg, rgba(242, 223, 178, 0.12), rgba(45, 45, 43, 0.2));
  min-height: 250px;
  overflow: hidden;
}

body.feature-figma-style .feature-photo-image,
body.feature-figma-style .feature-photo-placeholder {
  width: 100%;
  height: 100%;
  min-height: 250px;
}

body.feature-figma-style .feature-photo-image {
  object-fit: cover;
  display: block;
}

body.feature-figma-style .feature-photo-placeholder {
  display: grid;
  place-items: center;
  color: #f3f1e9;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

body.feature-figma-style .feature-side-section {
  border-top: 1px solid rgba(246, 240, 219, 0.2);
  padding-top: 0.7rem;
}

body.feature-figma-style .feature-side-section h2 {
  margin: 0 0 0.52rem;
  color: #f8f3df;
  font-size: 1.02rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body.feature-figma-style .feature-contact-list,
body.feature-figma-style .feature-edu-item,
body.feature-figma-style .feature-skill-group {
  margin-bottom: 0.55rem;
}

body.feature-figma-style .feature-contact-item {
  margin-bottom: 0.42rem;
}

body.feature-figma-style .feature-contact-label {
  color: #c5c0af;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.feature-figma-style .feature-contact-value,
body.feature-figma-style .feature-contact-value a {
  color: #f2efe2;
  font-size: 0.82rem;
  word-break: break-word;
}

body.feature-figma-style .feature-contact-value a:hover {
  color: #ffb14f;
}

body.feature-figma-style .feature-edu-item h4,
body.feature-figma-style .feature-skill-group h4 {
  margin: 0 0 0.23rem;
  color: #ece9dc;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.feature-figma-style .feature-edu-sub {
  color: #c7c3b2;
  font-size: 0.78rem;
  line-height: 1.35;
}

body.feature-figma-style .feature-skills-toolbar {
  margin-bottom: 0.55rem;
}

body.feature-figma-style .feature-skills-toolbar .skills-toolbar-text {
  color: #c8c4b5;
  font-size: 0.79rem;
}

body.feature-figma-style .feature-clear-btn {
  color: #f0ecdc;
  border-color: rgba(248, 240, 212, 0.34);
  background: rgba(255, 255, 255, 0.04);
}

body.feature-figma-style .feature-clear-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.feature-figma-style .feature-skill-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(252, 243, 218, 0.28);
  color: #ece9da;
}

body.feature-figma-style .feature-skill-pill:hover {
  background: rgba(255, 255, 255, 0.12);
}

body.feature-figma-style .feature-skill-pill.is-selected {
  background: linear-gradient(135deg, #f75044, #cd2f2a);
  border-color: #cd2f2a;
  color: #fff;
}

body.feature-figma-style .feature-skill-pill.is-verified {
  border-color: #3c9b85;
  background: rgba(23, 86, 73, 0.28);
}

body.feature-figma-style .feature-main-panel {
  background: linear-gradient(180deg, #b0a286 0%, #9f9177 100%);
  color: #1f1a14;
  padding: 1.02rem;
  display: grid;
  gap: 0.9rem;
}

body.feature-figma-style .feature-main-section {
  background: linear-gradient(180deg, rgba(255, 251, 238, 0.78), rgba(255, 248, 232, 0.68));
  border: 1px solid rgba(93, 74, 44, 0.26);
  border-radius: 12px;
  padding: 0.8rem;
}

body.feature-figma-style .feature-main-section h2 {
  margin: 0 0 0.6rem;
  color: #2f2518;
  font-size: 1.28rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.feature-figma-style .feature-exp-list {
  display: grid;
  gap: 0.52rem;
}

body.feature-figma-style .feature-exp-item {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 0.66rem;
  align-items: start;
  padding: 0.45rem 0.5rem;
  border-radius: 9px;
  position: relative;
}

body.feature-figma-style .feature-exp-item::before {
  content: '';
  position: absolute;
  top: 0.34rem;
  bottom: 0.34rem;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: #f74a3c;
}

body.feature-figma-style .feature-exp-item[data-tone='1']::before {
  background: #0f63ff;
}

body.feature-figma-style .feature-exp-item[data-tone='2']::before {
  background: #0ea58d;
}

body.feature-figma-style .feature-exp-item[data-tone='3']::before {
  background: #f2a31b;
}

body.feature-figma-style .feature-exp-period {
  color: #463a2b;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.feature-figma-style .feature-exp-body h3 {
  margin: 0;
  color: #17120d;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
}

body.feature-figma-style .feature-exp-body p {
  margin: 0.36rem 0 0;
  color: #34291f;
  font-size: 0.86rem;
  line-height: 1.48;
}

body.feature-figma-style .feature-exp-skills {
  margin-top: 0.44rem;
}

body.feature-figma-style .feature-exp-pill {
  background: #fff6db;
  border-color: #e3cea2;
  color: #403220;
}

body.feature-figma-style .feature-exp-pill.is-verified {
  border-color: #5bb693;
  background: #edf9f3;
  color: #205543;
}

body.feature-figma-style .feature-about-section p {
  margin: 0;
  color: #312619;
  font-size: 0.9rem;
  line-height: 1.6;
}

body.feature-figma-style .feature-project-list {
  display: grid;
  gap: 0.58rem;
}

body.feature-figma-style .feature-project-item {
  border-left: 4px solid #f74a3c;
  background: rgba(255, 255, 255, 0.62);
  border-radius: 9px;
  padding: 0.45rem 0.6rem;
}

body.feature-figma-style .feature-project-item:nth-child(2n) {
  border-left-color: #0f63ff;
}

body.feature-figma-style .feature-project-item:nth-child(3n) {
  border-left-color: #0ea58d;
}

body.feature-figma-style .feature-project-item h3 {
  margin: 0;
  color: #1f160f;
  font-size: 1rem;
}

body.feature-figma-style .feature-project-item p {
  margin: 0.32rem 0 0;
  color: #3f3326;
  font-size: 0.86rem;
  line-height: 1.48;
}

body.feature-figma-style .feature-project-link {
  margin-top: 0.38rem;
  font-size: 0.81rem;
}

body.feature-figma-style .feature-project-link a {
  color: #0f63ff;
  word-break: break-all;
}

body.feature-figma-style .feature-project-link a:hover {
  color: #0a43aa;
}

body.feature-figma-style .empty {
  color: rgba(23, 19, 14, 0.7);
}

body[data-theme='light'] .card:hover {
  box-shadow: 0 14px 24px rgba(22, 56, 109, 0.18);
  border-color: #89a6d0;
}

body[data-theme='light'] .employer-vacancy-library-card.is-selected {
  border-color: #8faed7;
  box-shadow: 0 0 0 1px rgba(143, 174, 215, 0.55), 0 10px 18px rgba(38, 74, 128, 0.16);
}

body[data-theme='light'] .employer-screening-flow-pill-info {
  background: #edf4ff;
  border-color: #aac3ea;
  color: #2a4f83;
}

body[data-theme='light'] .employer-screening-flow-pill-ok {
  background: #ecf9f2;
  border-color: #9ed8bf;
  color: #1f5f49;
}

body[data-theme='light'] .employer-screening-flow-pill-error {
  background: #ffefef;
  border-color: #e3abab;
  color: #7f3333;
}

body[data-theme='light'] .candidate-score {
  border-color: #b4c7e2;
  background: #edf4ff;
  color: #26466f;
}

body[data-theme='light'] .candidate-coverage,
body[data-theme='light'] .candidate-experience-item,
body[data-theme='light'] .candidate-target-context,
body[data-theme='light'] .candidate-review-meta,
body[data-theme='light'] .sa-result-card,
body[data-theme='light'] .sa-validated-skills {
  border-color: rgba(131, 157, 196, 0.58);
  background: rgba(238, 245, 255, 0.92);
}

body[data-theme='light'] .candidate-coverage-item,
body[data-theme='light'] .candidate-coverage-item strong,
body[data-theme='light'] .candidate-skill-section h4,
body[data-theme='light'] .candidate-experience h4,
body[data-theme='light'] .candidate-target-context h4,
body[data-theme='light'] .sa-result-item,
body[data-theme='light'] .sa-result-card h4,
body[data-theme='light'] .sa-validated-skills h4 {
  color: #2f4465;
}

body[data-theme='light'] .candidate-pill-matched {
  background: #e4f7ef;
  border-color: #7dbca6;
  color: #1d5a47;
}

body[data-theme='light'] .candidate-pill-missing {
  background: #fdeef1;
  border-color: #d9a0ab;
  color: #8a3c4a;
}

body[data-theme='light'] .candidate-pill-neutral {
  background: #e9f1ff;
  border-color: #8facdf;
  color: #274c7f;
}

body[data-theme='light'] .candidate-pill-muted {
  background: #eef2f9;
  border-color: #c1ccde;
  color: #445571;
}

body[data-theme='light'] .candidate-review-line,
body[data-theme='light'] .candidate-review-comment {
  color: #365078;
}

body[data-theme='light'] .candidate-target-context p,
body[data-theme='light'] .candidate-target-context-meta {
  color: #365078;
}

body[data-theme='light'] .candidate-target-context-meta span {
  border-color: rgba(131, 157, 196, 0.64);
  background: rgba(231, 241, 255, 0.95);
}

body[data-theme='light'] .candidate-review-line strong {
  color: #21395d;
}

html[data-theme='light'] .target-match-card,
body[data-theme='light'] .target-match-card,
body.light .target-match-card {
  border-color: rgba(131, 157, 196, 0.58);
  background: rgba(238, 245, 255, 0.92);
}

html[data-theme='light'] .resume-hero-metric-card,
body[data-theme='light'] .resume-hero-metric-card,
body.light .resume-hero-metric-card,
html[data-theme='light'] .target-coverage-item,
body[data-theme='light'] .target-coverage-item,
body.light .target-coverage-item {
  border-color: rgba(131, 157, 196, 0.58);
  background: rgba(237, 245, 255, 0.94);
}

html[data-theme='light'] .resume-hero-metric-head span,
body[data-theme='light'] .resume-hero-metric-head span,
body.light .resume-hero-metric-head span,
html[data-theme='light'] .target-coverage-head span,
body[data-theme='light'] .target-coverage-head span,
body.light .target-coverage-head span,
html[data-theme='light'] .target-coverage-meta,
body[data-theme='light'] .target-coverage-meta,
body.light .target-coverage-meta {
  color: #4f668c;
}

html[data-theme='light'] .resume-hero-metric-head strong,
body[data-theme='light'] .resume-hero-metric-head strong,
body.light .resume-hero-metric-head strong,
html[data-theme='light'] .target-coverage-head strong,
body[data-theme='light'] .target-coverage-head strong,
body.light .target-coverage-head strong {
  color: #21395d;
}

html[data-theme='light'] .resume-hero-metric-track,
body[data-theme='light'] .resume-hero-metric-track,
body.light .resume-hero-metric-track,
html[data-theme='light'] .target-coverage-track,
body[data-theme='light'] .target-coverage-track,
body.light .target-coverage-track {
  border-color: #b7c9e4;
  background: #e6effd;
}

html[data-theme='light'] .target-match-head h4,
html[data-theme='light'] .target-match-card .sub,
html[data-theme='light'] .target-match-card p,
html[data-theme='light'] .target-source-link,
html[data-theme='light'] .target-source-link a,
body[data-theme='light'] .target-match-head h4,
body[data-theme='light'] .target-match-card .sub,
body[data-theme='light'] .target-match-card p,
body[data-theme='light'] .target-source-link,
body[data-theme='light'] .target-source-link a,
body.light .target-match-head h4,
body.light .target-match-card .sub,
body.light .target-match-card p,
body.light .target-source-link,
body.light .target-source-link a {
  color: #2f4465;
}

html[data-theme='light'] .target-match-card p strong,
body[data-theme='light'] .target-match-card p strong,
body.light .target-match-card p strong {
  color: #21395d;
}

html[data-theme='light'] .target-score-badge,
body[data-theme='light'] .target-score-badge,
body.light .target-score-badge {
  border-color: #b4c7e2;
  background: #edf4ff;
  color: #26466f;
}

html[data-theme='light'] .target-private-badge,
body[data-theme='light'] .target-private-badge,
body.light .target-private-badge {
  border-color: #8facdf;
  background: #e9f1ff;
  color: #274c7f;
}

html[data-theme='light'] .target-applied-badge,
body[data-theme='light'] .target-applied-badge,
body.light .target-applied-badge {
  border-color: #7dbca6;
  background: #e4f7ef;
  color: #1d5a47;
}

html[data-theme='light'] .target-match-card.is-applied,
body[data-theme='light'] .target-match-card.is-applied,
body.light .target-match-card.is-applied {
  border-color: #7dbca6;
}

html[data-theme='light'] .target-skill-pill,
html[data-theme='light'] .target-skill-pill.is-neutral,
body[data-theme='light'] .target-skill-pill,
body[data-theme='light'] .target-skill-pill.is-neutral,
body.light .target-skill-pill,
body.light .target-skill-pill.is-neutral {
  background: #e9f1ff;
  border-color: #8facdf;
  color: #274c7f;
}

html[data-theme='light'] .target-skill-pill.is-matched,
body[data-theme='light'] .target-skill-pill.is-matched,
body.light .target-skill-pill.is-matched {
  background: #e4f7ef;
  border-color: #7dbca6;
  color: #1d5a47;
}

html[data-theme='light'] .target-skill-pill.is-missing,
body[data-theme='light'] .target-skill-pill.is-missing,
body.light .target-skill-pill.is-missing {
  background: #fdeef1;
  border-color: #d9a0ab;
  color: #8a3c4a;
}

html[data-theme='light'] .target-missing-text,
body[data-theme='light'] .target-missing-text,
body.light .target-missing-text {
  color: #365078 !important;
}

html[data-theme='light'] .target-hidden-count,
body[data-theme='light'] .target-hidden-count,
body.light .target-hidden-count {
  color: #365078;
}

body[data-theme='light'] .employer-graph-root {
  border-color: rgba(131, 157, 196, 0.58);
  background: linear-gradient(180deg, rgba(245, 250, 255, 0.98), rgba(234, 243, 255, 0.98));
}

body[data-theme='light'] .employer-graph-svg text {
  fill: #334b72;
}

body[data-theme='light'] .employer-graph-svg .graph-center text {
  fill: #233a5c;
}

body[data-theme='light'] .employer-graph-tooltip {
  border-color: rgba(122, 149, 188, 0.86);
  background: rgba(249, 253, 255, 0.98);
  box-shadow: 0 16px 28px rgba(41, 72, 118, 0.22);
}

body[data-theme='light'] .employer-graph-tooltip-head strong,
body[data-theme='light'] .employer-graph-tooltip-line strong,
body[data-theme='light'] .employer-graph-tooltip-comment p {
  color: #233a5c;
}

body[data-theme='light'] .employer-graph-tooltip-sub,
body[data-theme='light'] .employer-graph-tooltip-line span,
body[data-theme='light'] .employer-graph-tooltip-comment span {
  color: #45648f;
}

body[data-theme='light'] .employer-graph-tooltip-score {
  border-color: #a8c0e0;
  background: #edf4ff;
  color: #2a4a73;
}

body[data-theme='light'] .employer-graph-tooltip-comment {
  border-top-color: rgba(148, 170, 203, 0.68);
}

body[data-theme='light'] .resume-modal-view-switch .btn.is-active {
  border-color: #96b3de;
  background: #eaf2ff;
  color: #27476f;
}

body[data-theme='light'] .resume-modal-json {
  background: #f7fbff;
  color: #2d476e;
}

body[data-theme='light'] .resume-modal-json.is-error {
  color: #a23e4d;
}

body[data-theme='light'] .sa-question-card {
  border-color: rgba(131, 157, 196, 0.58);
  background: linear-gradient(180deg, rgba(246, 251, 255, 0.98), rgba(236, 245, 255, 0.98));
}

body[data-theme='light'] .sa-question-card h3 {
  color: #2f4f80;
}

body[data-theme='light'] .sa-question-card p {
  color: #2d3f5f;
}

body[data-theme='light'] .sa-option-item {
  border-color: rgba(138, 161, 197, 0.68);
  background: rgba(243, 249, 255, 0.96);
}

body[data-theme='light'] .sa-option-item span {
  color: #2a3e5f;
}

body[data-theme='light'] .sa-result-summary {
  border-color: #9ab2d7;
  background: rgba(239, 246, 255, 0.96);
}

body[data-theme='light'] .sa-result-summary.is-good {
  border-color: #73b39b;
  background: rgba(223, 245, 237, 0.9);
}

body[data-theme='light'] .sa-result-summary.is-mid {
  border-color: #9eb6d8;
  background: rgba(229, 239, 252, 0.92);
}

body[data-theme='light'] .sa-result-summary.is-low {
  border-color: #d9a0ab;
  background: rgba(252, 234, 238, 0.92);
}

body[data-theme='light'] .sa-result-main,
body[data-theme='light'] .sa-result-sub {
  color: #2b3f60;
}

body[data-theme='light'] .timeline-bar-chip,
body[data-theme='light'] .timeline-bar-label {
  color: #2f4a73;
}

body[data-theme='light'] .timeline-hover-tooltip {
  background: #ffffff;
  border-color: #a8bfdf;
  box-shadow: 0 12px 24px rgba(25, 60, 115, 0.16);
}

body[data-theme='light'] .timeline-tooltip-title {
  color: #273f63;
}

body[data-theme='light'] .timeline-tooltip-sub {
  color: #5d7397;
}

body[data-theme='light'] .timeline-x-axis {
  background: linear-gradient(90deg, #8ea9d0, #6f8db9);
}

body[data-theme='light'] .timeline-year-tick {
  color: #607ba5;
}

body[data-theme='light'] .resume-item p {
  color: #364d72;
}

@page {
  size: A4;
  margin: 12mm;
}

@media print {
  body {
    background: #fff !important;
    color: #111827 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body::before {
    display: none !important;
  }

  .topbar {
    display: none !important;
  }

  .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #resume-root {
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }

  .resume-top-panel,
  .resume-wide-panel,
  .resume-main,
  .resume-side {
    background: #fff !important;
    border: 1px solid #d7deea !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .resume-page {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 7mm;
  }

  .timeline-scale-scroll {
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .timeline-scale {
    width: 100% !important;
    min-width: 0 !important;
  }

  .timeline-hover-tooltip,
  .btn,
  .skills-clear-btn {
    display: none !important;
  }

  .section-title {
    color: #314a74 !important;
  }

  .timeline-bar-label {
    color: #0f172a !important;
  }

  .timeline-year-tick {
    color: #526381 !important;
  }

  .resume-item .sub {
    color: #4b5563 !important;
  }

  .resume-item p {
    color: #1f2937 !important;
  }

  .pill {
    border-color: #bfd6ff !important;
    background: #edf4ff !important;
    color: #1f3f76 !important;
  }

  .target-match-card {
    background: #fff !important;
    border-color: #d7deea !important;
  }

  .target-score-badge {
    border-color: #bfd0ef !important;
    background: #edf4ff !important;
    color: #1f3f76 !important;
  }

  .target-skill-pill.is-missing {
    border-color: #f0c9cf !important;
    background: #fff1f2 !important;
    color: #8a2e3b !important;
  }

  .target-missing-text {
    color: #6b7280 !important;
  }

  a {
    color: #111827 !important;
    text-decoration: none !important;
  }
}

@media (max-width: 1040px) {
  .resume-page {
    grid-template-columns: 1fr;
  }

  .resume-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.feature-figma-style .feature-resume-layout {
    grid-template-columns: 1fr;
  }

  body.feature-figma-style .feature-exp-item {
    grid-template-columns: 1fr;
    gap: 0.26rem;
  }
}

@media (max-width: 900px) {
  .container {
    width: min(1160px, calc(100% - 1rem));
    padding-top: 1rem;
  }

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

  .topbar-actions {
    width: 100%;
    margin-left: 0;
  }

  .lang-label,
  .theme-label {
    display: none;
  }

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

  .landing-split-grid {
    grid-template-columns: 1fr;
  }

  .landing-radix-root {
    padding-top: 1rem;
  }

  .landing-radix-topbar {
    padding: 0.72rem 0.76rem;
  }

  .landing-radix-container {
    padding-inline: 0.6rem;
  }

  .landing-radix-hero-title {
    max-width: none;
  }

  .candidate-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .candidate-skill-grid {
    grid-template-columns: 1fr;
  }

  .employer-vacancy-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .employer-vacancy-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .employer-head-meta {
    justify-items: start;
  }

  .employer-graph-svg {
    min-width: 680px;
  }

  .employer-graph-tooltip {
    width: min(360px, calc(100% - 14px));
    padding: 0.58rem 0.62rem;
  }

  .resume-modal {
    padding: 0.5rem;
  }

  .resume-modal-dialog {
    max-height: calc(100vh - 1rem);
    padding: 0.72rem;
  }

  .resume-modal-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .resume-modal-preview,
  .resume-modal-json {
    height: 52vh;
  }

  .resume-modal-json {
    font-size: 0.74rem;
  }

  .resume-modal-view-switch {
    width: 100%;
  }

  .builder-consent-panel,
  .resume-modal-consent-head,
  .resume-modal-consent-meta,
  .resume-preview-hero,
  .resume-preview-card-head,
  .resume-preview-contact-item,
  .resume-preview-timeline-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .resume-modal-review-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .sa-result-grid {
    grid-template-columns: 1fr;
  }

  #saResumeSlug,
  #saSkillBlock {
    width: 100%;
    min-width: 0;
  }

  .timeline-scale {
    width: max(100%, 720px);
  }

  body.feature-figma-style .feature-name-block h1 {
    font-size: clamp(1.56rem, 8vw, 2.2rem);
  }
}

@media (max-width: 640px) {
  .resume-hero-metrics,
  .target-coverage-grid {
    grid-template-columns: 1fr;
  }
}

/* Radix-first landing overrides (loaded last on purpose) */
body.landing-radix-page {
  font-family: var(--default-font-family), 'Sora', 'Segoe UI', sans-serif;
  letter-spacing: normal;
}

body.landing-radix-page .landing-radix-root {
  padding: 0.9rem 0 1.6rem;
}

body.landing-radix-page .landing-radix-container {
  gap: 0.9rem;
}

body.landing-radix-page .landing-radix-topbar,
body.landing-radix-page .landing-radix-hero,
body.landing-radix-page .landing-radix-flow-card,
body.landing-radix-page .landing-radix-role-card,
body.landing-radix-page .landing-radix-features-card,
body.landing-radix-page .landing-radix-accordion-item {
  border-color: var(--gray-a6);
  background: var(--color-panel-translucent);
  box-shadow: none;
}

body.landing-radix-page .landing-radix-brand-mark {
  background: linear-gradient(135deg, var(--indigo-9), var(--indigo-8));
  box-shadow: none;
}

body.landing-radix-page .landing-radix-hero::after {
  display: none;
}

body.landing-radix-page .landing-radix-hero-title {
  font-family: var(--heading-font-family), var(--default-font-family), sans-serif;
  font-weight: 600;
  letter-spacing: -0.024em;
}

body.landing-radix-page .landing-radix-card-text,
body.landing-radix-page .landing-radix-muted {
  color: var(--gray-11);
}

body.landing-radix-page .landing-radix-list li {
  color: var(--gray-12);
}

body.landing-radix-page .landing-radix-role-card[data-tone='candidate'],
body.landing-radix-page .landing-radix-role-card[data-tone='employer'] {
  box-shadow: none;
}

body.landing-radix-page .landing-radix-accordion-item[data-state='open'] {
  border-color: var(--indigo-a7);
}
/* Global Radix skin layer for legacy pages */

html.radix-themes,
body.radix-themes {
  font-family: var(--default-font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html.radix-themes.light,
body.radix-themes.light {
  --bg: var(--slate-1);
  --panel: color-mix(in srgb, var(--slate-1) 85%, var(--slate-2) 15%);
  --panel-alt: color-mix(in srgb, var(--slate-2) 84%, white 16%);
  --text: var(--slate-12);
  --muted: var(--slate-11);
  --line: var(--slate-a6);
  --accent: var(--indigo-9);
  --accent-2: var(--cyan-9);
  --accent-warm: var(--amber-9);
  --accent-soft: var(--indigo-a3);
  --success-soft: var(--green-a3);
  --danger: var(--tomato-9);
  --surface-start: color-mix(in srgb, var(--slate-1) 90%, white 10%);
  --surface-end: color-mix(in srgb, var(--slate-2) 85%, white 15%);
  --surface-border: var(--slate-a6);
  --card-start: color-mix(in srgb, var(--slate-1) 86%, white 14%);
  --card-end: color-mix(in srgb, var(--slate-2) 88%, white 12%);
  --builder-row-start: color-mix(in srgb, var(--slate-1) 90%, white 10%);
  --builder-row-end: color-mix(in srgb, var(--slate-2) 90%, white 10%);
  --input-bg: color-mix(in srgb, var(--slate-1) 86%, white 14%);
  --input-border: var(--slate-a6);
  --input-hover-border: var(--slate-a7);
  --input-focus-bg: var(--slate-1);
  --label-color: var(--slate-11);
  --shadow-lg: 0 18px 40px color-mix(in srgb, var(--slate-a8) 24%, transparent);
  --shadow-md: 0 8px 22px color-mix(in srgb, var(--slate-a8) 16%, transparent);
  --shadow-sm: 0 3px 10px color-mix(in srgb, var(--slate-a8) 12%, transparent);
}

html.radix-themes.dark,
body.radix-themes.dark {
  --bg: color-mix(in srgb, var(--slate-1) 86%, black 14%);
  --panel: color-mix(in srgb, var(--slate-2) 82%, black 18%);
  --panel-alt: color-mix(in srgb, var(--slate-3) 80%, black 20%);
  --text: var(--slate-12);
  --muted: var(--slate-11);
  --line: var(--slate-a6);
  --accent: var(--indigo-9);
  --accent-2: var(--cyan-9);
  --accent-warm: var(--amber-9);
  --accent-soft: var(--indigo-a3);
  --success-soft: var(--green-a3);
  --danger: var(--tomato-9);
  --surface-start: color-mix(in srgb, var(--slate-2) 84%, black 16%);
  --surface-end: color-mix(in srgb, var(--slate-3) 88%, black 12%);
  --surface-border: var(--slate-a6);
  --card-start: color-mix(in srgb, var(--slate-2) 88%, black 12%);
  --card-end: color-mix(in srgb, var(--slate-3) 92%, black 8%);
  --builder-row-start: color-mix(in srgb, var(--slate-2) 88%, black 12%);
  --builder-row-end: color-mix(in srgb, var(--slate-3) 92%, black 8%);
  --input-bg: color-mix(in srgb, var(--slate-2) 92%, black 8%);
  --input-border: var(--slate-a6);
  --input-hover-border: var(--slate-a7);
  --input-focus-bg: color-mix(in srgb, var(--slate-2) 96%, black 4%);
  --label-color: var(--slate-11);
  --shadow-lg: 0 22px 54px color-mix(in srgb, black 56%, transparent);
  --shadow-md: 0 10px 26px color-mix(in srgb, black 44%, transparent);
  --shadow-sm: 0 4px 12px color-mix(in srgb, black 34%, transparent);
}

body.radix-shell {
  color: var(--text);
  background:
    radial-gradient(circle at 10% -10%, color-mix(in srgb, var(--indigo-a5) 70%, transparent) 0%, transparent 48%),
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--cyan-a5) 60%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--amber-a5) 54%, transparent) 0%, transparent 42%),
    var(--bg);
}

body.radix-shell::before {
  display: none;
}

body.radix-shell .container {
  width: min(1240px, calc(100% - 2rem));
  padding-top: 1.2rem;
  padding-bottom: 2.2rem;
}

body.radix-shell {
  --dashboard-border: color-mix(in srgb, var(--gray-a8) 74%, transparent);
  --dashboard-border-strong: color-mix(in srgb, var(--accent-a8) 36%, var(--gray-a8) 64%);
  --dashboard-panel-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-a3) 10%, transparent) 0%, transparent 100%),
    var(--color-panel-translucent);
  --dashboard-shadow: 0 14px 36px color-mix(in srgb, var(--slate-a8) 14%, transparent);
}

body[data-theme='dark'].radix-shell {
  --dashboard-border: color-mix(in srgb, var(--gray-a8) 82%, var(--gray-a7) 18%);
  --dashboard-border-strong: color-mix(in srgb, var(--accent-a8) 44%, var(--gray-a8) 56%);
  --dashboard-panel-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-a4) 14%, transparent) 0%, transparent 100%),
    color-mix(in srgb, var(--color-panel-translucent) 90%, var(--panel-alt) 10%);
  --dashboard-shadow: 0 16px 40px color-mix(in srgb, black 34%, transparent);
}

body.radix-shell .dashboard-shell {
  display: grid;
  gap: clamp(16px, 1.8vw, 28px);
  grid-template-columns: clamp(272px, 20vw, 320px) minmax(0, 1fr);
  align-items: start;
  width: 100%;
  min-width: 0;
}

body.radix-shell .dashboard-shell-sidebar {
  align-self: start;
  min-width: 0;
  margin-inline-start: clamp(-12px, -1.5vw, -20px);
  padding-inline-start: clamp(12px, 1.5vw, 20px);
}

body.radix-shell .dashboard-shell-sidebar-inner {
  position: sticky;
  top: 20px;
  width: 100%;
}

body.radix-shell .dashboard-shell-main {
  min-width: 0;
}

body.radix-shell .worker-subpage-header-actions {
  align-items: center;
}

body.radix-shell .worker-mobile-subpage-shell {
  display: none;
}

body.radix-shell .dashboard-mobile-rail,
body.radix-shell .dashboard-mobile-panel-rail,
body.radix-shell .dashboard-mobile-metric-rail,
body.radix-shell .dashboard-mobile-chip-rail {
  min-width: 0;
}

body.radix-shell .admin-new-design-chunk,
body.radix-shell .worker-new-design-chunk,
body.radix-shell .interview-new-design-chunk,
body.radix-shell .skill-badges-new-design-chunk {
  animation: dashboard-chunk-in 220ms ease;
}

body.radix-shell .dashboard-hero-card {
  position: relative;
  overflow: hidden;
  border-color: var(--dashboard-border-strong);
  background: var(--dashboard-panel-bg);
  box-shadow: var(--dashboard-shadow);
}

body.radix-shell .dashboard-hero-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-9) 74%, var(--accent-8) 26%),
    color-mix(in srgb, var(--accent-10) 72%, var(--accent-9) 28%)
  );
  pointer-events: none;
}

body.radix-shell .dashboard-card,
body.radix-shell .dashboard-tabs-card,
body.radix-shell .dashboard-nav-card {
  border-color: var(--dashboard-border);
  background: var(--dashboard-panel-bg);
  box-shadow: var(--dashboard-shadow);
}

body.radix-shell .dashboard-tabs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.radix-shell .dashboard-tabs-list .rt-TabsTrigger {
  min-height: 36px;
  border: 1px solid var(--dashboard-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-alt) 86%, transparent 14%);
  color: var(--gray-11);
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

body.radix-shell .dashboard-tabs-list .rt-TabsTrigger[data-state='active'] {
  border-color: var(--dashboard-border-strong);
  background: color-mix(in srgb, var(--accent-a4) 68%, var(--panel-alt) 32%);
  color: var(--gray-12);
}

body.radix-shell .dashboard-nav-button {
  min-height: 42px;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}

body.radix-shell .dashboard-nav-button.is-chunk {
  min-height: 64px;
  height: auto;
  padding-block: 10px;
  white-space: normal;
  align-items: flex-start;
}

body.radix-shell .dashboard-nav-button .rt-Text {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

body.radix-shell .dashboard-detail-button {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--gray-a8) 72%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-a4) 22%, transparent) 0%, transparent 100%),
    color-mix(in srgb, var(--panel-alt) 90%, transparent 10%);
  color: var(--gray-12);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

body.radix-shell .dashboard-detail-button svg {
  width: 14px;
  height: 14px;
  opacity: 0.86;
}

body.radix-shell .dashboard-detail-button:hover:not([disabled]):not([data-disabled]) {
  border-color: color-mix(in srgb, var(--accent-a8) 60%, var(--gray-a8) 40%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-a4) 28%, transparent) 0%, transparent 100%),
    color-mix(in srgb, var(--panel-alt) 94%, transparent 6%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--slate-a8) 22%, transparent);
}

body.radix-shell .dashboard-detail-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-a8) 46%, transparent),
    0 8px 18px color-mix(in srgb, var(--slate-a8) 22%, transparent);
}

body[data-theme='dark'].radix-shell .dashboard-detail-button {
  border-color: color-mix(in srgb, var(--gray-a8) 82%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-a5) 30%, transparent) 0%, transparent 100%),
    color-mix(in srgb, rgba(9, 17, 34, 0.92) 94%, transparent);
  color: color-mix(in srgb, white 92%, var(--gray-1) 8%);
}

body[data-theme='dark'].radix-shell .dashboard-detail-button:hover:not([disabled]):not([data-disabled]) {
  border-color: color-mix(in srgb, var(--accent-a8) 72%, var(--gray-a8) 28%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-a6) 38%, transparent) 0%, transparent 100%),
    color-mix(in srgb, rgba(9, 17, 34, 0.97) 97%, transparent);
}

body.radix-shell .dashboard-shell-sidebar .dashboard-nav-card:first-child {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-9) 14%, transparent) 0%, transparent 100%),
    var(--color-panel);
}

body.radix-shell .dashboard-shell-sidebar .rt-BaseButton {
  min-height: 42px;
}

body.radix-shell .interview-new-design .dashboard-shell-sidebar .dashboard-nav-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--indigo-a4) 16%, transparent) 0%, transparent 100%),
    var(--dashboard-panel-bg);
}

body.radix-shell .skills-dashboard .dashboard-shell-sidebar .dashboard-nav-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cyan-a4) 18%, transparent) 0%, transparent 100%),
    var(--dashboard-panel-bg);
}

body.radix-shell .interview-chunk-nav-button {
  min-height: 72px;
}

body.radix-shell .skills-chunk-nav-button {
  min-height: 72px;
}

body.radix-shell .interview-segmented-card {
  display: none;
}

body.radix-shell .skills-segmented-card {
  display: none;
}

body.radix-shell .builder-segmented-card,
body.radix-shell .assessment-segmented-card {
  display: none;
}

body.radix-shell .interview-segmented {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}

body.radix-shell .skills-segmented {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}

body.radix-shell .builder-segmented,
body.radix-shell .assessment-segmented {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}

body.radix-shell .interview-segmented-button {
  min-height: 32px;
}

body.radix-shell .interview-history-kpi-grid {
  align-items: stretch;
}

body.radix-shell .interview-history-kpi-pill {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dashboard-border-strong) 52%, var(--dashboard-border) 48%);
  border-radius: 14px;
  padding: 8px 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--indigo-a4) 16%, transparent) 0%, transparent 100%),
    var(--dashboard-panel-bg);
}

body.radix-shell .interview-history-kpi-pill::after {
  content: '';
  position: absolute;
  width: 52px;
  height: 52px;
  right: -20px;
  top: -22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--indigo-a7) 34%, transparent);
  pointer-events: none;
}

body.radix-shell .interview-history-cards {
  align-items: stretch;
}

body.radix-shell .interview-history-card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--dashboard-border-strong) 52%, var(--dashboard-border) 48%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--indigo-a4) 16%, transparent) 0%, transparent 100%),
    var(--dashboard-panel-bg);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--slate-a8) 16%, transparent);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

body.radix-shell .interview-history-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: color-mix(in srgb, var(--gray-a8) 72%, transparent);
}

body.radix-shell .interview-history-card.is-passed::before {
  background: color-mix(in srgb, var(--green-a8) 74%, var(--green-9) 26%);
}

body.radix-shell .interview-history-card.is-retry::before {
  background: color-mix(in srgb, var(--amber-a8) 72%, var(--amber-9) 28%);
}

body.radix-shell .interview-history-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--dashboard-border-strong) 66%, var(--dashboard-border) 34%);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--slate-a8) 22%, transparent);
}

body.radix-shell .interview-history-card-content {
  min-height: 0;
}

body.radix-shell .interview-history-date {
  white-space: nowrap;
}

body.radix-shell .interview-history-title {
  line-height: 1.28;
}

body.radix-shell .interview-history-metrics {
  align-items: stretch;
}

body.radix-shell .interview-history-metric {
  border: 1px solid color-mix(in srgb, var(--dashboard-border) 80%, transparent);
  border-radius: 10px;
  padding: 5px 7px;
  background: color-mix(in srgb, var(--panel-alt) 90%, transparent 10%);
}

body.radix-shell .interview-history-gaps {
  min-height: 0;
}

body.radix-shell .interview-history-actions {
  margin-top: 0;
}

body.radix-shell .dashboard-detail-button.interview-detail-button-compact {
  min-height: 24px;
  padding: 0.16rem 0.46rem;
  font-size: 0.72rem;
  gap: 0.24rem;
}

body.radix-shell .dashboard-detail-button.interview-detail-button-compact svg {
  width: 12px;
  height: 12px;
}

body.radix-shell .skills-segmented-button {
  min-height: 32px;
}

body.radix-shell .skills-overview-priority-grid {
  align-items: stretch;
}

body.radix-shell .skills-overview-priority-tile {
  height: 100%;
}

body.radix-shell .skills-overview-priority-content {
  height: 100%;
}

body.radix-shell .skills-overview-priority-metrics {
  min-height: 24px;
}

body.radix-shell .skills-overview-priority-actions {
  margin-top: auto;
}

body.radix-shell .skills-overview-verified-grid,
body.radix-shell .skills-overview-gaps-grid {
  align-items: stretch;
}

body.radix-shell .skills-overview-verified-tile,
body.radix-shell .skills-overview-gap-tile {
  height: 100%;
}

body.radix-shell .skills-overview-verified-content,
body.radix-shell .skills-overview-gap-content {
  height: 100%;
}

body.radix-shell .skills-overview-verified-actions,
body.radix-shell .skills-overview-gap-actions {
  margin-top: auto;
}

body.radix-shell .skills-overview-gap-chips {
  min-height: 38px;
}

body.radix-shell .skills-modules-grid {
  align-items: stretch;
}

body.radix-shell .skills-modules-carousel {
  display: grid;
  grid-template-columns: none !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 360px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 8px 2px 0;
  scroll-snap-type: x mandatory;
  align-items: stretch;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body.radix-shell .skills-modules-carousel::-webkit-scrollbar {
  display: none;
}

body.radix-shell .skills-modules-carousel > * {
  min-width: 0;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

body.radix-shell .skills-modules-kpi-grid {
  align-items: stretch;
}

body.radix-shell .skills-modules-kpi-pill {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dashboard-border-strong) 52%, var(--dashboard-border) 48%);
  border-radius: 14px;
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--dashboard-border-strong) 52%, var(--dashboard-border) 48%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-a4) 14%, transparent) 0%, transparent 100%),
    var(--dashboard-panel-bg);
}

body.radix-shell .skills-modules-kpi-pill::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  right: -20px;
  top: -20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-a6) 40%, transparent);
  pointer-events: none;
}

body.radix-shell .skills-modules-footnote {
  opacity: 0.92;
}

body.radix-shell .skills-module-tile {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-color: color-mix(in srgb, var(--dashboard-border-strong) 50%, var(--dashboard-border) 50%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-a4) 18%, transparent) 0%, transparent 100%),
    var(--dashboard-panel-bg);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--slate-a8) 16%, transparent);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

body.radix-shell .skills-module-tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: color-mix(in srgb, var(--gray-a8) 72%, transparent);
}

body.radix-shell .skills-module-tile.is-verified::before {
  background: color-mix(in srgb, var(--green-a8) 72%, var(--green-9) 28%);
}

body.radix-shell .skills-module-tile.is-ready::before {
  background: color-mix(in srgb, var(--amber-a8) 72%, var(--amber-9) 28%);
}

body.radix-shell .skills-module-tile.is-progress::before {
  background: color-mix(in srgb, var(--indigo-a8) 72%, var(--indigo-9) 28%);
}

body.radix-shell .skills-module-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--dashboard-border-strong) 68%, var(--dashboard-border) 32%);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--slate-a8) 24%, transparent);
}

body.radix-shell .skills-module-content {
  height: 100%;
}

body.radix-shell .skills-module-head {
  min-height: 90px;
}

body.radix-shell .skills-module-track {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--accent-11) 76%, var(--gray-11) 24%);
}

body.radix-shell .skills-module-status {
  min-width: 86px;
}

body.radix-shell .skills-module-title {
  line-height: 1.24;
}

body.radix-shell .skills-module-description {
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.radix-shell .skills-module-donut .dashboard-donut-label-value {
  font-size: 0.72rem;
}

body.radix-shell .skills-module-donut .dashboard-donut-label-sub {
  display: none;
}

body.radix-shell .skills-module-progress {
  min-height: 34px;
}

body.radix-shell .skills-module-kpi-grid {
  align-items: stretch;
}

body.radix-shell .skills-module-kpi {
  border: 1px solid color-mix(in srgb, var(--dashboard-border) 78%, transparent);
  border-radius: 10px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--panel-alt) 90%, transparent 10%);
}

body.radix-shell .skills-module-kpi-value {
  line-height: 1.15;
}

body.radix-shell .skills-module-missing {
  min-height: 62px;
}

body.radix-shell .skills-module-missing-list {
  min-height: 42px;
}

body.radix-shell .skills-module-missing-item {
  line-height: 1.28;
  color: var(--gray-11);
}

body.radix-shell .skills-module-missing-empty {
  opacity: 0.9;
}

body.radix-shell .skills-module-actions {
  margin-top: auto;
}

body.radix-shell .dashboard-detail-button.skills-detail-button-compact {
  min-height: 26px;
  padding: 0.2rem 0.52rem;
  font-size: 0.74rem;
  gap: 0.3rem;
}

body.radix-shell .dashboard-detail-button.skills-detail-button-compact svg {
  width: 12px;
  height: 12px;
}

body.radix-shell .dashboard-segmented {
  border: 1px solid var(--dashboard-border);
  background: color-mix(in srgb, var(--panel-alt) 82%, transparent 18%);
  border-radius: 999px;
  padding: 2px;
}

body.radix-shell {
  --component-bank-card-bg: color-mix(in srgb, var(--panel) 82%, transparent 18%);
  --component-bank-line: color-mix(in srgb, var(--gray-a8) 74%, transparent);
  --component-bank-shadow: 0 16px 34px color-mix(in srgb, var(--slate-a8) 20%, transparent);
}

body[data-theme='dark'].radix-shell {
  --component-bank-card-bg: color-mix(in srgb, var(--panel-alt) 86%, black 14%);
  --component-bank-line: color-mix(in srgb, var(--gray-a8) 84%, var(--gray-a7) 16%);
  --component-bank-shadow: 0 18px 42px color-mix(in srgb, black 44%, transparent);
}

body.radix-shell .component-bank-grid {
  align-items: stretch;
}

body.radix-shell .component-bank-header .rt-BaseCard {
  border-color: var(--component-bank-line);
}

body.radix-shell .component-bank-card {
  border-color: var(--component-bank-line);
  background: var(--component-bank-card-bg);
  box-shadow: var(--component-bank-shadow);
}

body.radix-shell .component-bank-preview {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  border-radius: 16px;
  border: 1px solid var(--component-bank-line);
  background:
    radial-gradient(circle at 14% 16%, var(--component-glass-a, rgba(80, 136, 255, 0.34)), transparent 52%),
    radial-gradient(circle at 84% 20%, var(--component-glass-b, rgba(48, 188, 242, 0.3)), transparent 50%),
    radial-gradient(circle at 52% 90%, var(--component-glass-c, rgba(255, 186, 94, 0.24)), transparent 52%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 84%, transparent 16%), color-mix(in srgb, var(--panel-alt) 90%, transparent 10%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 14px 34px color-mix(in srgb, var(--slate-a8) 22%, transparent);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body[data-theme='dark'].radix-shell .component-bank-preview {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 38px color-mix(in srgb, black 52%, transparent);
}

body.radix-shell .component-bank-preview.variant-soft_glass {
  border-color: color-mix(in srgb, var(--component-glass-a, rgba(80, 136, 255, 0.34)) 52%, var(--component-bank-line) 48%);
}

body.radix-shell .component-bank-preview.variant-contrast_edge {
  border-color: color-mix(in srgb, var(--component-glass-a, rgba(80, 136, 255, 0.34)) 68%, var(--gray-a8) 32%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 0 0 1px color-mix(in srgb, var(--component-glass-b, rgba(48, 188, 242, 0.3)) 42%, transparent),
    0 16px 30px color-mix(in srgb, var(--slate-a8) 24%, transparent);
}

body.radix-shell .component-bank-preview.variant-outline_focus {
  border-color: color-mix(in srgb, var(--component-glass-b, rgba(48, 188, 242, 0.3)) 58%, var(--component-bank-line) 42%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--component-glass-a, rgba(80, 136, 255, 0.34)) 16%, transparent) 0%, transparent 100%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 88%, transparent 12%), color-mix(in srgb, var(--panel-alt) 90%, transparent 10%));
}

body.radix-shell .component-bank-preview.variant-minimal_surface {
  border-color: color-mix(in srgb, var(--gray-a8) 86%, transparent);
  background:
    linear-gradient(170deg, color-mix(in srgb, var(--panel) 94%, transparent 6%), color-mix(in srgb, var(--panel-alt) 96%, transparent 4%)),
    radial-gradient(circle at 12% 16%, var(--component-glass-a, rgba(80, 136, 255, 0.34)), transparent 64%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px color-mix(in srgb, var(--slate-a8) 16%, transparent);
}

body.radix-shell .component-bank-preview::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.56) 0%,
      rgba(255, 255, 255, 0.18) 24%,
      rgba(255, 255, 255, 0) 48%,
      rgba(255, 255, 255, 0.12) 100%
    );
  mix-blend-mode: screen;
}

body.radix-shell .component-bank-preview-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(6px);
}

body.radix-shell .component-bank-preview-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(0.4px);
  opacity: 0.72;
}

body.radix-shell .component-bank-preview-orb.orb-a {
  width: 74px;
  height: 74px;
  top: -14px;
  right: -8px;
  background: color-mix(in srgb, var(--component-glass-a, rgba(80, 136, 255, 0.34)) 90%, white 10%);
}

body.radix-shell .component-bank-preview-orb.orb-b {
  width: 62px;
  height: 62px;
  bottom: 18px;
  right: 20px;
  background: color-mix(in srgb, var(--component-glass-b, rgba(48, 188, 242, 0.3)) 86%, white 14%);
}

body.radix-shell .component-bank-preview-orb.orb-c {
  width: 52px;
  height: 52px;
  bottom: -10px;
  left: -6px;
  background: color-mix(in srgb, var(--component-glass-c, rgba(255, 186, 94, 0.24)) 88%, white 12%);
}

body.radix-shell .component-bank-style-picker .rt-BaseButton {
  min-height: 30px;
}

body.radix-shell .dashboard-table-wrap {
  border: 1px solid var(--dashboard-border);
  border-radius: 12px;
  overflow: auto;
  background: color-mix(in srgb, var(--panel-alt) 88%, transparent 12%);
}

body.radix-shell .dashboard-table {
  min-width: 720px;
}

body.radix-shell .dashboard-compact .panel-pad-lg {
  padding: 0.9rem;
}

body.radix-shell .dashboard-compact .panel-pad-md {
  padding: 0.8rem;
}

body.radix-shell .dashboard-compact .panel-head {
  margin-bottom: 0.6rem;
}

body.radix-shell .dashboard-compact .rt-BaseButton {
  min-height: 32px;
}

body.radix-shell .dashboard-compact .resume-list,
body.radix-shell .dashboard-compact .worker-assessment-list {
  gap: 0.65rem;
}

body.radix-shell .dashboard-compact .worker-module-chunk-button,
body.radix-shell .dashboard-compact .dashboard-nav-button.is-chunk {
  min-height: 52px;
  padding-block: 8px;
}

@keyframes dashboard-chunk-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@media (max-width: 1024px) {
  body.radix-shell .dashboard-shell {
    grid-template-columns: 1fr;
  }

  body.radix-shell .dashboard-shell-sidebar {
    margin-inline-start: 0;
    padding-inline-start: 0;
  }

  body.radix-shell .dashboard-shell-sidebar-inner {
    position: static;
    width: 100%;
  }

  body.radix-shell .interview-new-design .dashboard-shell-sidebar {
    display: none;
  }

  body.radix-shell .skills-dashboard .dashboard-shell-sidebar {
    display: none;
  }

  body.radix-shell .interview-segmented-card {
    display: block;
  }

  body.radix-shell .skills-segmented-card {
    display: block;
  }

  body.radix-shell .builder-segmented-card,
  body.radix-shell .assessment-segmented-card {
    display: block;
  }
}

@media (max-width: 960px) {
  body.radix-shell {
    --app-mobile-content-bottom-offset: calc(max(var(--app-mobile-bottom-shell-offset, 0px), 232px) + 56px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px));
  }

  body.radix-shell .worker-page-layout .rt-BaseCard.panel-pad-lg,
  body.radix-shell .worker-subpage-layout .rt-BaseCard.panel-pad-lg {
    min-width: 0;
    max-width: 100%;
  }

  body.radix-shell .worker-page-layout .rt-Grid > .rt-BaseCard.panel-pad-lg[style*='grid-column'],
  body.radix-shell .worker-subpage-layout .rt-Grid > .rt-BaseCard.panel-pad-lg[style*='grid-column'] {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: 100%;
  }

  body.radix-shell .page-shell-root {
    padding-inline: 14px !important;
    padding-block: 14px !important;
  }

  body.radix-shell .page-shell-stack {
    gap: 12px;
  }

  body.radix-shell .page-shell-header-card {
    padding: 0.72rem 0.8rem;
  }

  body.radix-shell .page-shell-header-stack {
    gap: 10px;
  }

  body.radix-shell .page-shell-actions {
    gap: 8px;
  }

  body.radix-shell .worker-subpage-layout {
    padding-bottom: var(--app-mobile-content-bottom-offset);
    scroll-padding-bottom: var(--app-mobile-content-bottom-offset);
  }

  body.radix-shell .worker-subpage-layout .dashboard-shell-main > .rt-Flex {
    padding-bottom: var(--app-mobile-content-bottom-offset);
    scroll-padding-bottom: var(--app-mobile-content-bottom-offset);
  }

  body.radix-shell .worker-subpage-header-actions,
  body.radix-shell .dashboard-mobile-chip-rail,
  body.radix-shell .builder-segmented,
  body.radix-shell .assessment-segmented,
  body.radix-shell .skills-segmented,
  body.radix-shell .interview-segmented {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.radix-shell .worker-subpage-header-actions::-webkit-scrollbar,
  body.radix-shell .dashboard-mobile-chip-rail::-webkit-scrollbar,
  body.radix-shell .builder-segmented::-webkit-scrollbar,
  body.radix-shell .assessment-segmented::-webkit-scrollbar,
  body.radix-shell .skills-segmented::-webkit-scrollbar,
  body.radix-shell .interview-segmented::-webkit-scrollbar {
    display: none;
  }

  body.radix-shell .worker-subpage-header-actions > *,
  body.radix-shell .dashboard-mobile-chip-rail > *,
  body.radix-shell .builder-segmented > *,
  body.radix-shell .assessment-segmented > *,
  body.radix-shell .skills-segmented > *,
  body.radix-shell .interview-segmented > * {
    flex: 0 0 auto;
  }

  body.radix-shell .app-mobile-section-rail {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: calc(100vw - 72px);
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 2px 8px 2px 0;
    align-items: start;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.radix-shell .app-mobile-section-rail::-webkit-scrollbar {
    display: none;
  }

  body.radix-shell .app-mobile-section-slide {
    min-width: 0;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.radix-shell .sa-dashboard-sections .sa-section-profile {
    position: static;
  }

  body.radix-shell .builder-form-stack {
    gap: 0;
  }

  body.radix-shell .sa-skill-cards-grid {
    display: grid;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: calc(100vw - 104px);
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 2px 8px 2px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.radix-shell .sa-skill-cards-grid::-webkit-scrollbar {
    display: none;
  }

  body.radix-shell .sa-skill-cards-grid > * {
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.radix-shell .dashboard-mobile-rail,
  body.radix-shell .dashboard-mobile-panel-rail,
  body.radix-shell .dashboard-mobile-metric-rail {
    display: grid;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 2px 8px 2px 0;
    scroll-snap-type: x mandatory;
    align-items: stretch;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.radix-shell .dashboard-mobile-rail,
  body.radix-shell .dashboard-mobile-panel-rail {
    grid-auto-columns: calc(100vw - 72px);
  }

  body.radix-shell .dashboard-mobile-metric-rail {
    grid-auto-columns: minmax(220px, calc(100vw - 120px));
  }

  body.radix-shell .dashboard-mobile-rail::-webkit-scrollbar,
  body.radix-shell .dashboard-mobile-panel-rail::-webkit-scrollbar,
  body.radix-shell .dashboard-mobile-metric-rail::-webkit-scrollbar {
    display: none;
  }

  body.radix-shell .dashboard-mobile-rail > *,
  body.radix-shell .dashboard-mobile-panel-rail > *,
  body.radix-shell .dashboard-mobile-metric-rail > * {
    min-width: 0;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.radix-shell .worker-mobile-subpage-shell {
    position: fixed;
    left: max(12px, calc(var(--safe-area-left, 12px) + 12px));
    right: max(12px, calc(var(--safe-area-right, 12px) + 12px));
    bottom: max(12px, calc(var(--safe-area-bottom, 12px) + 12px));
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  body.radix-shell .worker-mobile-subpage-cta-wrap,
  body.radix-shell .worker-mobile-subpage-nav {
    border: 1px solid color-mix(in srgb, var(--gray-a8) 58%, transparent);
    background:
      radial-gradient(circle at top left, color-mix(in srgb, var(--indigo-a4) 20%, transparent) 0%, transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--color-panel-translucent) 98%, transparent) 0%, var(--color-panel) 100%);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--slate-a9) 18%, transparent);
    backdrop-filter: blur(16px);
  }

  body.radix-shell .worker-mobile-subpage-cta-wrap {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
  }

  body.radix-shell .worker-mobile-subpage-cta-wrap.is-dismissible .worker-mobile-subpage-cta {
    padding-inline-end: 52px;
  }

  body.radix-shell .worker-mobile-subpage-cta-dismiss {
    appearance: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-panel) 82%, transparent);
    color: var(--gray-11);
    cursor: pointer;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--slate-a8) 14%, transparent);
  }

  body.radix-shell .worker-mobile-subpage-cta-dismiss:hover {
    color: var(--gray-12);
    background: color-mix(in srgb, var(--color-panel) 94%, transparent);
  }

  body.radix-shell .worker-mobile-subpage-cta-dismiss:focus-visible {
    outline: 2px solid var(--accent-8);
    outline-offset: 2px;
  }

  body.radix-shell .worker-mobile-subpage-cta {
    appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
  }

  body.radix-shell .worker-mobile-subpage-cta-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  body.radix-shell .worker-mobile-subpage-cta-kicker {
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-11);
  }

  body.radix-shell .worker-mobile-subpage-cta-title {
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--gray-12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.radix-shell .worker-mobile-subpage-cta-meta {
    min-width: 0;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--gray-11);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.radix-shell .worker-mobile-subpage-cta-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #7da6ff 0%, #4965e5 100%);
    color: white;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 10px 18px color-mix(in srgb, var(--indigo-a9) 24%, transparent);
  }

  body.radix-shell .worker-mobile-subpage-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 24px;
  }

  body.radix-shell .worker-mobile-subpage-nav-button {
    appearance: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 62px;
    padding: 8px 6px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--gray-11);
    font: inherit;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  }

  body.radix-shell .worker-mobile-subpage-nav-button.is-active {
    background:
      radial-gradient(circle at top, color-mix(in srgb, var(--indigo-a4) 22%, transparent) 0%, transparent 42%),
      color-mix(in srgb, var(--color-panel-translucent) 98%, transparent);
    color: var(--gray-12);
    transform: translateY(-1px);
  }

  body.radix-shell .worker-mobile-subpage-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--gray-a4) 92%, transparent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  body.radix-shell .worker-mobile-subpage-nav-button.is-active .worker-mobile-subpage-nav-icon {
    background: linear-gradient(180deg, #7da6ff 0%, #4965e5 100%);
    color: white;
    box-shadow: 0 10px 18px color-mix(in srgb, var(--indigo-a9) 22%, transparent);
  }

  body.radix-shell .worker-mobile-subpage-nav-label {
    min-width: 0;
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 640px) {
  body.radix-shell {
    --app-mobile-content-bottom-offset: calc(max(var(--app-mobile-bottom-shell-offset, 0px), 232px) + 56px + env(safe-area-inset-bottom, 0px));
  }

  body.radix-shell .page-shell-root {
    padding-inline: 12px !important;
    padding-block: 12px !important;
  }

  body.radix-shell .page-shell-stack {
    gap: 10px;
  }

  body.radix-shell .page-shell-header-card {
    padding: 0.66rem 0.72rem;
  }

  body.radix-shell .page-shell-header-stack {
    gap: 8px;
  }

  body.radix-shell .page-shell-header-main {
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
  }

  body.radix-shell .page-shell-brand-kicker {
    display: none;
  }

  body.radix-shell .page-shell-brand-title {
    font-size: 1rem;
  }

  body.radix-shell .page-shell-inline-controls {
    margin-inline-start: auto;
  }

  body.radix-shell .page-shell-theme-toggle {
    gap: 6px;
  }

  body.radix-shell .worker-subpage-layout {
    padding-bottom: var(--app-mobile-content-bottom-offset);
    scroll-padding-bottom: var(--app-mobile-content-bottom-offset);
  }

  body.radix-shell .worker-subpage-layout .dashboard-shell-main > .rt-Flex {
    padding-bottom: var(--app-mobile-content-bottom-offset);
    scroll-padding-bottom: var(--app-mobile-content-bottom-offset);
  }

  body.radix-shell .dashboard-mobile-rail,
  body.radix-shell .dashboard-mobile-panel-rail {
    grid-auto-columns: calc(100vw - 52px);
    gap: 10px;
  }

  body.radix-shell .dashboard-mobile-metric-rail {
    grid-auto-columns: minmax(208px, calc(100vw - 104px));
    gap: 10px;
  }

  body.radix-shell .app-mobile-section-rail {
    grid-auto-columns: calc(100vw - 52px);
    gap: 10px;
  }

  body.radix-shell .sa-skill-cards-grid {
    grid-auto-columns: calc(100vw - 84px);
  }

  body.radix-shell .worker-mobile-subpage-shell {
    position: fixed;
    left: max(10px, calc(var(--safe-area-left, 10px) + 10px));
    right: max(10px, calc(var(--safe-area-right, 10px) + 10px));
    bottom: max(10px, calc(var(--safe-area-bottom, 10px) + 10px));
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  body.radix-shell .worker-mobile-subpage-cta,
  body.radix-shell .worker-mobile-subpage-nav {
    border-radius: 20px;
  }

  body.radix-shell .worker-mobile-subpage-cta {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 13px 14px;
  }

  body.radix-shell .worker-mobile-subpage-cta-action {
    width: 100%;
  }

  body.radix-shell .worker-mobile-subpage-nav {
    gap: 4px;
    padding: 6px;
  }

  body.radix-shell .worker-mobile-subpage-nav-button {
    min-height: 56px;
    padding: 8px 4px;
  }

  body.radix-shell .worker-mobile-subpage-nav-label {
    font-size: 0.64rem;
  }
}

body.radix-shell .topbar,
body.radix-shell .hero,
body.radix-shell .panel,
body.radix-shell .resume-main,
body.radix-shell .resume-side,
body.radix-shell .resume-top-panel,
body.radix-shell .resume-wide-panel,
body.radix-shell .card,
body.radix-shell .builder-row,
body.radix-shell .sa-question-card,
body.radix-shell .sa-result-card,
body.radix-shell .resume-modal-dialog,
body.radix-shell .employer-graph-root {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-start), var(--surface-end));
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
}

body.radix-shell .topbar {
  margin-bottom: 1rem;
  padding: 0.72rem 0.84rem;
  box-shadow: var(--shadow-sm);
}

body.radix-shell .brand {
  color: var(--text);
  font-weight: 600;
}

body.radix-shell .page-shell-stack,
body.radix-shell .page-shell-header-main,
body.radix-shell .page-shell-actions {
  min-width: 0;
}

body.radix-shell .page-shell-header-card {
  padding: 0.78rem 0.88rem;
}

body.radix-shell .page-shell-brand-link {
  min-width: 0;
  flex: 1 1 auto;
}

body.radix-shell .page-shell-brand-copy {
  min-width: 0;
}

body.radix-shell .page-shell-brand-title {
  line-height: 1.05;
}

body.radix-shell .page-shell-inline-controls {
  flex: 0 0 auto;
}

body.radix-shell .page-shell-theme-toggle {
  color: var(--muted);
}

body.radix-shell .page-shell-actions {
  width: 100%;
}

body.radix-shell .brand-mark {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 8px;
  box-shadow: none;
  background: linear-gradient(145deg, var(--indigo-9), var(--cyan-9));
}

body.radix-shell .hero {
  margin-bottom: 0.88rem;
}

body.radix-shell .hero::after {
  opacity: 0.55;
}

body.radix-shell .hero h1,
body.radix-shell .section-title,
body.radix-shell .panel-title {
  letter-spacing: -0.01em;
  color: var(--text);
}

body.radix-shell .hero h1 {
  font-family: var(--heading-font-family), var(--default-font-family), sans-serif;
  font-size: clamp(1.58rem, 2.5vw, 2.32rem);
  font-weight: 600;
}

body.radix-shell .hero p,
body.radix-shell .meta,
body.radix-shell .helper,
body.radix-shell .status {
  color: var(--muted);
}

body.radix-shell .btn,
body.radix-shell .lang-switcher,
body.radix-shell input,
body.radix-shell select,
body.radix-shell textarea {
  border-radius: 10px;
  font-family: inherit;
}

body.radix-shell .btn {
  padding: 0.58rem 0.98rem;
  font-weight: 500;
  border: 1px solid transparent;
  box-shadow: none;
}

body.radix-shell .btn-small {
  padding: 0.38rem 0.72rem;
  font-size: 0.84rem;
}

body.radix-shell .btn-outline {
  color: var(--text);
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel-alt) 82%, transparent 18%);
}

body.radix-shell .btn-outline:hover {
  background: color-mix(in srgb, var(--panel-alt) 68%, transparent 32%);
}

body.radix-shell .btn-primary {
  border-color: color-mix(in srgb, var(--indigo-9) 66%, var(--indigo-8) 34%);
  color: white;
  background: linear-gradient(135deg, var(--indigo-9), var(--indigo-8));
}

body.radix-shell .btn-primary:hover {
  filter: brightness(1.04);
}

/* Dark theme button harmonization across legacy .btn and Radix buttons */
body[data-theme='dark'].radix-shell .btn {
  color: var(--gray-12);
}

body[data-theme='dark'].radix-shell .btn-outline {
  border-color: color-mix(in srgb, var(--indigo-a7) 38%, var(--gray-a7) 62%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--indigo-a4) 34%, var(--panel-alt) 66%),
    color-mix(in srgb, var(--panel-alt) 82%, var(--slate-3) 18%)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--indigo-a6) 24%, transparent);
}

body[data-theme='dark'].radix-shell .btn-outline:hover {
  border-color: color-mix(in srgb, var(--indigo-a8) 42%, var(--gray-a7) 58%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--indigo-a5) 42%, var(--panel-alt) 58%),
    color-mix(in srgb, var(--panel-alt) 78%, var(--slate-3) 22%)
  );
}

body[data-theme='dark'].radix-shell .btn-outline:active {
  background: color-mix(in srgb, var(--indigo-a5) 46%, var(--panel-alt) 54%);
}

body[data-theme='dark'].radix-shell .btn-primary {
  border-color: color-mix(in srgb, var(--indigo-a8) 74%, var(--cyan-a7) 26%);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--indigo-9) 86%, white 14%),
    color-mix(in srgb, var(--indigo-8) 82%, var(--cyan-8) 18%)
  );
  box-shadow: 0 8px 18px color-mix(in srgb, var(--indigo-a8) 36%, transparent);
}

body[data-theme='dark'].radix-shell .btn-primary:hover {
  filter: brightness(1.08);
}

body.radix-shell .resume-modal-view-switch .btn.is-active {
  border-color: var(--indigo-a7);
  background: color-mix(in srgb, var(--indigo-a4) 62%, var(--panel-alt) 38%);
  color: var(--gray-12);
  box-shadow: none;
}

body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-soft) {
  background-color: color-mix(in srgb, var(--accent-a4) 68%, var(--panel-alt) 32%);
  color: var(--accent-a11);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a7) 64%, var(--gray-a6) 36%);
}

@media (hover: hover) {
  body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-soft):where(:hover) {
    background-color: color-mix(in srgb, var(--accent-a5) 74%, var(--panel-alt) 26%);
  }
}

body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-soft):where([data-state='open']) {
  background-color: color-mix(in srgb, var(--accent-a5) 74%, var(--panel-alt) 26%);
}

body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-soft):where(:active:not([data-state='open'])) {
  background-color: color-mix(in srgb, var(--accent-a6) 76%, var(--panel-alt) 24%);
}

body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-outline) {
  color: var(--accent-a11);
  background-color: color-mix(in srgb, var(--accent-a2) 42%, var(--panel-alt) 58%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a8) 82%, var(--gray-a7) 18%);
}

@media (hover: hover) {
  body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-outline):where(:hover) {
    background-color: color-mix(in srgb, var(--accent-a3) 54%, var(--panel-alt) 46%);
  }
}

body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-outline):where([data-state='open']) {
  background-color: color-mix(in srgb, var(--accent-a3) 54%, var(--panel-alt) 46%);
}

body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-surface) {
  color: var(--accent-a11);
  background-color: color-mix(in srgb, var(--accent-surface) 68%, var(--panel-alt) 32%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a7) 82%, var(--gray-a6) 18%);
}

@media (hover: hover) {
  body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-surface):where(:hover) {
    background-color: color-mix(in srgb, var(--accent-surface) 78%, var(--panel-alt) 22%);
  }
}

body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-surface):where([data-state='open']) {
  background-color: color-mix(in srgb, var(--accent-surface) 78%, var(--panel-alt) 22%);
}

@media (hover: hover) {
  body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-ghost):where(:hover) {
    background-color: color-mix(in srgb, var(--accent-a3) 72%, var(--panel-alt) 28%);
  }
}

body[data-theme='dark'].radix-shell .rt-BaseButton:where(.rt-variant-ghost):where([data-state='open']) {
  background-color: color-mix(in srgb, var(--accent-a3) 72%, var(--panel-alt) 28%);
}

body[data-theme='dark'].radix-shell .rt-BaseButton[data-accent-color='gray']:where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface) {
  color: var(--gray-12);
}

body.radix-shell .lang-switcher,
body.radix-shell input,
body.radix-shell select,
body.radix-shell textarea {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
}

body.radix-shell .lang-switcher:hover,
body.radix-shell input:hover,
body.radix-shell select:hover,
body.radix-shell textarea:hover {
  border-color: var(--input-hover-border);
}

body.radix-shell .lang-switcher:focus-visible,
body.radix-shell input:focus-visible,
body.radix-shell select:focus-visible,
body.radix-shell textarea:focus-visible,
body.radix-shell .btn:focus-visible,
body.radix-shell .theme-switch:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--indigo-a8) 80%, transparent);
  outline-offset: 1px;
}

body.radix-shell label,
body.radix-shell .theme-label,
body.radix-shell .lang-label {
  color: var(--label-color);
  font-weight: 500;
}

body.radix-shell .theme-switch {
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel-alt) 88%, transparent 12%);
}

body.radix-shell .theme-switch-knob {
  border-color: var(--slate-a7);
  box-shadow: none;
}

body.radix-shell .pill,
body.radix-shell .target-score-badge,
body.radix-shell .target-skill-pill {
  border-radius: 999px;
}

body.radix-shell .resume-modal-backdrop {
  background: color-mix(in srgb, black 46%, transparent);
}

body.radix-shell .empty {
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-alt) 72%, transparent 28%);
}

body.radix-shell .status-ok {
  color: var(--green-11);
}

body.radix-shell .status-error {
  color: var(--tomato-11);
}

body.radix-shell .status-info {
  color: var(--slate-11);
}

body.radix-shell .status-warning {
  color: var(--amber-11);
}

body.radix-shell .employer-vacancies-shell .employer-vacancy-library-card,
body.radix-shell .employer-vacancies-shell .employer-vacancy-row {
  background: var(--color-panel-translucent);
  border-color: var(--gray-a6);
  box-shadow: none;
}

body.radix-shell .employer-vacancies-shell .employer-vacancy-library-card:hover {
  border-color: var(--gray-a7);
  box-shadow: none;
}

body.radix-shell .employer-vacancies-shell .employer-vacancy-library-card.is-selected {
  border-color: var(--indigo-a7);
  box-shadow: 0 0 0 1px var(--indigo-a6);
}

body.radix-shell .employer-vacancies-shell input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='hidden']),
body.radix-shell .employer-vacancies-shell select,
body.radix-shell .employer-vacancies-shell textarea {
  border-color: var(--gray-a6);
  background: color-mix(in srgb, var(--color-panel-translucent) 74%, var(--panel-alt) 26%);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

body.radix-shell .employer-vacancies-shell input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='hidden']):hover,
body.radix-shell .employer-vacancies-shell select:hover,
body.radix-shell .employer-vacancies-shell textarea:hover {
  border-color: var(--gray-a7);
}

body.radix-shell .employer-vacancies-shell input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='hidden']):focus,
body.radix-shell .employer-vacancies-shell select:focus,
body.radix-shell .employer-vacancies-shell textarea:focus {
  border-color: var(--indigo-a8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo-a5) 64%, transparent);
  background: color-mix(in srgb, var(--color-panel-translucent) 84%, var(--panel-alt) 16%);
}

body.radix-shell .employer-vacancies-shell input:-webkit-autofill,
body.radix-shell .employer-vacancies-shell textarea:-webkit-autofill,
body.radix-shell .employer-vacancies-shell select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--color-panel-translucent) 78%, var(--panel-alt) 22%) inset !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--color-panel-translucent) 78%, var(--panel-alt) 22%) inset !important;
}

body.radix-shell .employer-vacancies-shell .employer-vacancy-row textarea[data-field='tasks'] {
  appearance: none;
  -webkit-appearance: none;
  background-color: color-mix(in srgb, var(--color-panel-translucent) 80%, var(--panel-alt) 20%) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
}

body.radix-shell .employer-vacancies-shell .employer-vacancy-row textarea[data-field='tasks']:hover {
  background-color: color-mix(in srgb, var(--color-panel-translucent) 84%, var(--panel-alt) 16%) !important;
}

body.radix-shell .employer-vacancies-shell .employer-vacancy-row textarea[data-field='tasks']:focus {
  background-color: color-mix(in srgb, var(--color-panel-translucent) 88%, var(--panel-alt) 12%) !important;
}

body[data-theme='dark'] .builder-shell .builder-row {
  background: var(--color-panel-translucent);
  border-color: var(--gray-a6);
  box-shadow: none;
}

/* Global shell style audit */
body.radix-shell input::placeholder,
body.radix-shell textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent 18%);
}

body.radix-shell input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='hidden']):disabled,
body.radix-shell select:disabled,
body.radix-shell textarea:disabled {
  opacity: 1;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-alt) 84%, transparent 16%);
  border-color: var(--gray-a6);
  cursor: not-allowed;
}

body.radix-shell input[type='checkbox'],
body.radix-shell input[type='radio'] {
  accent-color: var(--indigo-9);
}

body.radix-shell .builder-shell input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
body.radix-shell .builder-shell select,
body.radix-shell .builder-shell textarea,
body.radix-shell .sa-count-select {
  border-color: var(--gray-a6);
  background: color-mix(in srgb, var(--color-panel-translucent) 72%, var(--panel-alt) 28%);
}

body.radix-shell .builder-shell input:not([type='checkbox']):not([type='radio']):not([type='hidden']):hover,
body.radix-shell .builder-shell select:hover,
body.radix-shell .builder-shell textarea:hover,
body.radix-shell .sa-count-select:hover {
  border-color: var(--gray-a7);
}

body.radix-shell .builder-shell input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus,
body.radix-shell .builder-shell select:focus,
body.radix-shell .builder-shell textarea:focus,
body.radix-shell .sa-count-select:focus {
  border-color: var(--indigo-a8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo-a5) 64%, transparent);
  background: color-mix(in srgb, var(--color-panel-translucent) 82%, var(--panel-alt) 18%);
}

body.radix-shell .rt-TextFieldRoot:where(.rt-variant-surface),
body.radix-shell .rt-TextFieldRoot:where(.rt-variant-classic),
body.radix-shell .rt-TextFieldRoot:where(.rt-variant-soft),
body.radix-shell .rt-TextAreaRoot:where(.rt-variant-surface),
body.radix-shell .rt-TextAreaRoot:where(.rt-variant-classic),
body.radix-shell .rt-TextAreaRoot:where(.rt-variant-soft),
body.radix-shell .rt-SelectTrigger:where(:not(.rt-variant-ghost)) {
  background-color: color-mix(in srgb, var(--color-panel-translucent) 74%, var(--panel-alt) 26%);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--gray-a6);
}

body.radix-shell .rt-TextFieldRoot:hover,
body.radix-shell .rt-TextAreaRoot:hover,
body.radix-shell .rt-SelectTrigger:where(:not(.rt-variant-ghost)):hover {
  box-shadow: inset 0 0 0 1px var(--gray-a7);
}

body.radix-shell .rt-TextFieldRoot:where(:focus-within),
body.radix-shell .rt-TextAreaRoot:where(:focus-within),
body.radix-shell .rt-SelectTrigger:where(:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--indigo-a8), 0 0 0 3px color-mix(in srgb, var(--indigo-a5) 60%, transparent);
  outline: none;
}

body.radix-shell .rt-TextFieldInput,
body.radix-shell .rt-TextAreaInput,
body.radix-shell .rt-SelectTriggerInner,
body.radix-shell .rt-SelectIcon {
  color: var(--text);
}

body.radix-shell .rt-TextFieldInput::placeholder,
body.radix-shell .rt-TextAreaInput::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent 18%);
  opacity: 1;
}

body.radix-shell .rt-TextFieldRoot:where(:has(.rt-TextFieldInput:where(:disabled, :read-only))),
body.radix-shell .rt-TextAreaRoot:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))),
body.radix-shell .rt-SelectTrigger:where([data-disabled]) {
  background-color: color-mix(in srgb, var(--panel-alt) 84%, transparent 16%);
  box-shadow: inset 0 0 0 1px var(--gray-a6);
}

body.radix-shell .rt-SelectContent:where([data-side]) {
  border: 1px solid var(--gray-a6);
  background: color-mix(in srgb, var(--panel) 90%, transparent 10%);
  box-shadow: var(--shadow-md);
}

body.radix-shell .rt-SelectItem:where([data-highlighted]) {
  background: color-mix(in srgb, var(--indigo-a4) 44%, transparent);
  color: var(--gray-12);
}

body.radix-shell .rt-SelectItem:where([data-state='checked']) {
  color: var(--gray-12);
  font-weight: 600;
}

body.radix-shell .rt-SelectLabel {
  color: var(--muted);
}

body.radix-shell input:-webkit-autofill,
body.radix-shell textarea:-webkit-autofill,
body.radix-shell .rt-TextFieldInput:-webkit-autofill,
body.radix-shell .rt-TextAreaInput:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
}

body.radix-shell .resume-modal-review {
  background: var(--color-panel-translucent);
  border-color: var(--gray-a6);
}

body.radix-shell .resume-modal-review textarea,
body.radix-shell .resume-modal-review select,
body.radix-shell .resume-modal-review input:not([type='checkbox']):not([type='radio']):not([type='color']) {
  background: color-mix(in srgb, var(--color-panel-translucent) 78%, var(--panel-alt) 22%);
  border-color: var(--gray-a6);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

body.radix-shell .resume-modal-review textarea:hover,
body.radix-shell .resume-modal-review select:hover,
body.radix-shell .resume-modal-review input:not([type='checkbox']):not([type='radio']):not([type='color']):hover {
  border-color: var(--gray-a7);
}

body.radix-shell .resume-modal-review textarea:focus,
body.radix-shell .resume-modal-review select:focus,
body.radix-shell .resume-modal-review input:not([type='checkbox']):not([type='radio']):not([type='color']):focus {
  border-color: var(--indigo-a8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo-a5) 60%, transparent);
  background: color-mix(in srgb, var(--color-panel-translucent) 84%, var(--panel-alt) 16%);
}

body.radix-shell #resumeModalComment {
  background: color-mix(in srgb, var(--color-panel-translucent) 80%, var(--panel-alt) 20%);
  color: var(--text);
}

body.radix-shell #employerReviewPanel .section {
  border: 1px solid var(--gray-a6);
  border-radius: 12px;
  background: var(--color-panel-translucent);
  padding: 0.66rem;
}

body.radix-shell .employer-review-grid textarea,
body.radix-shell .employer-review-grid select,
body.radix-shell .employer-review-grid input:not([type='checkbox']):not([type='radio']):not([type='color']) {
  background: color-mix(in srgb, var(--color-panel-translucent) 78%, var(--panel-alt) 22%);
  border-color: var(--gray-a6);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

body.radix-shell .employer-review-grid textarea:hover,
body.radix-shell .employer-review-grid select:hover,
body.radix-shell .employer-review-grid input:not([type='checkbox']):not([type='radio']):not([type='color']):hover {
  border-color: var(--gray-a7);
}

body.radix-shell .employer-review-grid textarea:focus,
body.radix-shell .employer-review-grid select:focus,
body.radix-shell .employer-review-grid input:not([type='checkbox']):not([type='radio']):not([type='color']):focus {
  border-color: var(--indigo-a8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo-a5) 60%, transparent);
  background: color-mix(in srgb, var(--color-panel-translucent) 84%, var(--panel-alt) 16%);
}

body.radix-shell #reviewComment {
  min-height: 88px;
  background: color-mix(in srgb, var(--color-panel-translucent) 80%, var(--panel-alt) 20%);
  color: var(--text);
}

body.radix-shell #employerReviewPanel .employer-review-grid > div {
  display: grid;
  gap: 0.34rem;
}

body.radix-shell #employerReviewPanel #reviewStatus {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-weight: 500;
  padding-right: 2.3rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(
      to right,
      color-mix(in srgb, var(--gray-a6) 80%, transparent),
      color-mix(in srgb, var(--gray-a6) 80%, transparent)
    );
  background-position:
    calc(100% - 17px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px),
    calc(100% - 2.2rem) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 60%;
  background-repeat: no-repeat;
}

body.radix-shell #employerReviewPanel #reviewStatus option {
  background: var(--panel-alt);
  color: var(--text);
}

body.radix-shell #employerReviewPanel #reviewStatus:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--indigo-10) 50%),
    linear-gradient(135deg, var(--indigo-10) 50%, transparent 50%),
    linear-gradient(
      to right,
      color-mix(in srgb, var(--indigo-a7) 74%, transparent),
      color-mix(in srgb, var(--indigo-a7) 74%, transparent)
    );
}

body.radix-shell .candidate-card {
  background: var(--color-panel-translucent);
  border-color: var(--gray-a6);
  box-shadow: none;
}

body.radix-shell .candidate-card:hover {
  border-color: var(--gray-a7);
  box-shadow: none;
}

body.radix-shell .candidate-score {
  border-color: var(--gray-a6);
  background: color-mix(in srgb, var(--indigo-a4) 44%, var(--color-panel-translucent) 56%);
  color: var(--gray-12);
}

body.radix-shell .candidate-coverage,
body.radix-shell .candidate-experience-item,
body.radix-shell .candidate-target-context,
body.radix-shell .candidate-review-meta {
  border-color: var(--gray-a6);
  background: color-mix(in srgb, var(--color-panel-translucent) 78%, var(--panel-alt) 22%);
}

body.radix-shell .candidate-coverage-item,
body.radix-shell .candidate-coverage-item strong,
body.radix-shell .candidate-skill-section h4,
body.radix-shell .candidate-experience h4,
body.radix-shell .candidate-target-context h4,
body.radix-shell .candidate-review-line strong {
  color: var(--gray-12);
}

body.radix-shell .candidate-review-line,
body.radix-shell .candidate-review-comment,
body.radix-shell .candidate-meta span {
  color: var(--gray-11);
}

body.radix-shell .candidate-target-context p,
body.radix-shell .candidate-target-context-meta {
  color: var(--gray-11);
}

body.radix-shell .candidate-target-context-meta span {
  border-color: var(--gray-a6);
  background: color-mix(in srgb, var(--color-panel-translucent) 84%, var(--panel-alt) 16%);
}

body.radix-shell .candidate-review-ticker {
  border-color: color-mix(in srgb, var(--gray-a8) 74%, transparent);
  box-shadow: none;
}

body.radix-shell .experience-skill-picker,
body.radix-shell .skills-catalog-group,
body.radix-shell .sa-question-card,
body.radix-shell .sa-option-item,
body.radix-shell .sa-result-summary,
body.radix-shell .sa-result-card,
body.radix-shell .sa-validated-skills {
  border-color: var(--gray-a6);
  background: var(--color-panel-translucent);
  box-shadow: none;
}

body.radix-shell .sa-option-item:hover {
  border-color: var(--gray-a7);
}

body.radix-shell .sa-profile-verified-card .sa-validated-skills {
  border: 0;
  background: transparent;
  padding: 0;
}

body.radix-shell .sa-question-card h3,
body.radix-shell .sa-result-main,
body.radix-shell .sa-result-item strong,
body.radix-shell .sa-result-card h4,
body.radix-shell .sa-validated-skills h4 {
  color: var(--gray-12);
}

body.radix-shell .sa-question-card p,
body.radix-shell .sa-option-item span,
body.radix-shell .sa-result-sub,
body.radix-shell .sa-result-item {
  color: var(--gray-11);
}

body.radix-shell .sa-result-summary.is-good {
  border-color: var(--green-a7);
  background: color-mix(in srgb, var(--green-a4) 58%, var(--color-panel-translucent) 42%);
}

body.radix-shell .sa-result-summary.is-mid {
  border-color: var(--indigo-a7);
  background: color-mix(in srgb, var(--indigo-a4) 56%, var(--color-panel-translucent) 44%);
}

body.radix-shell .sa-result-summary.is-low {
  border-color: var(--tomato-a7);
  background: color-mix(in srgb, var(--tomato-a4) 56%, var(--color-panel-translucent) 44%);
}

body[data-theme='dark'] .resume-top-panel,
body[data-theme='dark'] .resume-wide-panel,
body[data-theme='dark'] .resume-main,
body[data-theme='dark'] .resume-side,
body[data-theme='dark'] .target-match-card {
  background: var(--color-panel-translucent);
  border-color: var(--gray-a6);
  box-shadow: none;
}

body[data-theme='dark'] .timeline-hover-tooltip {
  background: var(--panel);
  border-color: var(--gray-a6);
  box-shadow: 0 10px 24px color-mix(in srgb, black 46%, transparent);
}

body[data-theme='dark'] .resume-item p,
body[data-theme='dark'] .timeline-bar-label,
body[data-theme='dark'] .timeline-tooltip-title {
  color: var(--gray-12);
}

body[data-theme='dark'] .timeline-tooltip-sub,
body[data-theme='dark'] .timeline-year-tick,
body[data-theme='dark'] .resume-item .sub {
  color: var(--gray-11);
}

body[data-theme='dark'] .timeline-x-axis {
  background: color-mix(in srgb, var(--gray-a7) 68%, transparent 32%);
}

/* Resume dashboard polish (function-safe, timeline untouched) */
body.radix-shell .resume-top-panel {
  display: grid;
  gap: 0.92rem;
}

body.radix-shell .resume-page {
  gap: 0.92rem;
}

body.radix-shell .resume-main,
body.radix-shell .resume-side {
  display: grid;
  gap: 0.92rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.radix-shell .resume-top-panel .resume-header {
  margin-bottom: 0;
  padding-bottom: 0.74rem;
  border-bottom: 1px solid color-mix(in srgb, var(--gray-a6) 78%, transparent);
}

body.radix-shell .resume-top-panel .section,
body.radix-shell .resume-main .section,
body.radix-shell .resume-side .section,
body.radix-shell .target-match-wide-panel {
  margin: 0;
  padding: 0.9rem 0.96rem;
  border: 1px solid var(--gray-a6);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-panel-translucent) 90%, var(--panel-alt) 10%),
    color-mix(in srgb, var(--color-panel-translucent) 74%, var(--panel-alt) 26%)
  );
  box-shadow: none;
}

body.radix-shell .resume-top-panel .section-title,
body.radix-shell .resume-main .section-title,
body.radix-shell .resume-side .section-title,
body.radix-shell .target-match-wide-panel .section-title {
  margin-bottom: 0.54rem;
}

body.radix-shell .resume-main .section .resume-item,
body.radix-shell .resume-side .section .resume-item {
  margin-bottom: 0.58rem;
  padding: 0.58rem 0.64rem;
  border: 1px solid color-mix(in srgb, var(--gray-a6) 76%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-panel-translucent) 78%, var(--panel-alt) 22%);
}

body.radix-shell .resume-main .section .resume-item:last-child,
body.radix-shell .resume-side .section .resume-item:last-child {
  margin-bottom: 0;
}

body.radix-shell .resume-side .skills-toolbar,
body.radix-shell .resume-main .filter-summary {
  margin-bottom: 0.5rem;
}

body.radix-shell .resume-side .skills-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

body.radix-shell .resume-side .skills-toolbar-text,
body.radix-shell .resume-main .filter-summary {
  font-size: 0.84rem;
  color: var(--gray-11);
}

body.radix-shell .resume-side .skills-group-item,
body.radix-shell .resume-side .related-item {
  border-style: solid;
}

body.radix-shell .builder-badges-toggle-shell .panel-pad-lg {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.radix-shell .builder-badges-toggle-shell .empty {
  margin: 0;
}

body.radix-shell .sa-dashboard-sections {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(0, 1.72fr) minmax(300px, 1fr);
  align-items: start;
}

body.radix-shell .sa-section-config,
body.radix-shell .sa-section-questions,
body.radix-shell .sa-section-result {
  grid-column: 1;
}

body.radix-shell .sa-section-profile {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  position: sticky;
  top: clamp(12px, 2vh, 24px);
}

body.radix-shell .builder-form-stack > .app-mobile-section-slide,
body.radix-shell .sa-dashboard-sections > .app-mobile-section-slide {
  scroll-margin-inline: 16px;
}

@media (max-width: 1200px) {
  body.radix-shell .sa-dashboard-sections {
    grid-template-columns: 1fr;
  }

  body.radix-shell .sa-section-profile {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

body.radix-shell .worker-home-priority-viz {
  display: grid;
  gap: 0.42rem;
}

body.radix-shell .worker-home-priority-viz-track {
  display: flex;
  align-items: stretch;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gray-a7) 56%, transparent);
  background: color-mix(in srgb, var(--gray-a4) 30%, transparent);
}

body.radix-shell .worker-home-priority-viz-segment {
  display: block;
  height: 100%;
}

body.radix-shell .worker-home-priority-viz-segment.is-high {
  background: linear-gradient(90deg, var(--tomato-9), var(--orange-9));
}

body.radix-shell .worker-home-priority-viz-segment.is-medium {
  background: linear-gradient(90deg, var(--amber-9), var(--yellow-9));
}

body.radix-shell .worker-home-priority-viz-segment.is-low {
  background: linear-gradient(90deg, var(--green-9), var(--cyan-9));
}

body.radix-shell .worker-home-priority-viz-tags {
  row-gap: 0.28rem;
}

body.radix-shell .dashboard-donut {
  --dashboard-donut-size: 56px;
  --dashboard-donut-stroke: 7px;
  --dashboard-donut-accent: var(--indigo-9);
  position: relative;
  width: var(--dashboard-donut-size);
  height: var(--dashboard-donut-size);
  min-width: var(--dashboard-donut-size);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gray-a7) 56%, transparent);
  background: color-mix(in srgb, var(--color-panel-translucent) 46%, transparent);
  backdrop-filter: blur(2px);
}

body.radix-shell .dashboard-donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

body.radix-shell .dashboard-donut-track {
  fill: none;
  stroke: color-mix(in srgb, var(--gray-a7) 56%, transparent);
  stroke-width: var(--dashboard-donut-stroke);
}

body.radix-shell .dashboard-donut-segment {
  fill: none;
  stroke-width: var(--dashboard-donut-stroke);
  stroke: var(--dashboard-donut-accent);
  stroke-linecap: round;
  transition: stroke-dasharray 180ms ease, stroke 180ms ease;
}

body.radix-shell .dashboard-donut-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.05;
  padding: 0 5px;
}

body.radix-shell .dashboard-donut-label-value {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--gray-12);
}

body.radix-shell .dashboard-donut-label-sub {
  display: block;
  font-size: 0.5rem;
  color: var(--gray-10);
}

body.radix-shell .dashboard-slide-over-overlay,
body.radix-shell .dashboard-info-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  background: color-mix(in srgb, black 28%, transparent);
  backdrop-filter: blur(3px);
  z-index: 1400;
  padding: 8px;
}

body.radix-shell .dashboard-slide-over-panel,
body.radix-shell .dashboard-info-modal-panel {
  width: clamp(380px, 33.333vw, 560px);
  height: 100%;
  max-height: calc(100vh - 16px);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--indigo-a8) 34%, var(--gray-a8) 66%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--indigo-a4) 20%, transparent) 0%, transparent 100%),
    var(--color-panel-translucent);
  box-shadow: 0 22px 56px color-mix(in srgb, var(--slate-a9) 34%, transparent);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  animation: dashboard-drawer-in 180ms ease;
}

body.radix-shell .dashboard-slide-over-content,
body.radix-shell .dashboard-info-modal-content {
  overflow: auto;
  padding: 20px 20px 18px;
  font-size: 0.97rem;
}

body.radix-shell .dashboard-info-modal-title {
  font-size: clamp(1.14rem, 1.05vw, 1.34rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--gray-12) 96%, white 4%);
  text-wrap: balance;
}

body.radix-shell .dashboard-info-modal-summary {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.52;
  color: color-mix(in srgb, var(--gray-12) 84%, var(--gray-10) 16%);
  text-wrap: pretty;
}

body.radix-shell .dashboard-info-modal-description {
  font-size: 0.98rem;
  font-weight: 450;
  line-height: 1.62;
  color: color-mix(in srgb, var(--gray-12) 96%, var(--gray-11) 4%);
  text-wrap: pretty;
}

body.radix-shell .dashboard-info-modal-section-title {
  font-size: 0.81rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--gray-12) 72%, var(--gray-10) 28%);
}

body.radix-shell .dashboard-info-modal-metric-row {
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gray-a7) 48%, transparent);
}

body.radix-shell .dashboard-info-modal-metric-row:last-child {
  border-bottom: 0;
}

body.radix-shell .dashboard-info-modal-metric-label {
  font-size: 0.93rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--gray-12) 78%, var(--gray-10) 22%);
}

body.radix-shell .dashboard-info-modal-metric-value {
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

body.radix-shell .dashboard-info-modal-step {
  font-size: 0.95rem;
  font-weight: 460;
  line-height: 1.58;
  color: color-mix(in srgb, var(--gray-12) 90%, var(--gray-11) 10%);
}

body[data-theme='dark'].radix-shell .dashboard-slide-over-panel,
body[data-theme='dark'].radix-shell .dashboard-info-modal-panel {
  border-color: color-mix(in srgb, var(--gray-a8) 66%, var(--indigo-a8) 34%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--indigo-a6) 30%, transparent) 0%, transparent 100%),
    color-mix(in srgb, var(--color-panel-translucent) 72%, rgba(8, 16, 34, 0.94) 28%);
}

body[data-theme='dark'].radix-shell .dashboard-slide-over-content,
body[data-theme='dark'].radix-shell .dashboard-info-modal-content {
  font-size: 1.04rem;
  line-height: 1.66;
}

body[data-theme='dark'].radix-shell .dashboard-info-modal-title {
  font-size: clamp(1.28rem, 1.2vw, 1.52rem);
  font-weight: 760;
  line-height: 1.22;
  color: color-mix(in srgb, white 97%, var(--gray-1) 3%);
  text-shadow: 0 1px 0 color-mix(in srgb, black 34%, transparent);
}

body[data-theme='dark'].radix-shell .dashboard-info-modal-summary {
  font-size: 1.08rem;
  font-weight: 540;
  line-height: 1.6;
  color: color-mix(in srgb, white 92%, var(--gray-2) 8%);
}

body[data-theme='dark'].radix-shell .dashboard-info-modal-description {
  font-size: 1.1rem;
  line-height: 1.72;
  color: color-mix(in srgb, white 97%, var(--gray-1) 3%);
}

body[data-theme='dark'].radix-shell .dashboard-info-modal-section-title {
  font-size: 0.86rem;
  font-weight: 620;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, white 82%, var(--gray-3) 18%);
}

body[data-theme='dark'].radix-shell .dashboard-info-modal-metric-row {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--gray-a8) 64%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, white 9%, transparent);
  margin-bottom: 6px;
}

body[data-theme='dark'].radix-shell .dashboard-info-modal-metric-row:last-child {
  margin-bottom: 0;
}

body[data-theme='dark'].radix-shell .dashboard-info-modal-metric-label {
  font-size: 1.02rem;
  font-weight: 540;
  color: color-mix(in srgb, white 91%, var(--gray-2) 9%);
}

body[data-theme='dark'].radix-shell .dashboard-info-modal-metric-value {
  font-size: 0.9rem;
  color: color-mix(in srgb, white 96%, var(--gray-1) 4%);
}

body[data-theme='dark'].radix-shell .dashboard-info-modal-step {
  font-size: 1.04rem;
  font-weight: 500;
  line-height: 1.66;
  color: color-mix(in srgb, white 93%, var(--gray-2) 7%);
}

body[data-theme='dark'].radix-shell .dashboard-slide-over-footer,
body[data-theme='dark'].radix-shell .dashboard-info-modal-footer {
  border-top-color: color-mix(in srgb, var(--gray-a8) 82%, transparent);
  background: color-mix(in srgb, rgba(8, 14, 30, 0.96) 96%, transparent);
}

body.radix-shell .dashboard-slide-over-footer,
body.radix-shell .dashboard-info-modal-footer {
  border-top: 1px solid color-mix(in srgb, var(--gray-a8) 72%, transparent);
  padding: 14px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: color-mix(in srgb, var(--color-panel-translucent) 86%, transparent);
}

@keyframes dashboard-drawer-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 640px) {
  .chat-drawer-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    grid-template-columns: 1fr !important;
    height: 100dvh !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
  }

  .chat-threads {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-right: none !important;
    background: var(--panel) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease !important;
    z-index: 2 !important;
  }

  .chat-threads-head {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .chat-threads-title {
    flex: 1 !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
  }

  .chat-thread-list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 8px !important;
  }

  .chat-main {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--panel) !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    z-index: 3 !important;
  }

  /* Показываем threads, скрываем main по умолчанию */
  .chat-drawer.has-active-thread .chat-threads {
    transform: translateX(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .chat-drawer.has-active-thread .chat-main {
    transform: translateX(0) !important;
  }

  .chat-main-head {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .chat-main-title {
    font-size: 1rem !important;
  }

  .chat-messages {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
  }

  .chat-compose {
    flex: 0 0 auto !important;
    padding: 12px 14px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .chat-mobile-back-btn {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--line) !important;
    background: var(--panel-alt) !important;
    color: var(--text) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  .chat-mobile-close-btn {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--line) !important;
    background: var(--panel-alt) !important;
    color: var(--text) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
}

@media (min-width: 641px) and (max-width: 920px) {
  .chat-drawer-panel {
    width: 100vw !important;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  body.radix-shell .container {
    width: min(1240px, calc(100% - 1rem));
    padding-top: 0.86rem;
  }

  body.radix-shell .topbar {
    padding: 0.66rem 0.7rem;
  }

  body.radix-shell .dashboard-slide-over-overlay,
  body.radix-shell .dashboard-info-modal-overlay {
    padding: 8px;
    background: color-mix(in srgb, black 24%, transparent);
    justify-content: stretch;
    align-items: stretch;
  }

  body.radix-shell .dashboard-slide-over-panel,
  body.radix-shell .dashboard-info-modal-panel {
    width: 100%;
    max-height: calc(100vh - 16px);
    border-radius: 16px;
  }

  body.radix-shell .dashboard-slide-over-content,
  body.radix-shell .dashboard-info-modal-content {
    padding: 16px 14px 14px;
  }

  body.radix-shell .dashboard-slide-over-footer,
  body.radix-shell .dashboard-info-modal-footer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }
}