:root {
  --landing: #0A0F1E;
  --navy: #0B1020;
  --deep: #111A33;
  --blue: #1E5BFF;
  --cyan: #00E5D4;
  --ice: #E6F2FF;
  --white: #FFFFFF;
  --positive: #16D7FF;
  --warning: #D9A441;
  --danger: #F87171;
  --mutedDark: #AAB7CF;
  --mutedLight: #64748B;
  --lineDark: rgba(51, 65, 85, .58);
  --lineLight: rgba(15, 23, 42, .11);
  --status-good-bg: rgba(34, 197, 94, .14);
  --status-good-border: rgba(34, 197, 94, .32);
  --status-good-text: #22C55E;
  --status-medium-bg: rgba(217, 164, 65, .12);
  --status-medium-border: rgba(217, 164, 65, .28);
  --status-medium-text: #D9A441;
  --status-bad-bg: rgba(248, 113, 113, .12);
  --status-bad-border: rgba(248, 113, 113, .28);
  --status-bad-text: #F87171;
  --status-neutral-bg: rgba(30, 91, 255, .10);
  --status-neutral-border: rgba(30, 91, 255, .22);
  --status-neutral-text: #1E5BFF;
  --status-muted-bg: rgba(248, 113, 113, .08);
  --status-muted-border: rgba(248, 113, 113, .18);
  --status-muted-text: #F87171;
  font-family: Manrope, Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Manrope, Inter, Arial, sans-serif; letter-spacing: 0; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
p { line-height: 1.6; }

.landingBody {
  background: var(--landing);
  color: var(--white);
}

.candidateBody {
  min-height: 100vh;
  background: #F8FAFC;
  color: #0F172A;
}

.landing {
  min-height: 100vh;
  background:
    radial-gradient(circle at 22% 8%, rgba(30, 91, 255, .18), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(0, 229, 212, .10), transparent 26%),
    linear-gradient(180deg, #0A0F1E 0%, #0B1020 72%, #07101F 100%);
  overflow: hidden;
}

.landingHeader {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  max-width: 1220px;
  margin: 0 auto;
  padding: 14px 22px;
  background: rgba(10, 15, 30, .72);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.landingLogo img,
.landingFooter img {
  display: block;
  width: 176px;
}

.landingNav,
.landingActions,
.heroButtons,
.topbarActions,
.reportToolbar,
.landingFooter div {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.landingNav {
  justify-content: center;
}

.landingNav a {
  color: #D6E2F5;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 10px;
}

.landingActions {
  justify-content: flex-end;
}

.blueButton,
.ghostOnDark,
.button,
.themeToggle {
  border-radius: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  font-weight: 900;
}

.blueButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  border-color: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: 0 14px 34px rgba(30, 91, 255, .28);
}

.blueButton:hover {
  filter: brightness(1.08);
}

.blueButton.large,
.ghostOnDark.large {
  min-height: 44px;
  padding: 11px 16px;
}

.blueButton.wide {
  width: 100%;
}

.ghostOnDark {
  background: rgba(255, 255, 255, .06);
  color: #E6F2FF;
  border-color: rgba(255, 255, 255, .14);
}

.hero {
  max-width: 1220px;
  margin: 0 auto;
  padding: 56px 22px 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 44px;
  align-items: center;
}

.heroCopy h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(36px, 4.2vw, 52px);
  line-height: 1.12;
  font-weight: 800;
}

.heroCopy p {
  max-width: 680px;
  color: #C7D3E8;
  font-size: 18px;
  line-height: 1.62;
}

.pill,
.miniLabel {
  display: inline-flex;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.appTopbar .miniLabel {
  margin-right: 4px;
}

.underCta {
  display: block;
  margin-top: 14px;
  color: var(--mutedDark);
  font-size: 14px;
  font-weight: 700;
}

.heroPanel {
  position: relative;
}

.panelGlow {
  position: absolute;
  inset: 0;
  background: rgba(30, 91, 255, .22);
  border-radius: 20px;
  filter: blur(36px);
}

.glass {
  position: relative;
  border: 1px solid var(--lineDark);
  background: rgba(30, 41, 59, .62);
  backdrop-filter: blur(22px);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .32);
}

.heroCard {
  display: grid;
  gap: 15px;
  min-height: 380px;
  border-radius: 14px;
  padding: 20px;
}

.cardLine,
.metric > div,
.funnel > div,
.panelHead,
.questionHead,
.reportHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.cardLine span,
.metric span,
.funnel span,
.panelHead span {
  color: var(--mutedDark);
  font-size: 13px;
  font-weight: 800;
}

.metric,
.funnel {
  display: grid;
  gap: 8px;
}

.metric b,
.funnel b {
  color: #fff;
}

.metric i,
.funnel i {
  display: block;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, .22);
}

.metric em,
.funnel em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}

.aiNote {
  border: 1px solid rgba(30, 91, 255, .28);
  border-radius: 8px;
  padding: 14px;
  background: rgba(30, 91, 255, .11);
  color: #D6E2F5;
  line-height: 1.5;
  font-weight: 700;
}

.trusted {
  border-block: 1px solid rgba(51, 65, 85, .48);
  background: rgba(15, 23, 42, .36);
  padding: 24px 22px;
  text-align: center;
  color: #C7D3E8;
  font-weight: 800;
}

.trusted span {
  display: block;
  margin-bottom: 8px;
  color: var(--cyan);
}

.landingSection {
  max-width: 1220px;
  margin: 0 auto;
  padding: 56px 22px;
}

.sectionIntro {
  max-width: 720px;
  margin-bottom: 24px;
}

.sectionIntro h2,
.reportPreview h2 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 38px;
  line-height: 1.12;
  font-weight: 800;
}

.sectionIntro p,
.productCard p,
.step p,
.reportPreview p {
  color: #B8C5DA;
}

.productGrid,
.tariffGrid,
.profileGrid,
.kpiGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.productCard,
.tariffCard,
.panel,
.authCard,
.candidateCard {
  border-radius: 8px;
}

.productCard {
  min-height: 190px;
  padding: 18px;
}

.productCard h3,
.step h3 {
  color: #fff;
  font-size: 18px;
}

.twoCols {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 30px;
  align-items: start;
}

.stepsGlass {
  display: grid;
  gap: 12px;
}

.step {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--lineDark);
  border-radius: 8px;
  background: rgba(30, 41, 59, .46);
}

.step b {
  color: var(--cyan);
  font-size: 22px;
}

.reportPreview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: center;
  padding: 22px;
}

.reportMini {
  min-height: 230px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.reportMini strong {
  color: var(--positive);
  font-size: 72px;
  line-height: 1;
}

.miniBars {
  width: 160px;
  display: grid;
  gap: 8px;
}

.miniBars i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.tariffCard {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--lineDark);
  background: rgba(30, 41, 59, .52);
}

.tariffCard.highlight {
  border-color: rgba(0, 229, 212, .55);
  box-shadow: 0 20px 70px rgba(0, 229, 212, .12);
}

.tariffCard span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.tariffCard h3 {
  margin-bottom: 0;
  color: #fff;
  font-size: 20px;
}

.tariffCard strong {
  color: #fff;
  font-size: 24px;
}

.tariffCard p,
.tariffCard li {
  color: #B8C5DA;
}

.tariffCard ul {
  margin: 0;
  padding-left: 18px;
}

.landingFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 32px 22px 48px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #B8C5DA;
}

.authPage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 44px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 22px;
}

.candidatePage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 48px 16px;
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  color: #0F172A;
}

.candidateHeader,
.candidateCard {
  width: min(1152px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.authBrand img,
.candidateHeader img {
  width: 240px;
}

.authBrand h1 {
  max-width: 640px;
  margin: 24px 0 18px;
  font-size: 52px;
  line-height: 1.06;
}

.authBrand p,
.authCard p {
  color: #C7D3E8;
}

.authCard {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

/* ── Auth Pulsing Background ── */
.authPage {
  position: relative;
}

.authPage::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 700px 700px at -10% -10%, rgba(30,91,255,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 600px 600px at 110% 110%, rgba(0,229,212,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 480px 480px at 50% 60%, rgba(200,80,192,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 380px 380px at 90% -5%, rgba(30,91,255,0.09) 0%, transparent 60%);
  animation: authBgPulse 12s ease-in-out infinite alternate;
}

@keyframes authBgPulse {
  0%   { opacity: 0.7; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.04); }
  100% { opacity: 0.8; transform: scale(0.98); }
}

/* ── Auth Gradient Heading ── */
.authGradientText {
  background: linear-gradient(135deg, #00E5D4 0%, #1E5BFF 60%, #00E5D4 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: authGradientShift 5s linear infinite;
  display: inline;
}

.authWhiteText {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  display: inline;
}

@keyframes authGradientShift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Auth Pill Switcher ── */
.authRefBanner {
  margin: 18px 20px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0, 229, 212, 0.10);
  border: 1px solid rgba(0, 229, 212, 0.30);
  color: #9feee6;
  font-size: 13px;
  line-height: 1.4;
}

.authPill {
  padding: 18px 20px 0;
}

.authPillInner {
  display: flex;
  background: rgba(255,255,255,0.05);
  border-radius: 100px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.07);
  gap: 3px;
}

.authPillBtn {
  flex: 1;
  padding: 9px 16px;
  border-radius: 100px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  color: rgba(230,242,255,0.38);
  background: transparent;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.authPillBtn.active {
  background: linear-gradient(135deg, #1E5BFF, #0EA5E9);
  color: #fff;
  box-shadow: 0 4px 14px rgba(30,91,255,0.35);
}

/* ── Auth Form Wrap (smooth expand) ── */
.authFormWrap {
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.authFormWrap.open {
  max-height: 800px;
  opacity: 1;
  pointer-events: auto;
}

.authFormWrap form {
  display: grid;
  gap: 14px;
  padding: 18px 20px 22px;
}

/* ── Auth Tabs (legacy, kept for compatibility) ── */
.authTabs {
  display: none;
}

.authTabPanel {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.authTabPanel.hidden {
  display: none;
}

/* ── Auth Input ── */
.authInputGroup {
  display: grid;
  gap: 6px;
}

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

.authLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230,242,255,0.5);
  display: block;
}

.authInput {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(30,91,255,0.25);
  border-radius: 8px;
  background: rgba(17,26,51,0.8);
  color: #E6F2FF;
  font-size: 14px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.authInput::placeholder {
  color: rgba(230,242,255,0.25);
}

.authInput:focus {
  border-color: #1E5BFF;
  box-shadow: 0 0 0 3px rgba(30,91,255,0.15);
}

/* ── Select (role picker) ── */
.authSelectWrap {
  position: relative;
}

.authSelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}

.authSelect:invalid {
  color: rgba(230,242,255,0.35);
}

.authSelect option {
  background: #111A33;
  color: #E6F2FF;
}

.authSelectChevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(230,242,255,0.4);
  pointer-events: none;
  transition: color 0.18s;
}

.authSelectWrap:focus-within .authSelectChevron {
  color: #1E5BFF;
}

.authForgot {
  font-size: 12px;
  color: rgba(230,242,255,0.35);
  text-decoration: none;
  text-align: right;
  display: block;
  margin-top: 2px;
  transition: color 0.15s;
}

.authForgot:hover {
  color: #00E5D4;
}

/* ── Submit button ── */
.authSubmitBtn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(90deg, #1E5BFF 0%, #0EA5E9 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 16px rgba(30,91,255,0.30);
  margin-top: 4px;
}

.authSubmitBtn:hover {
  opacity: 0.92;
  box-shadow: 0 6px 20px rgba(30,91,255,0.40);
}

/* Auth challenge modal */
.authChallengeModal {
  width: min(520px, 100%);
}

.authChallengeField {
  display: grid;
  gap: 6px;
}

.authChallengeInput {
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  min-height: 60px;
  font-variant-numeric: tabular-nums;
  background: rgba(17,26,51,0.9);
}

.authChallengeEmail {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  background: rgba(30,91,255,0.14);
  border: 1px solid rgba(30,91,255,0.28);
  color: #9FC0FF;
  font-weight: 600;
  white-space: nowrap;
}

.authChallengeActions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.authChallengeActions .button.subtle,
.authChallengeActions .authSubmitBtn {
  flex: 1 1 180px;
}

.authChallengeClose {
  align-self: center;
  margin-top: -2px;
  font-size: 12px;
  text-align: center;
  opacity: 0.9;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.authChallengeClose:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── Регистрация: шаг выбора тарифа ── */
.regTariffModal {
  width: min(640px, 100%);
}

.regTariffGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 14px;
}

@media (max-width: 520px) {
  .regTariffGrid { grid-template-columns: 1fr; }
}

.regTariffCard {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(120,150,210,0.22);
  background: rgba(17,26,51,0.6);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}

.regTariffCard:hover {
  border-color: rgba(30,91,255,0.5);
  background: rgba(22,34,66,0.8);
}

.regTariffCard.active {
  border-color: #1E5BFF;
  background: rgba(30,91,255,0.16);
  box-shadow: 0 0 0 1px #1E5BFF inset;
}

.regTariffHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.regTariffName {
  font-weight: 800;
  font-size: 15px;
  color: #EAF1FF;
}

.regTariffPrice {
  font-weight: 800;
  font-size: 15px;
  color: #9FC0FF;
  white-space: nowrap;
}

.regTariffAudience {
  font-size: 12px;
  color: rgba(230,242,255,0.55);
}

.regTariffMeta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: rgba(230,242,255,0.75);
  font-variant-numeric: tabular-nums;
}

.regTariffMeta span {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(120,150,210,0.14);
}

/* ── Регистрация: ожидание оплаты ── */
.regPayingSpinner {
  width: 38px;
  height: 38px;
  margin: 14px auto;
  border-radius: 50%;
  border: 3px solid rgba(120,150,210,0.25);
  border-top-color: #1E5BFF;
  animation: regSpin 0.9s linear infinite;
}

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

/* ── Auth hints & links ── */
.authHint {
  font-size: 12px;
  color: rgba(230,242,255,0.35);
  text-align: center;
  margin: 0;
}

.authLink {
  color: #00E5D4;
  text-decoration: none;
}

.authLink:hover {
  text-decoration: underline;
}

/* ── Feature list ── */
.authFeatureList {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 10px;
}

.authFeatureList li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(230,242,255,0.65);
}

.authFeatureIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,229,212,0.15);
  color: #00E5D4;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Contact type switch ── */
.authContactSwitch {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.authContactBtn {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(30,91,255,0.25);
  background: transparent;
  color: rgba(230,242,255,0.4);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.authContactBtn.active {
  background: rgba(30,91,255,0.20);
  border-color: #1E5BFF;
  color: #E6F2FF;
}

/* ── Checkbox ── */
.authCheckbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: rgba(230,242,255,0.45);
  cursor: pointer;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}

.authCheckbox input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: #1E5BFF;
  background: rgba(17,26,51,0.8);
  border: 1px solid rgba(30,91,255,0.3);
  border-radius: 4px;
}

label {
  display: grid;
  gap: 7px;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  color: var(--navy);
  outline: none;
  text-transform: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 229, 212, .16);
}

.appBody.dark {
  background: var(--landing);
  color: #fff;
}

.appBody.light {
  background: #F6F9FC;
  color: var(--navy);
}

.appShell {
  height: 100vh;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  overflow: hidden;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 14px 12px;
  border-right: 1px solid var(--lineDark);
  background: rgba(11, 16, 32, .92);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lightTheme .sidebar {
  background: #fff;
  border-color: var(--lineLight);
}

.appLogo {
  width: 136px;
}

.sideNav {
  display: grid;
  gap: 4px;
}

.sideNav button,
.button.subtle,
.themeToggle {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 7px 8px;
  font-weight: 850;
}

.sideNav button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: #C7D3E8;
  font-size: 13px;
}

.sideNav button b,
.sideNav button em {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 22px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
}

.sideNav button b {
  background: rgba(148, 163, 184, .13);
  color: #C5D1E8;
}

.sideNav button em {
  background: var(--status-muted-bg);
  color: var(--status-bad-text);
}

.navIcon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: var(--cyan);
  font-size: 12px;
}

.lockedNav {
  opacity: .62;
}

.lightTheme .sideNav button {
  color: #334155;
}

.sideNav button.active,
.sideNav button:hover,
.button.subtle,
.themeToggle {
  border-color: rgba(30, 91, 255, .32);
  background: rgba(30, 91, 255, .12);
}

.sideSoon {
  display: grid;
  gap: 6px;
  color: var(--mutedDark);
  font-size: 10.5px;
  line-height: 1.45;
}

.lightTheme .sideSoon {
  color: var(--mutedLight);
}

.appMain {
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
}

.appTopbar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--lineDark);
  background: rgba(10, 15, 30, .82);
  backdrop-filter: blur(18px);
}

.lightTheme .appTopbar {
  background: rgba(255, 255, 255, .88);
  border-color: var(--lineLight);
}

.topbarActions {
  justify-content: flex-end;
}

.tariffPill {
  display: grid;
  gap: 2px;
  min-width: 86px;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .04);
}

.tariffPill span {
  color: var(--mutedDark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.search {
  width: 260px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.lightTheme .search {
  background: #fff;
  color: var(--navy);
}

.balance {
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(0, 229, 212, .12);
  color: var(--cyan);
  font-weight: 900;
}

/* legacy appContent — padding moved to elt-page-wrap / elt-dashboard */

.pageHead {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 16px;
}

.pageHead h1 {
  margin-bottom: 8px;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 800;
}

.pageHead p {
  max-width: 760px;
  color: var(--mutedDark);
}

.lightTheme .pageHead p {
  color: var(--mutedLight);
}

.panel {
  border: 1px solid var(--lineDark);
  background: rgba(30, 41, 59, .52);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .18);
}

.lightTheme .panel {
  border-color: var(--lineLight);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 48px rgba(15, 23, 42, .08);
}

.lightTheme {
  --status-good-text: #15803D;
  --status-medium-text: #B45309;
  --status-bad-text: #DC2626;
  --status-neutral-text: #1D4ED8;
  --status-muted-text: #DC2626;
}

.kpiGrid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-bottom: 16px;
}

.kpi {
  padding: 12px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.kpi-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kpi-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: var(--status-text, var(--cyan));
  flex-shrink: 0;
}

.kpi-label {
  display: block;
  color: var(--mutedDark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
}

.lightTheme .kpi-label {
  color: var(--mutedLight);
}

.kpi.clickable {
  cursor: pointer;
}

.kpi.clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 212, .42);
  background: rgba(30, 91, 255, .12);
}

.profileCard span,
.referralCard span {
  color: var(--mutedDark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lightTheme .profileCard span,
.lightTheme .referralCard span {
  color: var(--mutedLight);
}

.kpi strong {
  display: block;
  margin: 8px 0 5px;
  font-size: 24px;
  line-height: 1;
}

.kpi p,
.mutedText {
  margin: 0;
  color: var(--mutedDark);
  font-size: 13px;
}

.lightTheme .kpi p,
.lightTheme .mutedText {
  color: var(--mutedLight);
}

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

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

.moduleCard {
  display: grid;
  gap: 12px;
  min-height: 190px;
  cursor: pointer;
}

.moduleCard p {
  margin: 0;
  color: var(--mutedDark);
  font-size: 13px;
}

.lightTheme .moduleCard p {
  color: var(--mutedLight);
}

.dashboardPage {
  display: grid;
  gap: 16px;
}

.dashboardHeader {
  margin-bottom: 0;
}

.headerActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.filterPanel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

.periodFilter button {
  min-height: 34px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: inherit;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 850;
}

.periodFilter button.active {
  border-color: rgba(0, 229, 212, .55);
  background: rgba(0, 229, 212, .1);
  color: var(--cyan);
}

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

.statusDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue);
}

.status-good,
.status-good .statusDot {
  --status-bg: var(--status-good-bg);
  --status-border: var(--status-good-border);
  --status-text: var(--status-good-text);
  --status-color: var(--status-good-text);
}

.status-medium,
.status-medium .statusDot {
  --status-bg: var(--status-medium-bg);
  --status-border: var(--status-medium-border);
  --status-text: var(--status-medium-text);
  --status-color: var(--status-medium-text);
}

.status-bad,
.status-bad .statusDot {
  --status-bg: var(--status-bad-bg);
  --status-border: var(--status-bad-border);
  --status-text: var(--status-bad-text);
  --status-color: var(--status-bad-text);
}

.status-neutral,
.status-neutral .statusDot {
  --status-bg: var(--status-neutral-bg);
  --status-border: var(--status-neutral-border);
  --status-text: var(--status-neutral-text);
  --status-color: var(--status-neutral-text);
}

.status-noData,
.status-noData .statusDot {
  --status-bg: var(--status-muted-bg);
  --status-border: var(--status-muted-border);
  --status-text: var(--status-muted-text);
  --status-color: var(--status-muted-text);
}

.statusDot,
.statusBadge {
  background: var(--status-bg);
  color: var(--status-text);
}

.statusBadge {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--status-border);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
}

.heatmap {
  display: grid;
  gap: 8px;
  min-width: 860px;
}

.heatmapHead,
.heatmapRow {
  display: grid;
  grid-template-columns: 170px repeat(6, minmax(92px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.heatmapCard .heatmapHead,
.heatmapCard .heatmapRow {
  grid-template-columns: 170px repeat(var(--heat-cols, 6), minmax(92px, 1fr));
}

.heatmapHead b {
  color: var(--mutedDark);
  font-size: 11px;
  text-transform: uppercase;
}

.heatmapRow > b {
  align-self: center;
}

.heatCell {
  display: grid;
  gap: 3px;
  border: 1px solid var(--status-border);
  border-radius: 10px;
  background: var(--status-bg);
  color: inherit;
  padding: 9px;
  text-align: left;
}

.heatCell.status-bad {
  border-color: var(--status-muted-border);
  background: var(--status-muted-bg);
}

.heatCell.status-medium {
  border-color: rgba(217, 164, 65, .18);
  background: rgba(217, 164, 65, .07);
}

.attentionItem.status-bad {
  border-color: var(--status-muted-border);
  background: var(--status-muted-bg);
}

.attentionItem.status-medium {
  border-color: rgba(217, 164, 65, .18);
  background: rgba(217, 164, 65, .07);
}

.heatCell strong {
  color: var(--status-text);
}

.heatCell span {
  color: var(--mutedDark);
  font-size: 11px;
}

.attentionPanel {
  padding: 16px;
}

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

.attentionItem {
  display: grid;
  gap: 4px;
  border: 1px solid var(--status-border);
  border-radius: 12px;
  background: var(--status-bg);
  color: inherit;
  padding: 12px;
  text-align: left;
}

.attentionItem b {
  color: var(--status-text);
}

.attentionItem span {
  color: var(--mutedDark);
  font-size: 13px;
}

.emptyState {
  display: grid;
  gap: 4px;
  color: var(--mutedDark);
  padding: 16px;
  text-align: center;
}

.linkButton {
  border: 0;
  background: transparent;
  color: var(--cyan);
  padding: 0;
  font-weight: 900;
}

.guardedFeature {
  position: relative;
}

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

.supportCard {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.supportCard span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.supportCard h2 {
  margin: 0;
  font-size: 22px;
}

.supportCard p {
  margin: 0;
  color: var(--mutedDark);
}

.supportCard b {
  color: #D6E2F5;
}

.supportCard.priority {
  border-color: rgba(0, 229, 212, .34);
  background: linear-gradient(135deg, rgba(30, 91, 255, .13), rgba(0, 229, 212, .08));
}

.supportForm textarea {
  min-height: 120px;
  resize: vertical;
}

.widePanel {
  grid-column: 1 / -1;
}

.chartPanel,
.tablePanel,
.formPanel,
.profileCard,
.referralCard {
  padding: 16px;
}

.panelHead {
  margin-bottom: 16px;
}

.panelHead h2,
.formPanel h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
}

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

.profileCard {
  display: grid;
  gap: 10px;
}

.profileCard p {
  color: var(--mutedDark);
}

.lightTheme .profileCard p {
  color: var(--mutedLight);
}

.linkForm,
.settingsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  margin-bottom: 16px;
}

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

.formPanel {
  display: grid;
  gap: 14px;
}

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

th,
td {
  padding: 13px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--mutedDark);
  font-size: 12px;
  text-transform: uppercase;
}

.lightTheme th {
  color: var(--mutedLight);
}

td {
  color: inherit;
}

code {
  color: var(--cyan);
  white-space: nowrap;
}

.status {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(148, 163, 184, .15);
  color: inherit;
  font-size: 12px;
  font-weight: 900;
}

.status.completed {
  background: var(--status-good-bg);
  color: var(--status-good-text);
}

.status.pending {
  background: var(--status-medium-bg);
  color: var(--status-medium-text);
}

.candidateHeader {
  padding-top: 12px;
}

.candidateCard {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid #E2E8F0;
  background: #fff;
  color: #0F172A;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px rgba(15, 23, 42, .06);
}

.candidateCard.thanks {
  justify-items: center;
  text-align: center;
}

.candidateCard.thanks img {
  width: 96px;
  height: 96px;
}

.candidateCard h1 {
  font-size: 36px;
  line-height: 1.12;
  font-weight: 800;
}

.candidateCard p {
  color: #475569;
  font-size: 18px;
  line-height: 1.55;
}

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

.checkboxLine {
  grid-column: 1 / -1;
  grid-template-columns: 22px 1fr;
  align-items: center;
  text-transform: none;
  color: #334155;
}

.checkboxLine input {
  min-height: auto;
}

.questionList {
  display: grid;
  gap: 12px;
}

.questionList.compact {
  grid-column: 1 / -1;
}

.questionCard {
  padding: 16px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #fff;
}

.questionHead {
  margin-bottom: 10px;
  color: #64748B;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

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

.answer {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #F8FAFC;
  color: #0F172A;
  text-transform: none;
  font-size: 14px;
  font-weight: 700;
}

.answer input {
  min-height: auto;
}

.answer:has(input:checked) {
  border-color: var(--blue);
  background: #EFF6FF;
}

.answersHint {
  margin: 0 0 2px;
  font-size: 12px;
  color: #64748B;
  font-weight: 600;
}

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

.scaleCell {
  position: relative;
  flex: 1 1 44px;
  min-width: 44px;
  text-align: center;
  padding: 12px 0;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #F8FAFC;
  color: #0F172A;
  font-weight: 700;
  cursor: pointer;
}

.scaleCell input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.scaleCell:has(input:checked) {
  border-color: var(--blue);
  background: #EFF6FF;
  color: var(--blue);
}

.openAnswer {
  width: 100%;
  padding: 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #F8FAFC;
  color: #0F172A;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.openAnswer:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
}

/* ═══ Прохождение теста: стартовый экран + пошаговый мастер ═══ */
.assessPage { padding-top: 56px; padding-bottom: 56px; }

/* — Стартовый экран — */
.assessIntro {
  width: min(440px, 100%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid #E8EEF6;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
  padding: 36px 36px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.assessIntroIcon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: rgba(0, 184, 156, .12);
  color: #00B89C;
  margin-bottom: 18px;
}
.assessIntroTitle { margin: 0; font-size: 24px; font-weight: 800; color: #0F172A; text-align: center; }
.assessIntroSub { margin: 6px 0 22px; font-size: 14px; color: #64748B; text-align: center; }
.assessInfoBox {
  width: 100%;
  background: #EFF5FF;
  border: 1px solid #DCE8FB;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.assessSubject {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: #FFF7E6; border: 1px solid #F2D98B; color: #7A5A12;
  border-radius: 10px; padding: 11px 14px; margin-bottom: 18px;
  font-size: 13.5px;
}
.assessSubject b { color: #5A4310; }
.assessWizard .assessSubject { margin-bottom: 18px; }
.assessInfoBox ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.assessInfoBox li { font-size: 13.5px; color: #334155; }
.assessInfoBox b { color: #0F172A; }
.assessField { width: 100%; display: block; margin-bottom: 16px; }
.assessField span { display: block; font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 7px; }
.assessField input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #DCE3ED;
  border-radius: 10px;
  background: #F8FAFC;
  color: #0F172A;
  font-size: 14px;
}
.assessField input:focus { outline: none; border-color: var(--blue); background: #fff; }
.assessStartBtn {
  width: 100%;
  margin-top: 6px;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #4F8DF7, #6CA0F8);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.assessStartBtn:hover { filter: brightness(1.05); }
.assessStartBtn:active { transform: translateY(1px); }

/* — Пошаговый мастер — */
.assessWizard { width: min(760px, 100%); margin: 0 auto; }
.assessTopbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.assessTopLeft h1 { margin: 0; font-size: 24px; font-weight: 800; color: #0F172A; }
.assessQCount { font-size: 13.5px; color: #64748B; }
.assessTimer {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 17px; font-weight: 700; color: #475569;
  background: #fff; border: 1px solid #E8EEF6; border-radius: 10px;
  padding: 7px 13px;
  flex-shrink: 0;
}
.assessTimer.urgent { color: #DC2626; border-color: rgba(220, 38, 38, .3); background: rgba(220, 38, 38, .05); }

.assessProgress { height: 8px; border-radius: 99px; background: #E2EAF5; overflow: hidden; margin-bottom: 22px; }
.assessProgressFill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2563EB, #4F8DF7); transition: width .3s ease; }

.assessQCard {
  background: #fff;
  border: 1px solid #E8EEF6;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(15, 23, 42, .06);
  padding: 26px 26px 24px;
  margin-bottom: 22px;
}
.assessQCard h2 { margin: 0 0 18px; font-size: 19px; font-weight: 800; color: #0F172A; line-height: 1.35; }
.assessHint { margin: 0 0 12px; font-size: 12.5px; color: #64748B; font-weight: 600; }

.assessOpts { display: flex; flex-direction: column; gap: 10px; }
.assessOpt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px;
  border: 1px solid #E2E8F0;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.assessOpt:hover { border-color: #C5D5EE; background: #FAFCFF; }
.assessOpt input { position: absolute; opacity: 0; width: 0; height: 0; }
.assessOptMark {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border: 2px solid #CBD5E1; border-radius: 50%;
  position: relative; transition: border-color .12s;
}
.assessOptMark.square { border-radius: 6px; }
.assessOptText { font-size: 14.5px; color: #334155; line-height: 1.45; }
.assessOpt.selected { border-color: var(--blue); background: #EFF6FF; }
.assessOpt.selected .assessOptMark { border-color: var(--blue); }
.assessOpt.selected .assessOptMark::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: inherit; background: var(--blue);
}
.assessOpt.selected .assessOptMark.square::after { inset: 2px; }
.assessOpt.selected .assessOptText { color: #0F172A; font-weight: 600; }

.assessScale { display: flex; gap: 10px; flex-wrap: wrap; }
.assessScaleCell {
  position: relative; flex: 1 1 48px; min-width: 48px; text-align: center;
  padding: 14px 0; border: 1px solid #E2E8F0; border-radius: 11px;
  background: #fff; color: #334155; font-weight: 700; font-size: 16px; cursor: pointer;
}
.assessScaleCell input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.assessScaleCell.selected { border-color: var(--blue); background: #EFF6FF; color: var(--blue); }

.assessOpen {
  width: 100%; padding: 13px 15px; border: 1px solid #E2E8F0; border-radius: 11px;
  background: #FAFCFF; color: #0F172A; font-size: 14.5px; font-family: inherit; resize: vertical;
}
.assessOpen:focus { outline: none; border-color: var(--blue); background: #fff; }

.assessNav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.assessNavBtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px; border-radius: 10px;
  border: 1px solid #DCE3ED; background: #fff; color: #475569;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all .12s;
}
.assessNavBtn:hover:not(:disabled) { border-color: #C5D5EE; background: #F8FAFC; }
.assessNavBtn:disabled { opacity: .45; cursor: not-allowed; }
.assessNavBtn.primary {
  border: none; color: #fff;
  background: linear-gradient(135deg, #4F8DF7, #6CA0F8);
}
.assessNavBtn.primary:hover:not(:disabled) { filter: brightness(1.05); }
.assessNavBtn.primary:disabled { background: #B9CDF3; opacity: 1; }

.assessDots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; flex: 1; min-width: 0; max-width: 100%; }
.assessDot { width: 9px; height: 9px; border-radius: 50%; background: #CBD8EC; transition: background .15s, transform .15s; }
.assessDot.done { background: #93B4F0; }
.assessDot.active { background: var(--blue); transform: scale(1.25); }

.assessNote {
  margin-top: 22px; padding: 13px 16px;
  background: #EFF5FF; border: 1px solid #DCE8FB; border-radius: 10px;
  font-size: 13px; color: #4569A8; text-align: center;
}

@media (max-width: 560px) {
  .assessTopbar { flex-direction: column; }
  .assessIntro { padding: 28px 22px; }
}

.thanks {
  max-width: 620px;
  margin: 12vh auto 0;
  text-align: center;
  place-items: center;
}

.thanks img {
  width: 96px;
}

.reportPage {
  max-width: 980px;
  margin: 0 auto;
}

.reportToolbar {
  justify-content: space-between;
  margin-bottom: 16px;
}

.reportSheet {
  background: #fff;
  color: var(--navy);
  border-radius: 8px;
  padding: 42px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .18);
}

.reportHeader {
  padding-bottom: 22px;
  border-bottom: 1px solid #D8DEE8;
  margin-bottom: 26px;
}

.reportHeader img {
  width: 210px;
}

.reportHeader div {
  display: grid;
  gap: 4px;
  text-align: right;
  color: #475467;
  font-size: 13px;
}

.reportSheet h1 {
  max-width: 820px;
  margin-bottom: 14px;
  font-size: 36px;
  line-height: 1.08;
}

.reportLead {
  color: #475467;
  font-size: 17px;
}

.decisionBox {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  align-items: center;
  margin: 24px 0;
  padding: 22px;
  border-radius: 8px;
  border: 1px solid #BFEFFF;
  background: #F3FBFF;
}

.decisionBox.middle {
  border-color: #FEDF89;
  background: #FFFAEB;
}

.decisionBox.bad {
  border-color: #FECDCA;
  background: #FFFBFA;
}

.decisionScore {
  display: grid;
  place-items: center;
  min-height: 140px;
  border-radius: 8px;
  background: var(--positive);
  color: var(--navy);
  font-size: 42px;
  font-weight: 900;
}

.decisionBox.middle .decisionScore {
  background: var(--status-medium-bg);
  color: var(--status-medium-text);
}

.decisionBox.bad .decisionScore {
  background: var(--status-bad-bg);
  color: var(--status-bad-text);
}

.decisionScore span {
  font-size: 12px;
}

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

.reportStat,
.reportTwo > div {
  border: 1px solid #D8DEE8;
  border-radius: 8px;
  padding: 16px;
}

.reportStat span {
  display: block;
  color: #475467;
  font-size: 12px;
  font-weight: 900;
}

.reportStat b {
  display: block;
  margin-top: 6px;
  font-size: 26px;
}

.reportTwo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.reportTwo li,
.reportTwo p {
  color: #344054;
  line-height: 1.55;
}

.competencyReport {
  margin-top: 20px;
}

.reportCompetency {
  display: grid;
  grid-template-columns: 220px 1fr 54px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #EEF2F7;
}

.reportCompetency i {
  height: 10px;
  border-radius: 999px;
  background: #E8EEF6;
  overflow: hidden;
}

.reportCompetency b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.reportFooter {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #D8DEE8;
  color: #475467;
  font-size: 13px;
}

.referralGrid {
  margin-bottom: 16px;
}

.referralCard {
  display: grid;
  gap: 12px;
  grid-column: span 2;
}

.balanceBox {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(0, 229, 212, .26);
  border-radius: 8px;
  background: rgba(0, 229, 212, .1);
  padding: 8px;
}

.balanceBox span,
.balanceBox em {
  display: block;
  color: var(--mutedDark);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.balanceBox b {
  display: block;
  color: var(--cyan);
  font-size: 22px;
  line-height: 1;
}

.balanceBox.low {
  border-color: rgba(0, 229, 212, .26);
  background: rgba(0, 229, 212, .1);
}

.balanceBox.low b,
.balanceBox.low em {
  color: var(--cyan);
}

.balanceBox button {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  min-height: 36px;
  padding: 8px 10px;
  font-weight: 900;
}

.iconButton,
.profileButton {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: inherit;
  font-size: 18px;
  font-weight: 900;
}

.profileButton {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  font-size: 13px;
}

.filterBar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.filterBar button {
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: inherit;
  min-height: 38px;
  padding: 8px 11px;
  font-weight: 900;
}

.filterBar button.active {
  border-color: rgba(0, 229, 212, .5);
  background: rgba(0, 229, 212, .12);
  color: var(--cyan);
}

.filterBar.compact button {
  min-height: 34px;
  font-size: 12px;
}

.dashboardTop {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.tariffSummary {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.tariffSummary span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.tariffSummary h2 {
  margin: 0;
  font-size: 28px;
}

.kpiGrid.smart {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.funnelSteps {
  display: grid;
  gap: 10px;
}

.funnelStep {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: inherit;
  padding: 12px;
  text-align: left;
}

.funnelStep.active {
  border-color: var(--cyan);
  background: rgba(0, 229, 212, .12);
}

.funnelStep > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 900;
}

.funnelStep span {
  color: var(--mutedDark);
}

.funnelStep i {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .22);
  overflow: hidden;
}

.funnelStep em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}

.aiAssistantCard {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(30, 91, 255, .28);
  border-radius: 8px;
  background: rgba(30, 91, 255, .1);
  padding: 16px;
}

.aiAssistantCard b {
  color: #fff;
  font-size: 20px;
}

.aiAssistantCard p {
  color: #D6E2F5;
}

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

.featureLocks span,
.lockedList em {
  display: inline-flex;
  gap: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  padding: 6px 9px;
  color: #D6E2F5;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.integrationStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(0, 229, 212, .26);
  border-radius: 8px;
  background: rgba(0, 229, 212, .08);
  padding: 14px;
  margin-bottom: 16px;
}

.integrationStrip span {
  color: var(--mutedDark);
  flex: 1;
}

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

.vacancyCard {
  display: grid;
  gap: 12px;
  padding: 18px;
}

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

.vacancyStats.inline {
  grid-template-columns: repeat(4, auto);
  justify-content: start;
}

.vacancyStats div {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  padding: 9px;
}

.vacancyStats span {
  display: block;
  color: var(--mutedDark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.vacancyStats b {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.vacancyStats button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--cyan);
  font-weight: 900;
}

.compactTable table {
  min-width: 940px;
}

.compactTable small {
  display: block;
  margin-top: 4px;
  color: var(--mutedDark);
}

.lightTheme .compactTable small {
  color: var(--mutedLight);
}

.tagRow {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.tagRow span,
.lockBadge {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  color: var(--mutedDark);
  font-size: 11px;
  font-weight: 800;
}

.aiNoteInline {
  border-left: 3px solid var(--cyan);
  padding-left: 10px;
  color: #D6E2F5;
}

.cardActions,
.rowActions,
.bonusOptions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

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

.profileCard.compact {
  position: relative;
  min-height: 210px;
  padding: 16px 76px 16px 16px;
}

.profileIcon {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(0, 229, 212, .34);
  border-radius: 12px;
  background: rgba(0, 229, 212, .1);
  color: var(--cyan);
  font-size: 24px;
  box-shadow: 0 0 24px rgba(0, 229, 212, .12);
}

.profileMeta {
  display: grid;
  gap: 6px;
  margin: 6px 0;
}

.profileMeta b {
  color: var(--mutedDark);
  font-size: 12px;
}

.linkForm.expanded {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.formWarning {
  grid-column: span 3;
  align-self: center;
  color: var(--warning);
  font-size: 13px;
  font-weight: 800;
}

.warnText,
small {
  display: block;
  color: var(--warning);
  font-size: 12px;
  font-weight: 800;
}

.dangerGhost {
  border-color: var(--status-bad-border) !important;
  color: var(--danger) !important;
  background: var(--status-bad-bg) !important;
}

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

.orgNode {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  padding: 14px;
}

.orgNode span,
.orgNode em {
  color: var(--mutedDark);
  font-size: 13px;
  font-style: normal;
}

.orgNode em {
  color: var(--warning);
  font-weight: 900;
}

.lockedList {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 7px;
}

.lockedList b {
  width: 100%;
  color: var(--mutedDark);
  font-size: 12px;
}

.tariffCard {
  grid-template-rows: auto auto auto auto 1fr auto auto;
}

.modalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(5, 8, 22, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 24px;
  animation: backdropIn .18s ease;
}

@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  width: min(560px, 100%);
  display: grid;
  gap: 0;
  padding: 0;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid rgba(30, 91, 255, .22);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(17, 26, 51, .96) 0%, rgba(11, 16, 32, .98) 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .52), 0 0 0 1px rgba(30, 91, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: modalIn .2s cubic-bezier(.16,1,.3,1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.modal-inner {
  display: grid;
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
  max-height: calc(100vh - 48px);
}

.modal-inner::-webkit-scrollbar { width: 4px; }
.modal-inner::-webkit-scrollbar-track { background: transparent; }
.modal-inner::-webkit-scrollbar-thumb { background: rgba(30,91,255,.28); border-radius: 4px; }

.modalWide {
  width: min(900px, 100%);
}

/* ── Modal head ── */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid rgba(30, 91, 255, .14);
  background: linear-gradient(180deg, rgba(30, 91, 255, .06) 0%, transparent 100%);
  flex-shrink: 0;
}

.modal-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.modal-head-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(30, 91, 255, .22), rgba(0, 229, 212, .14));
  border: 1px solid rgba(30, 91, 255, .24);
  font-size: 16px;
  flex-shrink: 0;
}

.modal-head-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #E6F2FF;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-close-btn {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  border: 1px solid rgba(30, 91, 255, .2);
  border-radius: 8px;
  background: rgba(30, 91, 255, .08);
  color: rgba(230, 242, 255, .55);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.modal-close-btn:hover {
  background: rgba(30, 91, 255, .18);
  border-color: rgba(30, 91, 255, .4);
  color: #E6F2FF;
}

.modal-subtitle {
  margin: 0;
  color: rgba(230, 242, 255, .5);
  font-size: 13px;
  line-height: 1.5;
}

/* ── «Добавить из HeadHunter» ── */
.hh-import-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hh-import-search {
  width: 280px;
  flex: 1 1 auto;
  max-width: 100%;
  height: 38px;
  border-radius: 11px;
}
.hh-import-search:focus-within { width: 280px; }
.hh-import-search .elt-search { font-size: 13px; }
.hh-import-count {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(230, 242, 255, .5);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(30, 91, 255, .1);
  border: 1px solid rgba(30, 91, 255, .18);
  white-space: nowrap;
}

.hh-import-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  margin: -2px;
  padding: 2px;
}
.hh-import-list::-webkit-scrollbar { width: 6px; }
.hh-import-list::-webkit-scrollbar-track { background: transparent; }
.hh-import-list::-webkit-scrollbar-thumb { background: rgba(30, 91, 255, .28); border-radius: 4px; }

.hh-import-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid rgba(30, 91, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.hh-import-row:hover {
  border-color: rgba(30, 91, 255, .4);
  background: rgba(30, 91, 255, .07);
}
.hh-import-row:active { transform: scale(.995); }

.hh-import-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.hh-import-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(230, 242, 255, .28);
  background: rgba(255, 255, 255, .03);
  display: grid;
  place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.hh-import-box::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  margin-top: -2px;
  transition: transform .16s cubic-bezier(.16, 1, .3, 1);
}
.hh-import-check:checked ~ .hh-import-box {
  background: linear-gradient(135deg, #1E5BFF, #2f6bff);
  border-color: #1E5BFF;
}
.hh-import-check:checked ~ .hh-import-box::after { transform: rotate(-45deg) scale(1); }
.hh-import-check:focus-visible ~ .hh-import-box {
  box-shadow: 0 0 0 3px rgba(30, 91, 255, .3);
}
.hh-import-row:has(.hh-import-check:checked) {
  border-color: rgba(30, 91, 255, .55);
  background: rgba(30, 91, 255, .1);
}

.hh-import-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.hh-import-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #E6F2FF;
  line-height: 1.35;
}
.hh-import-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(230, 242, 255, .45);
}
.hh-import-resp {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 229, 212, .1);
  border: 1px solid rgba(0, 229, 212, .18);
  color: rgba(0, 229, 212, .85);
  font-weight: 600;
  font-size: 11px;
}

.hh-import-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  border: 1px dashed rgba(30, 91, 255, .2);
  border-radius: 12px;
  color: rgba(230, 242, 255, .5);
  font-size: 13px;
  text-align: center;
}
.hh-import-state--error { border-color: rgba(248, 113, 113, .35); color: #F87171; }
.hh-import-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(30, 91, 255, .25);
  border-top-color: #1E5BFF;
  animation: hhSpin .7s linear infinite;
}
@keyframes hhSpin { to { transform: rotate(360deg); } }

.hh-import-error {
  margin: 0;
  font-size: 12.5px;
  color: #F87171;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(248, 113, 113, .08);
  border: 1px solid rgba(248, 113, 113, .22);
}

.hh-connect-modal { max-width: 460px; }
.hh-connect-steps {
  margin: 14px 0 4px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: hhstep;
}
.hh-connect-steps li {
  position: relative;
  padding-left: 34px;
  font-size: 13px;
  line-height: 1.45;
  color: #C7D0E0;
  counter-increment: hhstep;
}
.hh-connect-steps li::before {
  content: counter(hhstep);
  position: absolute;
  left: 0;
  top: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--accent, #5B8CFF);
}

/* ── Modal table ── */
.modal-inner table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.modal-inner table thead tr {
  border-bottom: 1px solid rgba(30, 91, 255, .16);
}

.modal-inner table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: rgba(230, 242, 255, .38);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.modal-inner table td {
  padding: 10px 12px;
  color: rgba(230, 242, 255, .82);
  border-bottom: 1px solid rgba(30, 91, 255, .07);
  vertical-align: middle;
}

.modal-inner table tr:last-child td {
  border-bottom: none;
}

.modal-inner table tr:hover td {
  background: rgba(30, 91, 255, .04);
}

/* ── Modal row actions ── */
.modal-inner .rowActions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.modal-inner .rowActions .button.subtle {
  padding: 4px 10px;
  font-size: 12px;
  height: auto;
  min-height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(30, 91, 255, .28);
  background: rgba(30, 91, 255, .1);
  color: rgba(230, 242, 255, .8);
  font-weight: 600;
  transition: background .15s, border-color .15s;
}

.modal-inner .rowActions .button.subtle:hover {
  background: rgba(30, 91, 255, .2);
  border-color: rgba(30, 91, 255, .5);
  color: #E6F2FF;
}

/* ── Modal score & badge ── */
.modal-score {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* Балл и бейдж соответствия используют единую палитру по статусу,
   чтобы в одной строке они всегда были одного цвета. */
.modal-score-good,   .modal-badge-good    { background: rgba(34, 197, 94, .12);  color: #22C55E; border: 1px solid rgba(34, 197, 94, .28); }
.modal-score-medium, .modal-badge-medium  { background: rgba(217, 164, 65, .12); color: #D9A441; border: 1px solid rgba(217, 164, 65, .28); }
.modal-score-bad,    .modal-badge-bad     { background: rgba(248, 113, 113, .12); color: #F87171; border: 1px solid rgba(248, 113, 113, .28); }
.modal-score-neutral, .modal-badge-neutral { background: rgba(30, 91, 255, .10);  color: #5B8CFF; border: 1px solid rgba(30, 91, 255, .24); }

.modal-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.modal-td-name { font-weight: 600; color: #E6F2FF; }
.modal-td-role { color: rgba(230, 242, 255, .6); font-size: 12.5px; }
.modal-td-date { color: rgba(230, 242, 255, .45); font-size: 12px; white-space: nowrap; }

.tariffPicker,
.competencyModalGrid,
.constructorGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.constructorWorkspace {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(360px, 1.35fr) minmax(300px, .95fr);
  gap: 14px;
}

.builderPanel,
.competencyLibrary,
.aiRolePanel,
.competenceImport {
  padding: 16px;
}

.competencyLibrary {
  display: grid;
  gap: 14px;
}

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

.competencyGroup h3 {
  margin: 0;
  color: var(--cyan);
  font-size: 14px;
}

.competencyGroup div,
.aiSuggestion {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.competencyGroup button,
.aiSuggestion span {
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: inherit;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 850;
}

.aiRolePanel {
  display: grid;
  gap: 12px;
  align-content: start;
  border-color: rgba(0, 229, 212, .28);
  background: linear-gradient(135deg, rgba(30, 91, 255, .12), rgba(0, 229, 212, .06));
}

.aiSuggestion {
  border-top: 1px solid rgba(148, 163, 184, .18);
  padding-top: 12px;
}

.aiSuggestion b {
  width: 100%;
  color: var(--cyan);
}

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

.importFlow > div {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, .035);
}

.importFlow p,
.reviewNote {
  margin: 0;
  color: var(--mutedDark);
  font-size: 13px;
}

.reviewNote {
  margin-top: 12px;
  border-left: 3px solid var(--cyan);
  padding-left: 10px;
}

.gratitudeHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 82% 14%, rgba(0, 229, 212, .12), transparent 32%),
    linear-gradient(135deg, rgba(30, 91, 255, .14), rgba(255, 255, 255, .035));
}

.gratitudeHero h2 {
  margin-bottom: 8px;
}

.gratitudeHero p,
.gratitudeCard p,
.gratitudeNews p {
  margin: 0;
  color: var(--mutedDark);
}

.lightTheme .gratitudeHero p,
.lightTheme .gratitudeCard p,
.lightTheme .gratitudeNews p {
  color: var(--mutedLight);
}

.gratitudeStats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: baseline;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, .04);
}

.gratitudeStats strong {
  color: var(--cyan);
  font-size: 28px;
  line-height: 1;
}

.gratitudeStats span {
  color: var(--mutedDark);
  font-size: 12px;
  font-weight: 850;
}

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

.gratitudeCard {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.gratitudeCard .panelHead span {
  border: 1px solid var(--status-neutral-border);
  border-radius: 999px;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
  padding: 5px 8px;
  font-size: 11px;
}

.gratitudeResult {
  border-left: 3px solid var(--cyan);
  padding-left: 10px;
}

.gratitudeResult span {
  display: block;
  margin-bottom: 4px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gratitudeNews {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.gratitudeNews > div:not(.panelHead) {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-top: 1px solid rgba(148, 163, 184, .16);
  padding-top: 12px;
}

.gratitudeNews time {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
}

.apiGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.apiCard {
  display: grid;
  gap: 10px;
  min-height: 210px;
  min-width: 0;
  padding: 16px;
  align-content: start;
}

.apiCard.primary {
  grid-column: span 2;
  background:
    radial-gradient(circle at 88% 12%, rgba(0, 229, 212, .12), transparent 34%),
    linear-gradient(135deg, rgba(30, 91, 255, .15), rgba(255, 255, 255, .035));
}

.apiCard span {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.apiCard h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 22px;
}

.apiCard p {
  margin: 0;
  color: var(--mutedDark);
}

.lightTheme .apiCard p {
  color: var(--mutedLight);
}

.apiCard code,
.apiDocs code,
.apiSecret {
  overflow-wrap: anywhere;
  color: #DCE9FF;
}

.apiSecret {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, .04);
}

.apiDocs {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

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

.apiDocs pre {
  margin: 0;
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  padding: 14px;
  background: rgba(11, 16, 32, .58);
}

.apiDocs pre code {
  display: block;
  max-width: 100%;
  white-space: pre-wrap;
}

.tariffMini {
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.tariffMini span,
.answersPreview em,
.personCard > span {
  color: var(--mutedDark);
  font-size: 13px;
  line-height: 1.45;
}

.answersPreview,
.personCard,
.profileExplain {
  display: grid;
  gap: 10px;
}

.answersPreview div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
}

.answersPreview span {
  color: var(--cyan);
  font-weight: 900;
}

.answersPreview em {
  font-style: normal;
}

.personCard > b {
  font-size: 24px;
}

.personCard dl {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px 14px;
  margin: 0;
}

.personCard dt {
  color: var(--mutedDark);
}

.personCard dd {
  margin: 0;
  font-weight: 800;
}

/* Оценки сотрудника по тестам (в карточке) */
.emp-assess {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, .18);
  display: grid;
  gap: 10px;
}
.emp-assess-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--mutedDark);
}
.emp-assess-head em { font-style: normal; opacity: .8; }
.emp-assess-avg { display: inline-flex; align-items: center; gap: 8px; color: #E6F2FF; font-weight: 800; font-size: 15px; }
.emp-assess-list { display: grid; gap: 6px; }
.emp-assess-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
}
.emp-assess-test { font-size: 13px; font-weight: 600; color: #E6F2FF; }
.emp-assess-empty { font-size: 13px; color: var(--mutedDark); margin: 0; }
.emp-assess-answers { margin-top: 4px; justify-self: start; }

/* Выбор теста в модалке «Ответы» */
.answersTestPick { display: grid; gap: 8px; }
.answersTestPickItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: #E6F2FF;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.answersTestPickItem:hover { border-color: rgba(30, 91, 255, .5); background: rgba(30, 91, 255, .08); }
.answersTestPickName { font-size: 14px; font-weight: 600; }

.miniChart {
  display: grid;
  gap: 10px;
}

.miniChart div {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(80px, 2fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.miniChart i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .18);
}

.miniChart b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.miniChart strong {
  font-size: 12px;
}

.profileRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: inherit;
  text-align: left;
}

.orgPanel,
.constructorGrid {
  position: relative;
}

.orgRoot {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(30, 91, 255, .18), rgba(0, 229, 212, .08));
}

.guardedFeature {
  position: relative;
}

.lockedFeature,
.guardedFeature {
  filter: grayscale(.18);
}

.lockedOverlay {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100% - 36px));
  max-width: 100%;
  padding: 16px;
  border: 1px solid rgba(0, 229, 212, .22);
  border-radius: 12px;
  background: rgba(10, 15, 30, .90);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  text-align: left;
  z-index: 4;
}

.lockedOverlay b {
  color: #fff;
  line-height: 1.25;
}

.lockedOverlay p {
  margin: 0;
  color: var(--mutedDark);
  font-size: 13px;
  line-height: 1.45;
}

.lockedOverlay .blueButton {
  justify-self: start;
}

.isLocked {
  position: relative;
  opacity: .72;
  cursor: pointer;
}

.disabled {
  opacity: .58;
}

.dangerZone {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--status-bad-border);
  padding-top: 14px;
}

.dangerButton {
  border: 1px solid var(--status-bad-border);
  border-radius: 8px;
  background: var(--status-bad-bg);
  color: var(--status-bad-text);
  min-height: 42px;
  padding: 10px 14px;
  font-weight: 900;
}

.lightTheme .balanceBox span,
.lightTheme .integrationStrip span,
.lightTheme .funnelStep span,
.lightTheme .vacancyStats span,
.lightTheme .profileMeta b,
.lightTheme .orgNode span,
.lightTheme .orgNode em,
.lightTheme .lockedList b {
  color: var(--mutedLight);
}

.lightTheme .aiAssistantCard b {
  color: var(--navy);
}

.lightTheme .aiAssistantCard p,
.lightTheme .aiNoteInline {
  color: #344054;
}

.lightTheme .featureLocks span,
.lightTheme .lockedList em {
  background: rgba(15, 23, 42, .06);
  color: #344054;
}

@media (max-width: 1100px) {
  .landingHeader,
  .hero,
  .twoCols,
  .authPage,
  .reportPreview,
  .appShell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
  }

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

  .productGrid,
  .tariffGrid,
  .profileGrid,
  .profileGrid.compactProfiles,
  .kpiGrid,
  .kpiGrid.smart,
  .dashboardGrid,
  .analyticsGrid,
  .attentionList,
  .dashboardTop,
  .linkForm,
  .linkForm.expanded,
  .reportStats,
  .referralGrid,
  .apiGrid,
  .gratitudeGrid,
  .vacancyGrid,
  .constructorWorkspace,
  .importFlow,
  .orgTree {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .landingHeader,
  .appTopbar,
  .pageHead,
  .landingFooter,
  .reportHeader,
  .decisionBox,
  .reportTwo,
  .candidateForm,
  .settingsGrid,
  .productGrid,
  .tariffGrid,
  .profileGrid,
  .profileGrid.compactProfiles,
  .kpiGrid,
  .kpiGrid.smart,
  .dashboardGrid,
  .analyticsGrid,
  .attentionList,
  .dashboardTop,
  .linkForm,
  .linkForm.expanded,
  .reportStats,
  .referralGrid,
  .apiGrid,
  .gratitudeGrid,
  .vacancyGrid,
  .constructorWorkspace,
  .importFlow,
  .orgTree {
    display: grid;
    grid-template-columns: 1fr;
  }

  .formWarning {
    grid-column: auto;
  }

  .profileCard.compact {
    padding-right: 16px;
  }

  .gratitudeHero,
  .gratitudeNews > div:not(.panelHead) {
    grid-template-columns: 1fr;
  }

  .apiCard.primary {
    grid-column: auto;
  }

  .lockedOverlay {
    position: sticky;
    top: 12px;
    right: auto;
    width: auto;
    margin: 12px;
  }

  .profileIcon {
    position: static;
  }

  .hero {
    padding-top: 40px;
  }

  .heroCopy h1,
  .authBrand h1 {
    font-size: 38px;
  }

  .reportSheet {
    padding: 24px;
  }

  .reportSheet h1 {
    font-size: 28px;
  }

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

@media print {
  body {
    background: #fff !important;
  }

  .noPrint,
  .sidebar,
  .appTopbar {
    display: none !important;
  }

  .appShell,
  .appMain,
  .appContent,
  .reportPage {
    display: block;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .reportSheet {
    box-shadow: none;
    border-radius: 0;
    padding: 20mm;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ELTERA PREMIUM DASHBOARD — Executive Dashboard Styles v2
   Design: dark navy, blue-cyan accents, Manrope, glass/liquid cards
   Palette: #0A0F1E #0B1020 #111A33 #1E5BFF #00E5D4 #E6F2FF #FFFFFF
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard Layout ────────────────────────────────────────────────────── */

.elt-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 48px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.elt-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.elt-dash-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elt-mini-label {
  display: block;
  color: var(--cyan, #00E5D4);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: .85;
}

.elt-dash-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #E6F2FF);
  margin: 0;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.elt-dash-subtitle {
  font-size: 12px;
  color: rgba(230,242,255,.4);
  margin: 0;
  line-height: 1.4;
}

.elt-dash-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.elt-btn-ghost {
  background: rgba(30,91,255,.08);
  border: 1px solid rgba(30,91,255,.25);
  color: rgba(230,242,255,.8);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.elt-btn-ghost:hover {
  background: rgba(30,91,255,.16);
  border-color: rgba(30,91,255,.45);
}

.elt-btn-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #1E5BFF, #0040CC);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.elt-btn-primary:hover { opacity: .88; transform: translateY(-1px); }

/* ── Filter Bar ──────────────────────────────────────────────────────────── */

.elt-filter-bar {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.elt-filter-sep {
  width: 1px;
  height: 18px;
  background: rgba(230,242,255,.12);
  align-self: center;
  margin: 0 4px;
  flex-shrink: 0;
}

.elt-pill {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(230,242,255,.5);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.elt-pill:hover {
  background: rgba(30,91,255,.12);
  border-color: rgba(30,91,255,.3);
  color: rgba(230,242,255,.85);
}
.elt-pill.active {
  background: rgba(30,91,255,.2);
  border-color: rgba(30,91,255,.5);
  color: #E6F2FF;
  font-weight: 600;
}

/* ── KPI Grid ────────────────────────────────────────────────────────────── */

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

@media (max-width: 1100px) {
  .elt-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .elt-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .elt-kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ── KPI Card ────────────────────────────────────────────────────────────── */

.elt-kpi {
  background: rgba(17,26,51,.8);
  border: 1px solid rgba(30,91,255,.18);
  border-radius: 12px;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .15s;
  cursor: default;
}
.elt-kpi.clickable { cursor: pointer; }
.elt-kpi.clickable:hover {
  border-color: rgba(30,91,255,.4);
  transform: translateY(-2px);
}

.elt-kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  border-radius: 14px 14px 0 0;
  transition: background .2s;
}
.elt-kpi.status-good::before  { background: linear-gradient(90deg, #00E5D4, #22C55E); }
.elt-kpi.status-medium::before { background: linear-gradient(90deg, #D9A441, #B8860B); }
.elt-kpi.status-bad::before   { background: linear-gradient(90deg, #F87171, #DC2626); }
.elt-kpi.status-neutral::before { background: linear-gradient(90deg, #1E5BFF, #0040CC); }

.elt-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.elt-kpi-icon {
  color: rgba(230,242,255,.35);
  display: flex;
  align-items: center;
}

.elt-kpi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
  margin-top: 2px;
}
.elt-kpi.status-good  .elt-kpi-dot { background: #00E5D4; box-shadow: 0 0 6px #00E5D4; }
.elt-kpi.status-medium .elt-kpi-dot { background: #D9A441; box-shadow: 0 0 6px rgba(217,164,65,.6); }
.elt-kpi.status-bad   .elt-kpi-dot { background: #F87171; box-shadow: 0 0 6px rgba(248,113,113,.6); }
.elt-kpi.status-neutral .elt-kpi-dot { background: #1E5BFF; box-shadow: 0 0 6px #1E5BFF; }

.elt-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: #E6F2FF;
  letter-spacing: -.02em;
  line-height: 1;
}

.elt-kpi-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.elt-kpi-label {
  font-size: 12px;
  color: rgba(230,242,255,.6);
  font-weight: 500;
}

.elt-kpi-trend {
  font-size: 11px;
  color: #F59E0B;
  font-weight: 600;
  background: rgba(245,158,11,.1);
  border-radius: 4px;
  padding: 1px 6px;
}

.elt-kpi-caption {
  font-size: 11px;
  color: rgba(230,242,255,.35);
  margin: 0;
  line-height: 1.4;
}

/* ── Analytics Grid ──────────────────────────────────────────────────────── */

.elt-analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.elt-wide {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .elt-analytics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .elt-analytics-grid { grid-template-columns: 1fr; }
}

/* ── Panel ───────────────────────────────────────────────────────────────── */

.elt-panel {
  background: rgba(17,26,51,.8);
  border: 1px solid rgba(30,91,255,.18);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s;
}
.elt-panel:hover { border-color: rgba(30,91,255,.2); }

.elt-chart-panel {
  display: flex;
  flex-direction: column;
}

/* ── Вакансии: карточки с воронкой подбора ── */
.vac-list-panel { padding: 18px; }
.vac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.vac-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 14px;
  background: rgba(11,16,32,.45);
  border: 1px solid rgba(30,91,255,.16);
  border-radius: 14px;
  transition: border-color .18s, transform .18s;
}
.vac-card:hover { border-color: rgba(30,91,255,.34); transform: translateY(-2px); }
.lightTheme .vac-card { background: rgba(255,255,255,.7); border-color: rgba(15,23,42,.09); }

.vac-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vac-card-titlewrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vac-card-title { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.25; }
.vac-card-meta { font-size: 11.5px; color: var(--mutedLight); }

.vac-card-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(148,163,184,.14);
  border-bottom: 1px solid rgba(148,163,184,.14);
}
.vac-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vac-metric b { font-size: 18px; font-weight: 700; line-height: 1; }
.vac-metric span { font-size: 10.5px; color: var(--mutedLight); text-align: center; }
.vac-metric b.conv-good { color: var(--status-good-text); }
.vac-metric b.conv-medium { color: var(--status-medium-text); }
.vac-metric b.conv-bad { color: var(--status-bad-text); }

.vac-card-funnel { display: flex; flex-direction: column; gap: 7px; }
.vac-funnel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mutedLight);
}
.vac-funnel-head span { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.vac-funnel { display: flex; flex-direction: column; gap: 5px; }
.vac-funnel-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 8px; }
.vac-funnel-label { font-size: 11.5px; color: var(--mutedDark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightTheme .vac-funnel-label { color: var(--mutedLight); }
.vac-funnel-track { height: 8px; border-radius: 5px; background: rgba(148,163,184,.16); overflow: hidden; }
.vac-funnel-fill { display: block; height: 100%; border-radius: 5px; background: var(--status-neutral-text); transition: width .3s; }
.vac-funnel-fill.status-good { background: var(--status-good-text); }
.vac-funnel-fill.status-medium { background: var(--status-medium-text); }
.vac-funnel-fill.status-bad { background: var(--status-bad-text); }
.vac-funnel-fill.status-neutral { background: var(--status-neutral-text); }
.vac-funnel-count { font-size: 12px; font-weight: 650; min-width: 26px; text-align: right; }
.vac-funnel-count em { font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--mutedLight); margin-left: 4px; }
.vac-funnel-empty { font-size: 12px; color: var(--mutedLight); padding: 4px 0; }

.vac-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vac-card-test { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; cursor: help; }
.vac-card-test-cap {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mutedLight);
}
.vac-card-test-info { color: var(--mutedLight); opacity: .7; flex: none; }
.vac-card-test-select { max-width: 100%; width: 100%; }
.vac-card-actions { display: flex; gap: 6px; }

.elt-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(30,91,255,.15);
  gap: 8px;
}

.elt-panel-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(230,242,255,.4);
}

.elt-panel-head-left h2 {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(230,242,255,.85);
  margin: 0;
}

.elt-panel-head h2 {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(230,242,255,.85);
  margin: 0;
}

.elt-panel-caption {
  font-size: 11.5px;
  color: rgba(230,242,255,.35);
  white-space: nowrap;
}

.elt-panel-badge {
  font-size: 11px;
  background: rgba(245,158,11,.12);
  color: #F59E0B;
  border-radius: 20px;
  padding: 2px 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Funnel ──────────────────────────────────────────────────────────────── */

.elt-funnel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  flex: 1;
}

.elt-funnel-step {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 8px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
  width: 100%;
}
.elt-funnel-step:hover {
  background: rgba(30,91,255,.1);
  border-color: rgba(30,91,255,.25);
}

.elt-funnel-row {
  display: contents;
}

.elt-funnel-label {
  font-size: 11px;
  color: rgba(230,242,255,.65);
  grid-column: 1;
  grid-row: 1;
}

.elt-funnel-count {
  font-size: 13px;
  font-weight: 700;
  color: #E6F2FF;
  grid-column: 2;
  grid-row: 1;
}

.elt-funnel-bar {
  height: 3px;
  background: rgba(255,255,255,.05);
  border-radius: 3px;
  overflow: hidden;
  grid-column: 1 / 3;
  grid-row: 2;
}

.elt-funnel-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #1E5BFF, #00E5D4);
  transition: width .4s ease;
}
.elt-funnel-step.status-good .elt-funnel-fill { background: linear-gradient(90deg, #00E5D4, #22C55E); }
.elt-funnel-step.status-medium .elt-funnel-fill { background: linear-gradient(90deg, #D9A441, #B8860B); }
.elt-funnel-step.status-bad .elt-funnel-fill { background: linear-gradient(90deg, #F87171, #DC2626); }

.elt-funnel-pct {
  font-size: 10px;
  color: rgba(230,242,255,.35);
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
}

/* ── Bar Chart ───────────────────────────────────────────────────────────── */

.elt-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  flex: 1;
}

.elt-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  align-items: center;
  gap: 10px;
}

.elt-bar-label {
  font-size: 12px;
  color: rgba(230,242,255,.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elt-bar-track {
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  overflow: hidden;
}

.elt-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #1E5BFF, #00E5D4);
  transition: width .4s ease;
}
.elt-bar-row.status-good .elt-bar-fill { background: linear-gradient(90deg, #00E5D4, #22C55E); }
.elt-bar-row.status-medium .elt-bar-fill { background: linear-gradient(90deg, #D9A441, #B8860B); }
.elt-bar-row.status-bad .elt-bar-fill { background: linear-gradient(90deg, #F87171, #DC2626); }

.elt-bar-value {
  font-size: 12.5px;
  font-weight: 700;
  color: #E6F2FF;
  text-align: right;
}

/* ── Radar ───────────────────────────────────────────────────────────────── */

.elt-radar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  flex: 1;
}

.elt-radar-svg {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}

.elt-radar-ring {
  fill: none;
  stroke: rgba(255,255,255,.06);
  stroke-width: 1;
}

.elt-radar-axis {
  stroke: rgba(255,255,255,.08);
  stroke-width: 1;
}

.elt-radar-data {
  fill: url(#radarGrad);
  stroke: #00E5D4;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.elt-radar-dot {
  fill: #00E5D4;
  stroke: #0B1020;
  stroke-width: 1.5;
}

.elt-radar-label {
  font-size: 9px;
  fill: rgba(230,242,255,.6);
  font-family: Manrope, sans-serif;
  font-weight: 500;
}

.elt-radar-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.elt-radar-legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.elt-radar-legend-item span {
  font-size: 11px;
  color: rgba(230,242,255,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elt-radar-legend-item b {
  font-size: 11.5px;
  font-weight: 700;
  color: #00E5D4;
  white-space: nowrap;
}

/* ── 9-Box ───────────────────────────────────────────────────────────────── */

.elt-9box {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  flex: 1;
  min-height: 0;
}

.elt-9box-ylabels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 16px;
  flex-shrink: 0;
}

.elt-9box-ylabels .elt-9box-axis-title {
  font-size: 8px;
  color: rgba(230,242,255,.3);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  margin-bottom: 3px;
}

.elt-9box-ylabels span {
  font-size: 7.5px;
  color: rgba(230,242,255,.35);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.elt-9box-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.elt-9box-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  flex: 1;
}

.elt-9box-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 6px;
  padding: 4px 3px;
  min-height: 44px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.04);
  transition: border-color .15s, background .15s;
}
.elt-9box-cell.status-good {
  background: rgba(0,229,212,.07);
  border-color: rgba(0,229,212,.2);
}
.elt-9box-cell.status-medium {
  background: rgba(217,164,65,.06);
  border-color: rgba(217,164,65,.15);
}
.elt-9box-cell.status-bad {
  background: rgba(248,113,113,.05);
  border-color: rgba(248,113,113,.15);
}

.elt-9box-cell-label {
  font-size: 7.5px;
  color: rgba(230,242,255,.4);
  text-align: center;
  line-height: 1.2;
}

.elt-9box-cell-count {
  font-size: 16px;
  font-weight: 700;
  color: #E6F2FF;
  line-height: 1;
}

.elt-9box-names {
  font-size: 7px;
  color: rgba(230,242,255,.3);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 2px;
}

.elt-9box-xlabels {
  display: flex;
  gap: 3px;
  padding-left: 0;
}

.elt-9box-xlabels .elt-9box-axis-title {
  font-size: 8px;
  color: rgba(230,242,255,.3);
  white-space: nowrap;
  width: 50px;
  flex-shrink: 0;
}

.elt-9box-xlabels span {
  flex: 1;
  font-size: 7.5px;
  color: rgba(230,242,255,.35);
  text-align: center;
}

/* ── Heatmap ─────────────────────────────────────────────────────────────── */

.elt-heatmap-wrap {
  padding: 12px 16px;
  overflow-x: auto;
}

.elt-heatmap {
  display: grid;
  grid-template-columns: 160px repeat(var(--heat-cols, 4), minmax(80px, 1fr));
  gap: 3px;
  min-width: 600px;
}

.elt-heatmap-head {
  display: contents;
}

.elt-heatmap-head span {
  display: block;
  padding: 6px 8px;
}

.elt-heatmap-head b {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(230,242,255,.4);
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elt-heatmap-row {
  display: contents;
}

.elt-heatmap-row-label {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: rgba(230,242,255,.7);
  padding: 4px 8px;
  font-weight: 500;
}

.elt-heat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 8px;
  padding: 8px 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .15s, transform .1s;
  background: rgba(255,255,255,.03);
  min-height: 48px;
}
.elt-heat-cell:hover {
  border-color: rgba(30,91,255,.35);
  transform: scale(1.03);
}

.elt-heat-cell.status-good {
  background: rgba(0,229,212,.1);
  border-color: rgba(0,229,212,.15);
}
.elt-heat-cell.status-medium {
  background: rgba(217,164,65,.08);
  border-color: rgba(217,164,65,.12);
}
.elt-heat-cell.status-bad {
  background: rgba(248,113,113,.08);
  border-color: rgba(248,113,113,.15);
}

.elt-heat-cell strong {
  font-size: 13px;
  font-weight: 700;
  color: #E6F2FF;
}

.elt-heat-cell span {
  font-size: 9.5px;
  color: rgba(230,242,255,.4);
}

/* ── Attention Panel ─────────────────────────────────────────────────────── */

.elt-attention {
  background: rgba(17,26,51,.8);
  border: 1px solid rgba(30,91,255,.18);
  border-radius: 12px;
  overflow: hidden;
}

.elt-attention-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(30,91,255,.08);
}

@media (max-width: 680px) {
  .elt-attention-list { grid-template-columns: 1fr; }
}

.elt-attention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(17,26,51,.8);
  cursor: pointer;
  border: none;
  text-align: left;
  transition: background .15s;
  width: 100%;
}
.elt-attention-item:hover { background: rgba(30,91,255,.08); }

.elt-attention-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.elt-attention-item.status-bad .elt-attention-icon {
  background: rgba(248,113,113,.12);
  color: #F87171;
}
.elt-attention-item.status-medium .elt-attention-icon {
  background: rgba(217,164,65,.1);
  color: #D9A441;
}
.elt-attention-item.status-good .elt-attention-icon {
  background: rgba(0,229,212,.1);
  color: #00E5D4;
}

.elt-attention-text {
  flex: 1;
  min-width: 0;
}

.elt-attention-text b {
  display: block;
  font-size: 13px;
  color: rgba(230,242,255,.9);
  font-weight: 600;
  margin-bottom: 2px;
}

.elt-attention-text span {
  font-size: 11.5px;
  color: rgba(230,242,255,.45);
  line-height: 1.4;
}

.elt-attention-arrow {
  color: rgba(230,242,255,.2);
  flex-shrink: 0;
}

/* ── AI Note ─────────────────────────────────────────────────────────────── */

.elt-ai-note {
  margin: 0 16px 14px;
  background: rgba(30,91,255,.07);
  border: 1px solid rgba(30,91,255,.18);
  border-radius: 10px;
  padding: 10px 14px;
}

.elt-ai-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.elt-ai-badge {
  background: linear-gradient(135deg, #1E5BFF, #00E5D4);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.elt-ai-note-head b {
  font-size: 12px;
  color: rgba(230,242,255,.8);
  font-weight: 600;
  flex: 1;
}

.elt-ai-access {
  font-size: 10.5px;
  color: rgba(230,242,255,.35);
  white-space: nowrap;
}

.elt-ai-note p {
  font-size: 12px;
  color: rgba(230,242,255,.6);
  line-height: 1.55;
  margin: 0;
}

/* ── Departments ─────────────────────────────────────────────────────────── */

.elt-dept-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 0;
  flex: 1;
}

.elt-dept-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  transition: background .15s;
}
.elt-dept-row:hover { background: rgba(30,91,255,.05); }

.elt-dept-info {
  flex: 1;
  min-width: 0;
}

.elt-dept-info b {
  display: block;
  font-size: 13px;
  color: rgba(230,242,255,.85);
  font-weight: 600;
  margin-bottom: 2px;
}

.elt-dept-info span {
  font-size: 11px;
  color: rgba(230,242,255,.4);
}

.elt-dept-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.elt-dept-emp {
  font-size: 12px;
  color: rgba(230,242,255,.55);
}

.elt-dept-risk {
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 10px;
}
.elt-dept-risk.status-good {
  background: rgba(0,229,212,.1);
  color: #00E5D4;
}
.elt-dept-risk.status-medium {
  background: rgba(217,164,65,.1);
  color: #D9A441;
}
.elt-dept-risk.status-bad {
  background: rgba(248,113,113,.1);
  color: #F87171;
}

.elt-dept-btn {
  background: rgba(30,91,255,.1);
  border: 1px solid rgba(30,91,255,.2);
  color: rgba(230,242,255,.7);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.elt-dept-btn:hover {
  background: rgba(30,91,255,.2);
  color: #E6F2FF;
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.elt-table-panel {
  overflow: hidden;
}

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

.elt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.elt-table thead tr {
  background: rgba(30,91,255,.05);
  border-bottom: 1px solid rgba(30,91,255,.12);
}

.elt-table th {
  padding: 8px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: rgba(230,242,255,.4);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.elt-table td {
  padding: 9px 14px;
  color: rgba(230,242,255,.75);
  border-bottom: 1px solid rgba(30,91,255,.07);
  vertical-align: middle;
}

.elt-table tbody tr:hover td { background: rgba(30,91,255,.05); }
.elt-table tbody tr:last-child td { border-bottom: none; }

.elt-table-empty {
  text-align: center;
  color: rgba(230,242,255,.3);
  padding: 32px !important;
}

/* ── Stat Mini ───────────────────────────────────────────────────────────── */

.elt-stat-mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.elt-stat-mini span {
  font-size: 11px;
  color: rgba(230,242,255,.45);
}
.elt-stat-mini b {
  font-size: 16px;
  font-weight: 700;
  color: #E6F2FF;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.elt-sidebar {
  background: #0B1020;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  scrollbar-width: none;
  min-width: 0;
}
.elt-sidebar::-webkit-scrollbar { display: none; }

.elt-sidebar-logo {
  padding: 0 12px;
  height: 52px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.elt-logo-img {
  height: 32px;
  width: auto;
  display: block;
  max-width: 160px;
}

.elt-sidenav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  scrollbar-width: none;
}
.elt-sidenav::-webkit-scrollbar { display: none; }

.elt-nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 8px;
}

.elt-nav-group-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(230,242,255,.25);
  padding: 6px 10px 4px;
}

.elt-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: rgba(230,242,255,.55);
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 500;
  text-align: left;
  width: 100%;
  transition: background .15s, color .15s;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elt-nav-item:hover {
  background: rgba(30,91,255,.1);
  color: rgba(230,242,255,.9);
}
.elt-nav-item.active {
  background: rgba(30,91,255,.12);
  color: #E6F2FF;
  font-weight: 600;
}
.elt-nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 2.5px;
  background: linear-gradient(180deg, #1E5BFF, #00E5D4);
  border-radius: 0 3px 3px 0;
}
.elt-nav-item.lockedNav {
  opacity: .45;
}

.elt-nav-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  opacity: .75;
}

.elt-nav-count {
  margin-left: auto;
  background: rgba(30,91,255,.2);
  color: rgba(230,242,255,.7);
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
  flex-shrink: 0;
}

.elt-nav-alert {
  margin-left: auto;
  background: rgba(245,158,11,.2);
  color: #F59E0B;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
  flex-shrink: 0;
}

.elt-sidebar-footer {
  padding: 6px 8px;
  border-top: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
}

.elt-tariff-nav {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background .15s;
  text-align: left;
}
.elt-tariff-nav:hover { background: rgba(30,91,255,.1); }

.elt-account {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 5px 6px 5px 8px;
  border-radius: 9px;
}
.elt-account-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.elt-account-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #E6F2FF;
  background: linear-gradient(135deg, #1E5BFF, #00B8A9);
}
.elt-account-email {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(230,242,255,.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elt-account-logout {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(230,242,255,.45);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.elt-account-logout:hover {
  background: rgba(239,68,68,.14);
  color: #F87171;
}

.elt-tariff-nav-label {
  font-size: 10px;
  color: rgba(230,242,255,.35);
  letter-spacing: .05em;
  text-transform: uppercase;
  flex: 1;
}

.elt-tariff-nav-name {
  font-size: 11px;
  font-weight: 600;
  color: #00E5D4;
}

.elt-tariff-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,229,212,.08);
  border: 1px solid rgba(0,229,212,.25);
  border-radius: 8px;
  padding: 6px 10px;
}

.elt-tariff-label {
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0,229,212,.5);
}

.elt-tariff-name {
  font-size: 12px;
  font-weight: 700;
  color: #00E5D4;
  text-shadow: 0 0 10px rgba(0,229,212,.35);
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */

.elt-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 52px;
  background: #0B1020;
  border-bottom: 1px solid rgba(255,255,255,.05);
  position: sticky;
  top: 0;
  z-index: 9;
  flex-shrink: 0;
  box-shadow: 0 1px 12px rgba(0,0,0,.35);
}

.elt-topbar-left { display: flex; align-items: center; gap: 12px; }
.elt-topbar-center { flex: 1; display: flex; justify-content: center; }
.elt-topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.elt-workspace-info { display: flex; flex-direction: column; gap: 1px; }
.elt-topbar-label { font-size: 9.5px; color: rgba(0,229,212,.5); letter-spacing: .08em; text-transform: uppercase; }
.elt-topbar-company { font-size: 13px; font-weight: 600; color: #E6F2FF; white-space: nowrap; letter-spacing: -.01em; }

.elt-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 20px;
  padding: 0 12px;
  height: 32px;
  box-sizing: border-box;
  width: 180px;
  max-width: 100%;
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1),
              border-color 0.25s ease,
              background 0.25s ease,
              background-image 0.25s ease;
}
.elt-search-wrap:focus-within {
  width: 340px;
  border: 1.5px solid #1E5BFF;
  background-image: none;
  background-origin: initial;
  background-clip: initial;
}

.elt-search-icon { color: rgba(230,242,255,.3); flex-shrink: 0; }

.elt-search {
  background: none;
  border: none;
  outline: none;
  color: rgba(230,242,255,.85);
  font-size: 12.5px;
  font-family: inherit;
  width: 100%;
}
.elt-search::placeholder { color: rgba(230,242,255,.35); }

.elt-balance-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,229,212,.07);
  border: 1px solid rgba(0,229,212,.18);
  border-radius: 8px;
  padding: 5px 12px;
}

.elt-balance-label { font-size: 10.5px; color: rgba(230,242,255,.45); }
.elt-balance-value { font-size: 14px; font-weight: 700; color: #00E5D4; }

.elt-btn-topbar {
  background: rgba(30,91,255,.07);
  border: 1px solid rgba(30,91,255,.22);
  color: rgba(230,242,255,.8);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.elt-btn-topbar:hover { background: rgba(30,91,255,.15); color: #E6F2FF; }

.elt-btn-topbar-primary {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #1E5BFF, #0040CC);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.elt-btn-topbar-primary:hover { opacity: .88; background: linear-gradient(135deg, #1E5BFF, #0040CC); }

.elt-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(30,91,255,.06);
  border: 1px solid rgba(30,91,255,.15);
  color: rgba(230,242,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.elt-icon-btn:hover { background: rgba(30,91,255,.18); color: #E6F2FF; border-color: rgba(30,91,255,.3); }

.elt-notif-btn { position: relative; }
.elt-notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #F59E0B;
  border: 1.5px solid #0B1020;
}

/* ── Центр уведомлений ── */
.elt-notif-wrap { position: relative; }
.elt-notif-btn.active { background: rgba(30,91,255,.14); color: #5B8CFF; }
.elt-notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: #F87171; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  border: 1.5px solid #0B1020;
}
.elt-notif-backdrop { position: fixed; inset: 0; z-index: 40; }
.elt-notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 41;
  width: 360px; max-width: calc(100vw - 32px);
  background: #0F1730; border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.5); overflow: hidden;
  animation: notifIn .14s ease;
}
@keyframes notifIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
body.light .elt-notif-panel { background: #fff; border-color: rgba(10,15,30,.12); box-shadow: 0 18px 48px rgba(10,15,30,.18); }
.elt-notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
}
body.light .elt-notif-panel-head { border-color: rgba(10,15,30,.08); }
.elt-notif-panel-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: #E6F2FF; display: flex; align-items: center; gap: 8px; }
body.light .elt-notif-panel-head h3 { color: #0A0F1E; }
.elt-notif-count { font-size: 11px; font-weight: 700; color: #fff; background: #F87171; border-radius: 9px; padding: 1px 7px; }
.elt-notif-readall { background: none; border: none; color: #5B8CFF; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.elt-notif-readall:hover { background: rgba(30,91,255,.1); }
.elt-notif-list { max-height: 60vh; overflow-y: auto; padding: 6px; }
.elt-notif-empty { padding: 32px 16px; text-align: center; font-size: 13px; color: #8C9BB5; }
.elt-notif-item {
  display: grid; grid-template-columns: 30px minmax(0,1fr) 10px; gap: 10px; align-items: start;
  width: 100%; padding: 10px; border: none; background: none; border-radius: 10px;
  cursor: pointer; text-align: left; transition: background .12s;
}
.elt-notif-item:hover { background: rgba(30,91,255,.08); }
.elt-notif-item.unread { background: rgba(30,91,255,.05); }
.elt-notif-sev {
  width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  background: rgba(91,140,255,.16); color: #5B8CFF;
}
.elt-notif-sev.sev-good { background: rgba(34,197,94,.16); color: #22C55E; }
.elt-notif-sev.sev-high { background: rgba(248,113,113,.16); color: #F87171; }
.elt-notif-sev.sev-medium { background: rgba(245,158,11,.16); color: #F59E0B; }
.elt-notif-item-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.elt-notif-item-title { font-size: 13px; font-weight: 600; color: #E6F2FF; line-height: 1.35; }
body.light .elt-notif-item-title { color: #0A0F1E; }
.elt-notif-item-sub { font-size: 11.5px; color: #8C9BB5; }
.elt-notif-item-time { font-size: 11px; color: #6C7A99; margin-top: 1px; }
.elt-notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #5B8CFF; margin-top: 6px; align-self: start; }

.elt-avatar-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E5BFF, #00E5D4);
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── App Shell ───────────────────────────────────────────────────────────── */

.appShell {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  min-height: 100vh;
  background: #0A0F1E;
}

/* Sidebar и topbar — единый тёмно-синий фон */
.darkTheme .elt-sidebar,
.darkTheme .elt-topbar {
  background: #0B1020;
}

.appMain {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  overflow: hidden;
}

.appContent {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #0A0F1E;
}

/* ── Light Theme Overrides ───────────────────────────────────────────────── */

.lightTheme .elt-dashboard { background: #F0F4FF; }
.lightTheme .elt-kpi { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.07); }
.lightTheme .elt-kpi-value { color: #0A0F1E; }
.lightTheme .elt-kpi-label { color: rgba(10,15,30,.55); }
.lightTheme .elt-kpi-caption { color: rgba(10,15,30,.35); }
.lightTheme .elt-panel { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.07); }
.lightTheme .elt-panel-head-left h2,
.lightTheme .elt-panel-head h2 { color: #0A0F1E; }
.lightTheme .elt-panel-caption { color: rgba(10,15,30,.4); }
.lightTheme .elt-funnel-label { color: rgba(10,15,30,.65); }
.lightTheme .elt-funnel-count { color: #0A0F1E; }
.lightTheme .elt-funnel-pct { color: rgba(10,15,30,.38); }
.lightTheme .elt-funnel-step { background: rgba(0,0,0,.025) !important; border-color: rgba(0,0,0,.06) !important; }
.lightTheme .elt-funnel-step:hover { background: rgba(30,91,255,.07); border-color: rgba(30,91,255,.2); }
.lightTheme .elt-funnel-bar { background: rgba(0,0,0,.06); }
.lightTheme .elt-bar-label { color: rgba(10,15,30,.65); }
.lightTheme .elt-bar-value { color: #0A0F1E; }
.lightTheme .elt-sidebar { background: #F7F9FC; border-color: rgba(0,0,0,.07); }
.lightTheme .elt-sidebar-logo { border-color: rgba(0,0,0,.06); }
.lightTheme .elt-sidebar-footer { border-color: rgba(0,0,0,.06); }
.lightTheme .elt-account-email { color: rgba(10,15,30,.55); }
.lightTheme .elt-account-logout { color: rgba(10,15,30,.4); }
.lightTheme .elt-account-logout:hover { background: rgba(239,68,68,.1); color: #DC2626; }
.lightTheme .elt-nav-group-label { color: rgba(10,15,30,.35); }
.lightTheme .elt-nav-item { color: rgba(10,15,30,.55); }
.lightTheme .elt-nav-item:hover { background: rgba(30,91,255,.07); color: #0A0F1E; }
.lightTheme .elt-nav-item.active { background: rgba(30,91,255,.10); color: #1E5BFF; font-weight: 600; }
.lightTheme .elt-nav-item.active::before { background: linear-gradient(180deg, #1E5BFF, #00B8A9); }
.lightTheme .elt-nav-count { background: rgba(30,91,255,.10); color: rgba(10,15,30,.6); }
.lightTheme .elt-topbar { background: rgba(247,249,252,.97); border-color: rgba(0,0,0,.07); box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.lightTheme .elt-topbar-label { color: rgba(0,180,160,.6); }
.lightTheme .elt-topbar-company { color: #0A0F1E; }
.lightTheme .elt-search-wrap {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.09);
  border-radius: 20px;
  background-image: none;
}
.lightTheme .elt-search-wrap:focus-within {
  border: 1.5px solid #1E5BFF;
  background-image: none;
  background-clip: initial;
  background-origin: initial;
  background-color: #fff;
}
.lightTheme .elt-search { color: #0A0F1E; }
.lightTheme .elt-search::placeholder { color: rgba(10,15,30,.35); }
.lightTheme .elt-search-icon { color: rgba(10,15,30,.35); }
.lightTheme .elt-balance-pill { background: rgba(0,180,160,.07); border-color: rgba(0,180,160,.18); }
.lightTheme .elt-balance-label { color: rgba(10,15,30,.45); }
.lightTheme .elt-balance-value { color: #009E8E; }
.lightTheme .elt-tariff-nav-label { color: rgba(10,15,30,.4); }
.lightTheme .elt-tariff-nav-name { color: #009E8E; }
.lightTheme .elt-attention { border-color: rgba(245,158,11,.2); }
.lightTheme .elt-attention-item { background: rgba(255,255,255,.9); }
.lightTheme .elt-attention-text b { color: #0A0F1E; }
.lightTheme .elt-attention-text span { color: rgba(10,15,30,.5); }
.lightTheme .elt-heatmap-row-label { color: rgba(10,15,30,.7); }
.lightTheme .elt-heat-cell strong { color: #0A0F1E; }
.lightTheme .appContent { background: #F0F4FF; }
.lightTheme.appShell { background: #F0F4FF; }
.lightTheme .elt-9box-cell-count { color: #0A0F1E; }
.lightTheme .elt-dash-title { color: #0A0F1E; }
.lightTheme .elt-dash-subtitle { color: rgba(10,15,30,.5); }
.lightTheme .elt-dept-info b { color: #0A0F1E; }
.lightTheme .elt-table th { color: rgba(10,15,30,.45); }
.lightTheme .elt-table td { color: rgba(10,15,30,.75); border-color: rgba(0,0,0,.05); }
.lightTheme .elt-table tbody tr:hover td { background: rgba(30,91,255,.04); }
.lightTheme .elt-radar-label { fill: rgba(10,15,30,.55); }
.lightTheme .elt-radar-ring { stroke: rgba(0,0,0,.07); }
.lightTheme .elt-radar-axis { stroke: rgba(0,0,0,.08); }
.lightTheme .elt-radar-legend-item span { color: rgba(10,15,30,.6); }
.lightTheme .elt-radar-dot { stroke: #F0F4FF; }
.lightTheme .elt-tariff-badge { background: rgba(0,229,212,.06); border-color: rgba(0,229,212,.2); }
.lightTheme .elt-tariff-nav:hover { background: rgba(30,91,255,.07); }
.lightTheme .elt-tariff-nav-label { color: rgba(10,15,30,.35); }
.lightTheme .elt-tariff-nav-name { color: #00B8AA; }
.lightTheme .elt-tariff-name { color: #00B8AA; text-shadow: none; }
.lightTheme .elt-tariff-label { color: rgba(0,150,130,.5); }
.lightTheme .elt-balance-pill { background: rgba(0,229,212,.06); border-color: rgba(0,229,212,.2); }
.lightTheme .elt-btn-topbar { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: rgba(10,15,30,.7); }
.lightTheme .elt-icon-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.07); color: rgba(10,15,30,.5); }
.lightTheme .elt-pill { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: rgba(10,15,30,.55); }
.lightTheme .elt-pill.active { background: rgba(30,91,255,.12); border-color: rgba(30,91,255,.3); color: #1E5BFF; }
.lightTheme .elt-ai-note { background: rgba(30,91,255,.05); border-color: rgba(30,91,255,.15); }
.lightTheme .elt-ai-note p { color: rgba(10,15,30,.6); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .elt-dashboard { padding: 18px 18px 48px; }
  .elt-search-wrap { width: 200px; }
}

@media (max-width: 860px) {
  .elt-dash-header { flex-direction: column; align-items: flex-start; }
  .elt-filter-bar { flex-direction: column; align-items: flex-start; }
  .elt-period-pills::after { display: none; }
  .elt-bar-row { grid-template-columns: 100px 1fr 36px; }
}

@media (max-width: 768px) {
  .elt-sidebar { display: none; }
  .appShell { grid-template-columns: 1fr !important; }
  .elt-topbar { padding: 0 16px; }
  .elt-search-wrap { display: none; }
  .elt-dashboard { padding: 14px 14px 40px; gap: 14px; }
  .elt-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .elt-analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .elt-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .elt-kpi-value { font-size: 22px; }
  .elt-dash-title { font-size: 18px; }
}

/* ── Candidates redesign: new component styles ─────────────────────────── */

/* Filter panel: single row with divider */
.filterPanelRow {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.filterDivider {
  width: 1px;
  height: 24px;
  margin: 0 12px;
  background: rgba(30, 91, 255, .22);
  flex-shrink: 0;
}

.filter-apply {
  border-color: rgba(30, 91, 255, .45) !important;
  color: var(--blue) !important;
}

.filter-reset {
  color: var(--mutedDark) !important;
}

/* Header compact */
.header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pageHead h1 {
  font-size: 26px;
  margin-bottom: 0;
}

/* Action pill buttons */
.action-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(30, 91, 255, .28);
  border-radius: 999px;
  background: rgba(30, 91, 255, .07);
  color: rgba(230, 242, 255, .85);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}

.action-pill:hover {
  border-color: rgba(0, 229, 212, .5);
  background: rgba(0, 229, 212, .1);
  color: var(--cyan);
}

.row-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

/* Mini bar chart with percent */
.mini-bar-row {
  display: grid;
  grid-template-columns: minmax(100px, 1.2fr) minmax(60px, 2fr) 36px 32px;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
}

.mini-bar-label {
  color: var(--mutedDark);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-bar-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .15);
  display: block;
}

.mini-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.status-good .mini-bar-fill { background: linear-gradient(90deg, #00b09b, var(--cyan)); }
.status-medium .mini-bar-fill { background: linear-gradient(90deg, #D9A441, #f0c040); }
.status-bad .mini-bar-fill { background: linear-gradient(90deg, #F87171, #DC2626); }

.mini-bar-value {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.mini-bar-pct {
  font-size: 10.5px;
  color: var(--mutedDark);
  font-style: normal;
  text-align: right;
}

/* Funnel with conversion */
.funnel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 800;
}

.funnel-label {
  color: var(--mutedDark);
  font-weight: 600;
  font-size: 12px;
}

.funnel-val {
  font-size: 15px;
  color: #E6F2FF;
}

.funnel-conv {
  font-size: 10.5px;
  font-style: normal;
  color: var(--mutedDark);
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .1);
}

.funnelStep .funnel-bar {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .15);
  margin-top: 4px;
}

.funnelStep .funnel-bar em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.funnelStep {
  padding: 8px 10px;
  gap: 0;
}

/* Top-fit mini cards */
.top-fit-list {
  display: grid;
  gap: 8px;
}

.top-fit-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(30, 91, 255, .14);
  border-radius: 10px;
  background: rgba(30, 91, 255, .05);
}

.top-fit-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(30, 91, 255, .18);
  color: #E6F2FF;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.top-fit-avatar.status-good { background: rgba(0, 229, 212, .18); color: var(--cyan); }
.top-fit-avatar.status-medium { background: rgba(217, 164, 65, .18); color: #D9A441; }
.top-fit-avatar.status-bad { background: rgba(248, 113, 113, .18); color: #F87171; }

.top-fit-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.top-fit-info b {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── End candidates redesign ────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════
   Premium Page Layout — дополнительные стили для DashboardPageLayout
   Применяется ко всем разделам: Кандидаты, Сотрудники, Вакансии, Адаптация, 360, Performance
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── elt-dash-subtitle ──────────────────────────────────────────────────────── */
.elt-dash-subtitle {
  font-size: 12px;
  color: rgba(230,242,255,.45);
  margin: 2px 0 0;
  line-height: 1.5;
  max-width: 540px;
}

/* ── elt-pill apply/reset ───────────────────────────────────────────────────── */
.elt-pill-apply {
  background: rgba(30,91,255,.18) !important;
  color: #7EB3FF !important;
  border-color: rgba(30,91,255,.35) !important;
}
.elt-pill-apply:hover {
  background: rgba(30,91,255,.3) !important;
}
.elt-pill-reset {
  color: rgba(230,242,255,.45) !important;
}

/* ── elt-funnel-conv ────────────────────────────────────────────────────────── */
.elt-funnel-conv {
  font-size: 10px;
  font-style: normal;
  color: rgba(230,242,255,.4);
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  padding-left: 4px;
}
.elt-funnel-step.status-good .elt-funnel-conv { color: #22C55E; }
.elt-funnel-step.status-bad .elt-funnel-conv  { color: #F87171; }
.elt-funnel-step.status-medium .elt-funnel-conv { color: #D9A441; }

/* ── elt-top-fit ────────────────────────────────────────────────────────────── */
.elt-top-fit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.elt-top-fit-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
}

.elt-top-fit-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(30,91,255,.2);
  color: #7EB3FF;
  border: 1.5px solid rgba(30,91,255,.35);
}
.elt-top-fit-avatar.status-good  { background: rgba(34,197,94,.15);  color: #22C55E; border-color: rgba(34,197,94,.3); }
.elt-top-fit-avatar.status-medium { background: rgba(217,164,65,.15); color: #D9A441; border-color: rgba(217,164,65,.3); }
.elt-top-fit-avatar.status-bad   { background: rgba(248,113,113,.15); color: #F87171; border-color: rgba(248,113,113,.3); }

.elt-top-fit-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.elt-top-fit-info b {
  font-size: 12px;
  font-weight: 600;
  color: #E6F2FF;
}

.elt-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  width: fit-content;
  background: rgba(30,91,255,.15);
  color: #7EB3FF;
}
.elt-status-badge.status-good   { background: rgba(34,197,94,.12);  color: #22C55E; }
.elt-status-badge.status-medium { background: rgba(217,164,65,.12); color: #D9A441; }
.elt-status-badge.status-bad    { background: rgba(248,113,113,.12); color: #F87171; }

.elt-action-pill {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(30,91,255,.12);
  color: #7EB3FF;
  border: 1px solid rgba(30,91,255,.25);
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.elt-action-pill:hover {
  background: rgba(30,91,255,.22);
}

/* ── Light theme overrides ──────────────────────────────────────────────────── */
.lightTheme .elt-dash-subtitle { color: rgba(10,15,30,.45); }
.lightTheme .elt-top-fit-card  { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); }
.lightTheme .elt-top-fit-info b { color: #0A0F1E; }
.lightTheme .elt-action-pill   { background: rgba(30,91,255,.08); color: #1E5BFF; border-color: rgba(30,91,255,.2); }
.lightTheme .elt-status-badge  { background: rgba(30,91,255,.08); color: #1E5BFF; }
.lightTheme .elt-funnel-conv   { color: rgba(10,15,30,.4); }

/* ============================================================
   PREMIUM PAGE LAYOUT — универсальный стиль для всех разделов
   ============================================================ */

.elt-page-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px 48px;
  box-sizing: border-box;
}

.elt-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.elt-page-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elt-page-title {
  font-size: 18px;
  font-weight: 700;
  color: #E6F2FF;
  margin: 0;
  line-height: 1.3;
}

.elt-page-subtitle {
  font-size: 12px;
  color: #8899BB;
  margin: 0;
  max-width: 600px;
}

.elt-page-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

/* ---- CARD ---- */
.elt-card {
  background: #111A33;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 20px;
  position: relative;
}

.elt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.elt-card-head h2 {
  font-size: 14px;
  font-weight: 600;
  color: #E6F2FF;
  margin: 0;
}

.elt-card-caption {
  font-size: 11px;
  color: #8899BB;
}

/* ---- LOCKED CARD ---- */
.elt-card-locked {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

.elt-lock-badge {
  font-size: 10px;
  font-weight: 600;
  color: #D9A441;
  background: rgba(217,164,65,0.12);
  border: 1px solid rgba(217,164,65,0.25);
  border-radius: 4px;
  padding: 2px 7px;
}

/* ---- FILTER BAR ---- */
.elt-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.elt-filter-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.1);
  margin: 0 4px;
}

/* ---- BUTTONS ---- */
.elt-btn-primary {
  background: #1E5BFF;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.elt-btn-primary:hover { background: #1a4ee0; }
.elt-btn-wide { width: 100%; }

.elt-btn-secondary {
  background: rgba(30,91,255,0.12);
  color: #1E5BFF;
  border: 1px solid rgba(30,91,255,0.3);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.elt-btn-secondary:hover { background: rgba(30,91,255,0.2); }

.elt-btn-ghost {
  background: transparent;
  color: #8899BB;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.elt-btn-ghost:hover { color: #E6F2FF; border-color: rgba(255,255,255,0.2); }

.elt-btn-danger {
  background: transparent;
  color: #F87171;
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

/* ---- FORM ELEMENTS ---- */
.elt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

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

.elt-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: #8899BB;
  font-weight: 500;
}

.elt-label-full { grid-column: 1 / -1; }

/* Карточка-чекбокс (напр. «выслать адаптационный тест») */
.elt-checkbox-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.elt-checkbox-card:hover { border-color: rgba(120,150,255,0.45); background: rgba(120,150,255,0.06); }
.elt-checkbox-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.elt-checkbox-box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.elt-checkbox-box::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  margin-top: -2px;
  transition: transform 0.15s ease;
}
.elt-checkbox-card input:checked ~ .elt-checkbox-box {
  background: #2563EB;
  border-color: #2563EB;
}
.elt-checkbox-card input:checked ~ .elt-checkbox-box::after { transform: rotate(-45deg) scale(1); }
.elt-checkbox-card input:focus-visible ~ .elt-checkbox-box { box-shadow: 0 0 0 3px rgba(37,99,235,0.35); }
.elt-checkbox-text { display: flex; flex-direction: column; gap: 2px; text-transform: none; letter-spacing: normal; }
.elt-checkbox-text b { font-size: 13px; font-weight: 600; color: #E6F2FF; }
.elt-checkbox-text small { font-size: 12px; line-height: 1.4; color: #8899BB; }
.lightTheme .elt-checkbox-text b { color: #0A0F1E; }
.lightTheme .elt-checkbox-text small { color: rgba(10,15,30,.55); }
.lightTheme .elt-checkbox-box { border-color: rgba(10,15,30,.25); background: rgba(10,15,30,.03); }

.elt-input, .elt-select, .elt-textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  color: #E6F2FF;
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.elt-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238899BB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
/* скрываем нативный file input, показываем стилизованную кнопку */
.elt-input[type="file"] {
  display: none;
}
.elt-file-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  color: #E6F2FF;
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.elt-file-upload-btn:hover {
  border-color: rgba(30,91,255,0.4);
  background: rgba(30,91,255,0.06);
}
.elt-input:focus, .elt-select:focus, .elt-textarea:focus {
  border-color: rgba(30,91,255,0.5);
}
.elt-textarea { resize: vertical; min-height: 90px; }
.elt-select option { background: #111A33; }

.elt-file-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: #8899BB;
}

.elt-form-warning {
  font-size: 12px;
  color: #D9A441;
  background: rgba(217,164,65,0.08);
  border: 1px solid rgba(217,164,65,0.2);
  border-radius: 6px;
  padding: 8px 12px;
}

/* ---- TABLE ---- */
.elt-table-panel {
  background: #111A33;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: hidden;
}

.elt-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.elt-table-head h2 {
  font-size: 14px;
  font-weight: 600;
  color: #E6F2FF;
  margin: 0;
}

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

.elt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.elt-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #8899BB;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.elt-table td {
  padding: 11px 16px;
  color: #C8D8F0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}

.elt-table tr:last-child td { border-bottom: none; }
.elt-table tr:hover td { background: rgba(255,255,255,0.02); }

.elt-code {
  font-family: 'JetBrains Mono','Fira Code',monospace;
  font-size: 11px;
  color: #00E5D4;
  background: rgba(0,229,212,0.07);
  border-radius: 4px;
  padding: 2px 6px;
  word-break: break-all;
}

.elt-code-block {
  display: block;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
}

.elt-warn-text { color: #D9A441; font-size: 11px; }

.elt-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---- STATUS BADGES ---- */
.elt-status-badge {
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
}

.elt-status-completed, .elt-status-done {
  color: #22C55E;
  background: rgba(34,197,94,0.1);
}

.elt-status-pending, .elt-status-sent {
  color: #D9A441;
  background: rgba(217,164,65,0.1);
}

.elt-status-cancelled, .elt-status-bad {
  color: #F87171;
  background: rgba(248,113,113,0.1);
}

.elt-status-pill {
  font-size: 11px;
  font-weight: 600;
}

/* ---- PROFILES GRID ---- */
.elt-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.elt-profile-card {
  background: #111A33;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}
.elt-profile-card:hover { border-color: rgba(30,91,255,0.3); }

.elt-profile-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.elt-profile-icon-wrap {
  width: 36px;
  height: 36px;
  background: rgba(30,91,255,0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1E5BFF;
}

.elt-profile-category { font-size: 11px; color: #8899BB; font-weight: 500; }
.elt-profile-title { font-size: 15px; font-weight: 700; color: #E6F2FF; margin: 0; }
.elt-profile-summary { font-size: 12px; color: #8899BB; margin: 0; line-height: 1.5; }

.elt-profile-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.elt-profile-meta span {
  font-size: 11px;
  color: #8899BB;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  padding: 2px 7px;
}

.elt-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.elt-profile-actions > * { flex: 1 1 auto; text-align: center; }

/* ---- CONSTRUCTOR ---- */
.elt-constructor-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}

.elt-constructor-main, .elt-constructor-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Конструктор: секции добавления вопроса (в модалке) */
.ctr-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ctr-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #E6F2FF;
}
.ctr-section-head span {
  font-size: 11px;
  font-weight: 500;
  color: #8899BB;
}
/* Показываем только секцию, соответствующую выбранному типу вопроса */
.ctr-q-form .ctr-section { display: none; }
.ctr-q-form[data-qtype="single_choice"]   .ctr-section[data-for="choice"],
.ctr-q-form[data-qtype="multiple_choice"] .ctr-section[data-for="choice"],
.ctr-q-form[data-qtype="scale"]           .ctr-section[data-for="scale"],
.ctr-q-form[data-qtype="open"]            .ctr-section[data-for="open"] { display: block; }

/* Пустое состояние редактора */
.ctr-empty-card { display: flex; align-items: center; justify-content: center; min-height: 320px; }
.ctr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 16px;
  text-align: center;
}
.ctr-empty p { margin: 0; font-size: 13px; color: #8899BB; }

/* Список вопросов выбранного теста */
.ctr-questions { display: flex; flex-direction: column; gap: 10px; }
.ctr-question {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
}
.ctr-question h4 { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: #E6F2FF; line-height: 1.4; }
.ctr-q-head { display: flex; align-items: center; gap: 8px; }
.ctr-q-type {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #7EB3FF; background: rgba(30,91,255,0.14); border-radius: 4px; padding: 2px 7px;
}
.ctr-q-comp { font-size: 11px; color: #00E5D4; background: rgba(0,229,212,0.1); border-radius: 4px; padding: 2px 7px; }
.ctr-q-max { font-size: 11px; color: #8899BB; }
.ctr-service-badge {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #D9A441; background: rgba(217,164,65,0.14); border: 1px solid rgba(217,164,65,0.4);
  border-radius: 4px; padding: 1px 6px; line-height: 1.5;
}
.ctr-service-lock { font-size: 12px; font-weight: 600; color: #8899BB; display: inline-flex; align-items: center; gap: 4px; }
.ctr-q-del {
  margin-left: auto; background: none; border: none; color: #8899BB; cursor: pointer;
  font-size: 13px; padding: 2px 6px; border-radius: 6px; transition: all .15s;
}
.ctr-q-del:hover { color: #F87171; background: rgba(248,113,113,0.12); }

/* Конструктор v2: режимы, компетенции, профиль из компетенций */
.ctr-mode-toggle { display: inline-flex; gap: 4px; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 14px; }
.lightTheme .ctr-mode-toggle { background: rgba(10,15,30,.04); }
.ctr-mode-btn { background: none; border: none; padding: 7px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #8899BB; cursor: pointer; transition: all .12s; }
.ctr-mode-btn.active { background: #1E5BFF; color: #fff; }

.ctr-kind-badge { display: inline-block; vertical-align: middle; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.ctr-kind-badge.professional { color: #5B8CFF; background: rgba(91,140,255,.14); }
.ctr-kind-badge.common { color: #00B8A6; background: rgba(0,184,166,.14); }

.ctr-comp-section { padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.ctr-add-comp-btn { padding: 4px 10px; font-size: 12px; }
.ctr-comp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ctr-comp-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(91,140,255,.08); border: 1px solid rgba(91,140,255,.25); border-radius: 20px; padding: 5px 6px 5px 12px; }
.ctr-comp-chip-name { font-size: 12.5px; font-weight: 600; color: #E6F2FF; }
.lightTheme .ctr-comp-chip-name { color: #0A0F1E; }
.ctr-comp-chip-count { font-size: 11px; color: #8899BB; }
.ctr-comp-chip-x { background: none; border: none; color: #8899BB; cursor: pointer; font-size: 12px; width: 20px; height: 20px; border-radius: 50%; }
.ctr-comp-chip-x:hover { color: #F87171; background: rgba(248,113,113,.14); }

.ctr-derived-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8899BB; margin: 4px 0 10px; }
.ctr-derived-head span { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }

.ctr-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.ctr-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 13px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; cursor: pointer; text-align: left; transition: all .12s; }
.lightTheme .ctr-pick-row { background: rgba(10,15,30,.03); border-color: rgba(10,15,30,.1); }
.ctr-pick-row:hover { background: rgba(30,91,255,.08); border-color: rgba(30,91,255,.35); }
.ctr-pick-name { font-size: 13.5px; font-weight: 600; color: #E6F2FF; }
.lightTheme .ctr-pick-name { color: #0A0F1E; }
.ctr-pick-count { font-size: 12px; color: #5B8CFF; font-weight: 600; white-space: nowrap; }
.ctr-opts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ctr-opts li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: #C7D6EE; padding: 5px 10px;
  background: rgba(255,255,255,0.03); border-radius: 6px;
}
.ctr-opts em { font-style: normal; font-size: 11px; color: #8899BB; white-space: nowrap; }

/* Добавление вопроса: строка варианта ответа */
.ctr-opt-row {
  display: grid;
  grid-template-columns: 1fr 78px auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.ctr-score { text-align: center; }
.ctr-chk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: #8899BB; white-space: nowrap; cursor: pointer;
}
.ctr-chk input { margin: 0; }

.elt-comp-section { margin-bottom: 14px; }

.elt-comp-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.elt-comp-section-head b { font-size: 13px; color: #E6F2FF; }
.elt-comp-section-head small { font-size: 11px; color: #8899BB; margin-left: auto; }
.elt-comp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.elt-comp-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.elt-comp-tag {
  font-size: 12px;
  color: #8899BB;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.elt-comp-tag:hover { color: #E6F2FF; background: rgba(30,91,255,0.12); border-color: rgba(30,91,255,0.3); }

.elt-comp-tag-ai {
  color: #00E5D4;
  background: rgba(0,229,212,0.07);
  border-color: rgba(0,229,212,0.2);
}

.elt-ai-panel .elt-card-head { gap: 10px; }

.elt-ai-badge {
  font-size: 10px;
  font-weight: 700;
  color: #00E5D4;
  background: rgba(0,229,212,0.12);
  border: 1px solid rgba(0,229,212,0.25);
  border-radius: 4px;
  padding: 2px 7px;
}

.elt-ai-suggest { margin-top: 12px; }
.elt-ai-suggest-label { font-size: 11px; color: #8899BB; display: block; margin-bottom: 8px; }

.elt-import-flow { display: flex; flex-direction: column; gap: 16px; }

.elt-import-step { display: flex; gap: 14px; align-items: flex-start; }

.elt-import-num {
  width: 24px;
  height: 24px;
  background: rgba(30,91,255,0.15);
  color: #1E5BFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.elt-import-step b { font-size: 13px; color: #E6F2FF; display: block; margin-bottom: 4px; }
.elt-import-step p { font-size: 12px; color: #8899BB; margin: 0 0 8px; }

/* Импорт — ошибки и результат */
.elt-import-error-box { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.35); color: #F8B4B4; font-size: 12.5px; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.elt-import-result { display: flex; flex-direction: column; gap: 14px; }
.elt-import-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.elt-import-stat { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px; text-align: center; }
.elt-import-stat b { display: block; font-size: 24px; font-weight: 700; color: #E6F2FF; }
.elt-import-stat span { font-size: 11.5px; color: #8899BB; }
.elt-import-stat.ok b { color: #22C55E; }
.elt-import-stat.warn b { color: #F59E0B; }
.elt-import-errors { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.elt-import-err { font-size: 12px; color: #C7D2E8; background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.22); border-radius: 7px; padding: 7px 10px; }
.elt-import-err span { display: inline-block; min-width: 70px; color: #F59E0B; font-weight: 600; margin-right: 6px; }
.elt-import-allok { font-size: 12.5px; color: #22C55E; margin: 0; }
.elt-import-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* ---- Поисковый селектор кандидатского профиля (модалка добавления) ---- */
.cand-prof-picker { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cand-prof-picker .elt-input { width: 100%; }
.cand-prof-selected { font-size: 13px; color: #E6F2FF; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.25); }
.cand-prof-clear { margin-left: auto; background: none; border: none; color: #8FB3CC; cursor: pointer; font-size: 14px; line-height: 1; }
.cand-prof-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 4px; }
.cand-prof-opt { text-align: left; background: none; border: none; color: #E6F2FF; padding: 7px 9px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.cand-prof-opt:hover { background: rgba(56,189,248,.12); }
.cand-prof-opt span { color: #8FB3CC; font-size: 11.5px; }
.cand-prof-hint { font-size: 11.5px; color: #8FB3CC; padding: 6px 9px; }
.lightTheme .cand-prof-selected { color: #0A0F1E; background: #F0F9FF; border-color: #BAE6FD; }
.lightTheme .cand-prof-opt { color: #0A0F1E; }
.lightTheme .cand-prof-list { border-color: rgba(10,15,30,.12); }
.lightTheme .cand-prof-opt span, .lightTheme .cand-prof-hint, .lightTheme .cand-prof-clear { color: #5A6B85; }

/* ── Add-candidate modal: grouped fields + send toggle ── */
.cand-field-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 14px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.022);
}
.cand-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7E93BE;
}
.cand-field-group .cand-prof-picker { margin-top: 0; }

.lightTheme .cand-field-group { border-color: rgba(10,15,30,.1); background: rgba(10,15,30,.018); }
.lightTheme .cand-group-label { color: #5A6B85; }

.ctr-profile-search { margin: 4px 0 8px; }
.ctr-profile-search .elt-input { width: 100%; }
.ctr-search-hint { margin: 0 0 8px; font-size: 11.5px; color: var(--ov-muted, #8FB3CC); opacity: .8; }

.elt-profile-rows { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }

.elt-profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
  width: 100%;
}
.elt-profile-row:hover { background: rgba(30,91,255,0.08); }
.elt-profile-row b { font-size: 13px; color: #E6F2FF; }
.elt-profile-row span { font-size: 11px; color: #8899BB; }

/* ---- LINKS GRID ---- */
.elt-links-grid { display: flex; flex-direction: column; gap: 16px; }

/* ---- SUPPORT ---- */
.elt-support-grid { display: flex; flex-direction: column; gap: 16px; }

.elt-support-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.elt-support-card { display: flex; flex-direction: column; gap: 10px; }
.elt-support-urgent { border-color: rgba(248,113,113,0.2); }

.elt-support-badge {
  font-size: 11px;
  font-weight: 700;
  color: #F87171;
  background: rgba(248,113,113,0.1);
  border-radius: 5px;
  padding: 3px 8px;
  align-self: flex-start;
}

.elt-support-badge-neutral { color: #8899BB; background: rgba(255,255,255,0.06); }
.elt-support-badge-idea { color: #00E5D4; background: rgba(0,229,212,0.1); }
.elt-support-card h2 { font-size: 15px; font-weight: 700; color: #E6F2FF; margin: 0; }
.elt-support-card p { font-size: 12px; color: #8899BB; margin: 0; flex: 1; }
.elt-support-sla { font-size: 11px; color: #8899BB; font-style: italic; }
.elt-support-form { max-width: 640px; }
.elt-support-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.elt-support-status { font-size: 12px; font-weight: 600; transition: color .15s; }

/* ---- GRATITUDE ---- */
.elt-gratitude-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.elt-gratitude-hero h2 { font-size: 16px; font-weight: 700; color: #E6F2FF; margin: 4px 0 6px; }
.elt-gratitude-hero p { font-size: 13px; color: #8899BB; margin: 0; }

.elt-gratitude-stats { display: flex; gap: 24px; flex-shrink: 0; }
.elt-gratitude-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.elt-gratitude-stats strong { font-size: 24px; font-weight: 700; color: #E6F2FF; }
.elt-gratitude-stats span { font-size: 11px; color: #8899BB; }

.elt-gratitude-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.elt-gratitude-card { display: flex; flex-direction: column; gap: 10px; }

.elt-gratitude-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.elt-gratitude-name { font-size: 14px; font-weight: 700; color: #E6F2FF; }
.elt-gratitude-role { font-size: 12px; color: #8899BB; margin-top: 2px; }
.elt-gratitude-idea { font-size: 13px; color: #C8D8F0; margin: 0; line-height: 1.5; }

.elt-gratitude-result {
  background: rgba(0,229,212,0.06);
  border: 1px solid rgba(0,229,212,0.15);
  border-radius: 8px;
  padding: 10px 12px;
}

.elt-gratitude-result-label { font-size: 11px; font-weight: 600; color: #00E5D4; display: block; margin-bottom: 4px; }
.elt-gratitude-result p { font-size: 12px; color: #8899BB; margin: 0; }

.elt-news-list { display: flex; flex-direction: column; gap: 12px; }

.elt-news-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.elt-news-item:last-child { border-bottom: none; padding-bottom: 0; }
.elt-news-date { font-size: 11px; color: #8899BB; white-space: nowrap; margin-top: 2px; min-width: 80px; }
.elt-news-item p { font-size: 13px; color: #C8D8F0; margin: 0; line-height: 1.5; }

/* ---- API KEYS ---- */
.elt-api-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.elt-api-card { display: flex; flex-direction: column; gap: 8px; }

.elt-api-primary {
  border-color: rgba(30,91,255,0.3);
  background: linear-gradient(135deg, rgba(30,91,255,0.08), #111A33);
}

.elt-api-label {
  font-size: 11px;
  color: #8899BB;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.elt-api-key-id { font-size: 13px; font-weight: 700; color: #E6F2FF; margin: 0; word-break: break-all; }
.elt-api-card h2 { font-size: 18px; font-weight: 700; color: #E6F2FF; margin: 0; }
.elt-api-card p { font-size: 12px; color: #8899BB; margin: 0; flex: 1; }
.elt-api-secret { display: flex; align-items: center; gap: 8px; margin-top: 4px; overflow: hidden; }
.elt-api-secret .elt-code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
.elt-api-secret .elt-btn-ghost { flex-shrink: 0; }
.elt-api-doc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.elt-pre {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 12px;
  color: #00E5D4;
  overflow-x: auto;
  margin: 0;
}

/* ---- TARIFF GRID ---- */
.elt-tariff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 340px));
  gap: 20px;
  justify-content: center;
}

/* ---- REFERRAL ---- */
.elt-referral-top { display: flex; flex-direction: column; gap: 16px; }
.elt-referral-link-card { display: flex; flex-direction: column; gap: 12px; }

.elt-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.elt-kpi-val { font-size: 20px; font-weight: 700; color: #E6F2FF; }
.elt-kpi-label { font-size: 12px; color: #8899BB; margin-top: 2px; }
.elt-kpi-caption { font-size: 11px; color: #8899BB; }

.elt-referral-tables { display: flex; flex-direction: column; gap: 16px; }

/* ---- SETTINGS ---- */
.elt-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Оформление: переключатель темы */
.elt-label-text {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #8899BB;
  font-weight: 500;
}
.elt-theme-toggle {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
}
.elt-theme-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #B9C8E6;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.elt-theme-opt:hover { border-color: rgba(90,150,255,0.5); }
.elt-theme-opt.active {
  border-color: #4D8DFF;
  background: rgba(77,141,255,0.15);
  color: #E6F2FF;
}
.lightTheme .elt-label-text { color: rgba(10,15,30,.5); }
.lightTheme .elt-theme-opt { background: #F4F7FC; border-color: rgba(10,15,30,.1); color: #45506B; }
.lightTheme .elt-theme-opt.active { background: rgba(77,141,255,0.12); border-color: #4D8DFF; color: #0A1020; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .elt-page-wrap { padding: 20px 16px; }
  .elt-constructor-grid { grid-template-columns: 1fr; }
  .elt-support-cards { grid-template-columns: 1fr; }
  .elt-settings-grid { grid-template-columns: 1fr; }
  .elt-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .elt-form-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LIGHT THEME — переопределения для новых .elt-* компонентов
   ============================================================ */

/* Page layout */
.lightTheme .elt-page-title { color: #0A0F1E; }
.lightTheme .elt-page-subtitle { color: rgba(10,15,30,.5); }
.lightTheme .elt-mini-label { color: #1E5BFF; }

/* Cards */
.lightTheme .elt-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.lightTheme .elt-card-head h2 { color: #0A0F1E; }
.lightTheme .elt-card-caption { color: rgba(10,15,30,.45); }

/* Lock badge */
.lightTheme .elt-lock-badge {
  color: #B07A10;
  background: rgba(217,164,65,.1);
  border-color: rgba(217,164,65,.25);
}

/* Buttons */
.lightTheme .elt-btn-ghost {
  color: rgba(10,15,30,.55);
  border-color: rgba(0,0,0,.12);
}
.lightTheme .elt-btn-ghost:hover {
  color: #0A0F1E;
  border-color: rgba(0,0,0,.22);
}
.lightTheme .elt-btn-secondary {
  background: rgba(30,91,255,.08);
  color: #1E5BFF;
  border-color: rgba(30,91,255,.25);
}

/* Form elements */
.lightTheme .elt-label { color: rgba(10,15,30,.5); }
.lightTheme .elt-input,
.lightTheme .elt-textarea {
  background: #F8FAFC;
  border-color: rgba(0,0,0,.12);
  color: #0A0F1E;
}
.lightTheme .elt-select {
  background-color: #F8FAFC;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230A0F1E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border-color: rgba(0,0,0,.12);
  color: #0A0F1E;
}
.lightTheme .elt-file-upload-btn {
  background: #F8FAFC;
  border-color: rgba(0,0,0,.12);
  color: #0A0F1E;
}
.lightTheme .elt-file-upload-btn:hover {
  border-color: rgba(30,91,255,.4);
  background: rgba(30,91,255,.04);
}
.lightTheme .elt-input:focus,
.lightTheme .elt-select:focus,
.lightTheme .elt-textarea:focus {
  border-color: rgba(30,91,255,.4);
}
.lightTheme .elt-select option { background: #fff; color: #0A0F1E; }
.lightTheme .elt-form-warning {
  color: #B07A10;
  background: rgba(217,164,65,.07);
  border-color: rgba(217,164,65,.2);
}

/* Table panel */
.lightTheme .elt-table-panel {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.08);
}
.lightTheme .elt-table-head {
  border-bottom-color: rgba(0,0,0,.07);
}
.lightTheme .elt-table-head h2 { color: #0A0F1E; }
.lightTheme .elt-table th {
  color: rgba(10,15,30,.45);
  border-bottom-color: rgba(0,0,0,.07);
}
.lightTheme .elt-table td {
  color: #1A2A4A;
  border-bottom-color: rgba(0,0,0,.05);
}
.lightTheme .elt-table tr:hover td { background: rgba(30,91,255,.03); }

/* Code */
.lightTheme .elt-code {
  color: #0A7A6E;
  background: rgba(0,229,212,.08);
}
.lightTheme .elt-pre {
  background: #F1F5F9;
  border-color: rgba(0,0,0,.08);
  color: #0A7A6E;
}

/* Status badges */
.lightTheme .elt-status-completed,
.lightTheme .elt-status-done { color: #16A34A; background: rgba(22,163,74,.1); }
.lightTheme .elt-status-pending,
.lightTheme .elt-status-sent { color: #B07A10; background: rgba(217,164,65,.1); }
.lightTheme .elt-status-cancelled,
.lightTheme .elt-status-bad { color: #DC2626; background: rgba(220,38,38,.08); }

/* KPI row (Referrals) */
.lightTheme .elt-kpi-val { color: #0A0F1E; }
.lightTheme .elt-kpi-label { color: rgba(10,15,30,.5); }
.lightTheme .elt-kpi-caption { color: rgba(10,15,30,.4); }

/* Profile cards */
.lightTheme .elt-profile-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.08);
}
.lightTheme .elt-profile-card:hover { border-color: rgba(30,91,255,.25); }
.lightTheme .elt-profile-title { color: #0A0F1E; }
.lightTheme .elt-profile-summary { color: rgba(10,15,30,.5); }
.lightTheme .elt-profile-category { color: rgba(10,15,30,.45); }
.lightTheme .elt-profile-meta span {
  color: rgba(10,15,30,.5);
  background: rgba(0,0,0,.04);
}
.lightTheme .elt-profile-icon-wrap {
  background: rgba(30,91,255,.08);
}

/* Profile rows (Constructor sidebar) */
.lightTheme .elt-profile-row {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.07);
}
.lightTheme .elt-profile-row:hover { background: rgba(30,91,255,.06); }
.lightTheme .elt-profile-row b { color: #0A0F1E; }
.lightTheme .elt-profile-row span { color: rgba(10,15,30,.45); }

/* Competency tags */
.lightTheme .elt-comp-tag {
  color: rgba(10,15,30,.55);
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.09);
}
.lightTheme .elt-comp-tag:hover {
  color: #1E5BFF;
  background: rgba(30,91,255,.08);
  border-color: rgba(30,91,255,.25);
}
.lightTheme .elt-comp-tag-ai {
  color: #0A7A6E;
  background: rgba(0,229,212,.07);
  border-color: rgba(0,229,212,.2);
}
.lightTheme .elt-comp-section-head b { color: #0A0F1E; }
.lightTheme .elt-comp-section-head small { color: rgba(10,15,30,.45); }

/* AI panel — light theme */
.lightTheme .elt-ai-panel-wrap {
  background: linear-gradient(135deg, rgba(30,91,255,.3), rgba(0,229,212,.3), rgba(30,91,255,.3));
  background-size: 300% 300%;
}
.lightTheme .elt-ai-panel {
  background: #FFFFFF;
}
.lightTheme .elt-ai-title { color: #0A0F1E; }
.lightTheme .elt-ai-badge {
  color: #0A7A6E;
  background: rgba(0,229,212,.09);
  border-color: rgba(0,229,212,.22);
}
.lightTheme .elt-ai-badge-soon {
  color: #6B7A99;
  background: rgba(107,122,153,.08);
  border-color: rgba(107,122,153,.18);
}
.lightTheme .elt-ai-msg-bubble { color: #1A2540; }
.lightTheme .elt-ai-msg-bot .elt-ai-msg-bubble {
  background: rgba(30,91,255,.06);
  border-color: rgba(30,91,255,.14);
}
.lightTheme .elt-ai-msg-user .elt-ai-msg-bubble {
  background: rgba(0,229,212,.07);
  border-color: rgba(0,229,212,.18);
  color: #0A2040;
}
.lightTheme .elt-ai-input {
  background: #F4F7FF;
  border-color: rgba(30,91,255,.2);
  color: #0A0F1E;
}
.lightTheme .elt-ai-input::placeholder { color: #8899BB; }
.lightTheme .elt-ai-input:focus {
  border-color: #1E5BFF;
  box-shadow: 0 0 0 3px rgba(30,91,255,.08);
}
.lightTheme .elt-ai-suggest-label { color: rgba(10,15,30,.45); }
.lightTheme .elt-ai-messages::-webkit-scrollbar-thumb { background: rgba(30,91,255,.2); }

/* Import steps */
.lightTheme .elt-import-num {
  background: rgba(30,91,255,.1);
  color: #1E5BFF;
}
.lightTheme .elt-import-step b { color: #0A0F1E; }
.lightTheme .elt-import-step p { color: rgba(10,15,30,.5); }

/* Support */
.lightTheme .elt-support-card h2 { color: #0A0F1E; }
.lightTheme .elt-support-card p { color: rgba(10,15,30,.5); }
.lightTheme .elt-support-sla { color: rgba(10,15,30,.4); }
.lightTheme .elt-support-badge-neutral {
  color: rgba(10,15,30,.5);
  background: rgba(0,0,0,.05);
}
.lightTheme .elt-support-badge-idea {
  color: #0A7A6E;
  background: rgba(0,229,212,.08);
}

/* Gratitude */
.lightTheme .elt-gratitude-hero h2 { color: #0A0F1E; }
.lightTheme .elt-gratitude-hero p { color: rgba(10,15,30,.5); }
.lightTheme .elt-gratitude-stats strong { color: #0A0F1E; }
.lightTheme .elt-gratitude-stats span { color: rgba(10,15,30,.45); }
.lightTheme .elt-gratitude-name { color: #0A0F1E; }
.lightTheme .elt-gratitude-role { color: rgba(10,15,30,.45); }
.lightTheme .elt-gratitude-idea { color: #1A2A4A; }
.lightTheme .elt-gratitude-result {
  background: rgba(0,229,212,.05);
  border-color: rgba(0,229,212,.15);
}
.lightTheme .elt-gratitude-result-label { color: #0A7A6E; }
.lightTheme .elt-gratitude-result p { color: rgba(10,15,30,.5); }

/* News */
.lightTheme .elt-news-item { border-bottom-color: rgba(0,0,0,.07); }
.lightTheme .elt-news-date { color: rgba(10,15,30,.4); }
.lightTheme .elt-news-item p { color: #1A2A4A; }

/* API keys */
.lightTheme .elt-api-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.08);
}
.lightTheme .elt-api-primary {
  background: linear-gradient(135deg, rgba(30,91,255,.06), #FFFFFF);
  border-color: rgba(30,91,255,.2);
}
.lightTheme .elt-api-label { color: rgba(10,15,30,.45); }
.lightTheme .elt-api-key-id { color: #0A0F1E; }
.lightTheme .elt-api-card h2 { color: #0A0F1E; }
.lightTheme .elt-api-card p { color: rgba(10,15,30,.5); }
.lightTheme .elt-api-doc-actions .elt-btn-ghost { color: rgba(10,15,30,.55); }

/* Referral */
.lightTheme .elt-referral-link-card { background: #FFFFFF; }

/* Settings grid */
.lightTheme .elt-settings-grid .elt-card { background: #FFFFFF; }

/* Tariff grid */
.lightTheme .elt-tariff-grid .tariffCard {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.09);
}

/* ---- TARIFF CARD (premium) ---- */
.elt-tariff-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: start;
}

.elt-tariff-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.elt-tariff-name {
  font-size: 20px;
  font-weight: 700;
  color: #E6F2FF;
}

.elt-tariff-price {
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
}

.elt-tariff-desc {
  font-size: 13px;
  color: #8899BB;
  margin: 0;
  flex: 1;
}

.elt-tariff-features {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elt-tariff-features li {
  font-size: 13px;
  color: #C8D8F0;
}

.elt-tariff-locked {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 10px;
  margin-top: 4px;
}

.elt-tariff-locked span {
  font-size: 11px;
  color: #8899BB;
  display: block;
  margin-bottom: 6px;
}

.elt-tariff-locked-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.elt-tariff-locked-tags em {
  font-style: normal;
  font-size: 11px;
  color: #8899BB;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  padding: 2px 7px;
}

/* Light theme overrides for tariff card */
.lightTheme .elt-tariff-card { background: #FFFFFF; border-color: rgba(0,0,0,.09); }
.lightTheme .elt-tariff-name { color: #0A0F1E; }
.lightTheme .elt-tariff-price { color: #0A0F1E; }
.lightTheme .elt-tariff-desc { color: rgba(10,15,30,.5); }
.lightTheme .elt-tariff-features li { color: #1A2A4A; }
.lightTheme .elt-tariff-locked { border-top-color: rgba(0,0,0,.07); }
.lightTheme .elt-tariff-locked span { color: rgba(10,15,30,.45); }
.lightTheme .elt-tariff-locked-tags em {
  color: rgba(10,15,30,.5);
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}

/* ── Tariff Upgrade Modal ── */
.elt-upgrade-modal {
  background: #111A33;
  border: 1px solid rgba(30,91,255,.18);
  border-radius: 20px;
  width: 100%;
  max-width: 820px;
  padding: 32px;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.elt-upgrade-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}
.elt-upgrade-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #00E5D4; margin-bottom: 6px;
}
.elt-upgrade-title { font-size: 22px; font-weight: 700; color: #E6F2FF; margin-bottom: 4px; }
.elt-upgrade-subtitle { font-size: 13px; color: rgba(230,242,255,.45); }
.elt-upgrade-current-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,229,212,.08); border: 1px solid rgba(0,229,212,.2);
  border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600;
  color: #00E5D4; margin: 12px 0 24px;
}
.elt-upgrade-current-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #00E5D4; box-shadow: 0 0 6px #00E5D4;
}
.elt-upgrade-grid { display: grid; gap: 14px; }
.elt-upgrade-grid-1 { grid-template-columns: 1fr; max-width: 360px; }
.elt-upgrade-grid-2 { grid-template-columns: repeat(2, 1fr); }
.elt-upgrade-grid-3 { grid-template-columns: repeat(3, 1fr); }
.elt-upgrade-card {
  background: #0B1020; border: 1px solid rgba(30,91,255,.15);
  border-radius: 14px; padding: 20px; cursor: pointer;
  transition: all .2s; position: relative; overflow: hidden;
}
.elt-upgrade-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #1E5BFF, #00E5D4); opacity: 0; transition: opacity .2s;
}
.elt-upgrade-card:hover { border-color: rgba(30,91,255,.4); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(30,91,255,.15); }
.elt-upgrade-card:hover::before { opacity: 1; }
.elt-upgrade-card-top { border-color: rgba(0,229,212,.3); background: rgba(0,229,212,.04); }
.elt-upgrade-card-top::before { opacity: 1; background: linear-gradient(90deg, #00E5D4, #1E5BFF); }
.elt-upgrade-rec-label {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,229,212,.12); border: 1px solid rgba(0,229,212,.25);
  border-radius: 20px; font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #00E5D4; padding: 3px 8px;
}
.elt-upgrade-tier { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(230,242,255,.35); margin-bottom: 8px; }
.elt-upgrade-name { font-size: 18px; font-weight: 700; color: #E6F2FF; margin-bottom: 4px; }
.elt-upgrade-price { font-size: 13px; color: rgba(230,242,255,.5); margin-bottom: 14px; }
.elt-upgrade-price strong { font-size: 16px; font-weight: 700; color: #E6F2FF; }
.elt-upgrade-features { list-style: none; margin-bottom: 18px; padding: 0; }
.elt-upgrade-features li { font-size: 12px; color: rgba(230,242,255,.6); padding: 3px 0; display: flex; align-items: center; gap: 7px; }
.elt-upgrade-features li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgba(0,229,212,.5); flex-shrink: 0; }
.elt-upgrade-btn { width: 100%; padding: 10px; border-radius: 10px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: inherit; }
.elt-upgrade-btn-blue { background: linear-gradient(135deg, #1E5BFF, #0040CC); color: #fff; }
.elt-upgrade-btn-blue:hover { opacity: .9; }
.elt-upgrade-btn-teal { background: linear-gradient(135deg, #00E5D4, #00B8AA); color: #0A0F1E; }
.elt-upgrade-btn-teal:hover { opacity: .9; }
.elt-upgrade-max-block {
  background: rgba(0,229,212,.05); border: 1px solid rgba(0,229,212,.15);
  border-radius: 14px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.elt-upgrade-max-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(0,229,212,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.elt-upgrade-max-text { flex: 1; }
.elt-upgrade-max-text h3 { font-size: 15px; font-weight: 700; color: #E6F2FF; margin-bottom: 4px; }
.elt-upgrade-max-text p { font-size: 12px; color: rgba(230,242,255,.5); }
.elt-upgrade-contact-btn {
  padding: 10px 20px; border-radius: 10px; border: 1px solid rgba(0,229,212,.3);
  background: rgba(0,229,212,.08); color: #00E5D4; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; font-family: inherit; text-decoration: none; transition: all .15s;
}
.elt-upgrade-contact-btn:hover { background: rgba(0,229,212,.15); }
.lightTheme .elt-upgrade-modal { background: #fff; border-color: rgba(30,91,255,.12); }
.lightTheme .elt-upgrade-title { color: #0A0F1E; }
.lightTheme .elt-upgrade-card { background: #F8FAFC; border-color: rgba(30,91,255,.12); }
.lightTheme .elt-upgrade-card-top { background: rgba(0,229,212,.03); }
.lightTheme .elt-upgrade-name { color: #0A0F1E; }
.lightTheme .elt-upgrade-price { color: #64748B; }
.lightTheme .elt-upgrade-price strong { color: #0A0F1E; }
.lightTheme .elt-upgrade-features li { color: #475569; }
.lightTheme .elt-upgrade-max-block { background: rgba(0,229,212,.03); }
.lightTheme .elt-upgrade-max-text h3 { color: #0A0F1E; }
.lightTheme .elt-upgrade-max-text p { color: #64748B; }

/* ─── Dev Portal ─────────────────────────────────────────────────────────────── */
.devBody { background: #060A14; min-height: 100vh; font-family: 'Manrope', sans-serif; color: #E6F2FF; }
.devLockPage { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(ellipse at 30% 40%, rgba(30,91,255,.15) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(0,229,212,.08) 0%, transparent 60%), #060A14; }
.devLockCard { background: rgba(17,26,51,.85); border: 1px solid rgba(30,91,255,.25); border-radius: 20px; padding: 48px 40px; width: 100%; max-width: 420px; text-align: center; backdrop-filter: blur(20px); }
.devLockIcon { font-size: 36px; margin-bottom: 16px; }
.devLockTitle { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.devLockSub { font-size: 13px; color: rgba(230,242,255,.5); margin-bottom: 32px; }
.devLockLabel { display: block; text-align: left; font-size: 12px; color: rgba(230,242,255,.6); margin-bottom: 8px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.devLockInput { width: 100%; background: rgba(10,15,30,.8); border: 1px solid rgba(30,91,255,.3); border-radius: 12px; padding: 12px 16px; color: #E6F2FF; font-size: 15px; font-family: 'Manrope', sans-serif; outline: none; box-sizing: border-box; transition: border-color .2s; }
.devLockInput:focus { border-color: #1E5BFF; }
.devLockError { color: #FF6B6B; font-size: 13px; margin-top: 8px; }
.devLockBtn { width: 100%; margin-top: 20px; padding: 13px; background: linear-gradient(135deg, #1E5BFF, #00E5D4); border: none; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 700; font-family: 'Manrope', sans-serif; cursor: pointer; transition: opacity .2s; }
.devLockBtn:hover { opacity: .9; }
.devLockFooter { margin-top: 24px; font-size: 12px; color: rgba(230,242,255,.3); }
.devPortal { display: flex; flex-direction: column; min-height: 100vh; }
.devPortalHeader { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: rgba(11,16,32,.95); border-bottom: 1px solid rgba(255,255,255,.06); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); }
.devPortalLogo { display: flex; align-items: center; gap: 12px; }
.devPortalBadge { background: rgba(30,91,255,.2); border: 1px solid rgba(30,91,255,.4); color: #7AABFF; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.devPortalActions { display: flex; gap: 8px; }
.devPortalBody { padding: 28px 32px; flex: 1; }
.devStats { display: flex; gap: 16px; margin-bottom: 28px; }
.devStat { background: rgba(17,26,51,.7); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 16px 24px; display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.devStatNum { font-size: 28px; font-weight: 800; color: #1E5BFF; }
.devStatLabel { font-size: 12px; color: rgba(230,242,255,.5); }
.devPortalGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.devCol { display: flex; flex-direction: column; gap: 20px; }
.devSection { background: rgba(17,26,51,.6); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 20px; }
.devFormSection { background: rgba(30,91,255,.06); border-color: rgba(30,91,255,.2); }
.devSectionHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.devSectionHead h2 { font-size: 15px; font-weight: 700; color: #E6F2FF; margin: 0; }
.devBtn { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; border: none; transition: opacity .2s, background .2s; }
.devBtnPrimary { background: #1E5BFF; color: #fff; }
.devBtnPrimary:hover { background: #1a4fd6; }
.devBtnSecondary { background: rgba(255,255,255,.08); color: #E6F2FF; border: 1px solid rgba(255,255,255,.12); }
.devBtnSecondary:hover { background: rgba(255,255,255,.13); }
.devBtnDanger { background: rgba(255,80,80,.12); color: #FF8080; border: 1px solid rgba(255,80,80,.25); }
.devBtnDanger:hover { background: rgba(255,80,80,.2); }
.devBtnIcon { width: 28px; height: 28px; border-radius: 6px; font-size: 13px; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; font-family: 'Manrope', sans-serif; }
.devBtnEdit { background: rgba(30,91,255,.15); color: #7AABFF; }
.devBtnEdit:hover { background: rgba(30,91,255,.3); }
.devBtnDel { background: rgba(255,80,80,.1); color: #FF8080; }
.devBtnDel:hover { background: rgba(255,80,80,.2); }
.devProfList { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; }
.devProfItem { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 10px 14px; }
.devProfInfo { display: flex; align-items: center; gap: 10px; }
.devProfInfo strong { font-size: 14px; color: #E6F2FF; }
.devProfCat { font-size: 11px; color: rgba(230,242,255,.4); background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 20px; }
.devProfComps { font-size: 11px; color: #00E5D4; }
.devProfActions { display: flex; gap: 6px; }
.devQList { display: flex; flex-direction: column; gap: 8px; max-height: 500px; overflow-y: auto; }
.devQItem { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 12px 14px; position: relative; }
.devQMeta { display: flex; gap: 8px; margin-bottom: 6px; }
.devQScope { font-size: 11px; color: #1E5BFF; background: rgba(30,91,255,.15); padding: 2px 8px; border-radius: 20px; }
.devQComp { font-size: 11px; color: #00E5D4; background: rgba(0,229,212,.1); padding: 2px 8px; border-radius: 20px; }
.devQText { font-size: 13px; color: #E6F2FF; margin-bottom: 8px; line-height: 1.4; }
.devQAnswers { display: flex; flex-direction: column; gap: 3px; }
.devQAnswer { font-size: 12px; color: rgba(230,242,255,.55); }
.devQRedFlag { color: #FF8080; }
.devQActions { position: absolute; top: 10px; right: 10px; }
.devCompSection { margin-top: 0; }
.devCompGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.devCompItem { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 8px 12px; }
.devCompId { font-size: 11px; color: #1E5BFF; font-family: monospace; min-width: 80px; }
.devCompTitle { font-size: 13px; color: #E6F2FF; flex: 1; }
.devAddCompRow { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.devFormGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.devField { display: flex; flex-direction: column; gap: 6px; }
.devFieldFull { grid-column: 1 / -1; }
.devField label { font-size: 12px; color: rgba(230,242,255,.6); font-weight: 600; letter-spacing: .04em; }
.devInput { background: rgba(10,15,30,.8); border: 1px solid rgba(30,91,255,.25); border-radius: 10px; padding: 9px 12px; color: #E6F2FF; font-size: 13px; font-family: 'Manrope', sans-serif; outline: none; transition: border-color .2s; width: 100%; box-sizing: border-box; }
.devInput:focus { border-color: #1E5BFF; }
.devTextarea { resize: vertical; min-height: 80px; }
.devSelect { appearance: none; cursor: pointer; }
.devFormActions { display: flex; gap: 8px; margin-top: 16px; }

/* ===== ORG CHART ===== */
.oc-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.oc-list-panel { background: var(--panel); border-radius: 14px; border: 1px solid var(--border); overflow: hidden; }
.oc-list-head { padding: 14px 16px 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; border-bottom: 1px solid var(--border); }
.oc-list-body { padding: 8px 0; max-height: 420px; overflow-y: auto; }
.oc-list-node { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; transition: background .15s; position: relative; }
.oc-list-node:hover { background: rgba(30,91,255,.07); }
.oc-list-node.selected { background: rgba(30,91,255,.13); }
.oc-list-connector { font-size: 13px; color: var(--text-muted); opacity: .5; flex-shrink: 0; margin-right: -4px; }
.oc-list-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
.oc-list-info { flex: 1; min-width: 0; }
.oc-list-name { display: block; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-list-pos { display: block; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-role-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; }
.oc-role-ceo { background: rgba(30,91,255,.18); color: #1E5BFF; }
.oc-role-head { background: rgba(0,229,212,.15); color: #00E5D4; }
.oc-role-emp { background: rgba(255,255,255,.07); color: var(--text-muted); }
.oc-selected-card { padding: 14px 16px; border-top: 1px solid var(--border); }
.oc-sel-avatar-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.oc-sel-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,#1E5BFF,#00E5D4); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; position: relative; cursor: pointer; transition: box-shadow .15s; }
.oc-sel-avatar:hover { box-shadow: 0 0 0 2px #1E5BFF; }
.oc-sel-avatar:hover .oc-avatar-upload-hint { opacity: 1; }
.oc-sel-avatar-info { flex: 1; min-width: 0; }
.oc-sel-pos { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.oc-upload-label { display: inline-block; font-size: 11px; font-weight: 600; color: #1E5BFF; cursor: pointer; padding: 3px 8px; border: 1px solid rgba(30,91,255,.3); border-radius: 6px; transition: background .15s; }
.oc-upload-label:hover { background: rgba(30,91,255,.08); }
.oc-upload-hint { font-size: 10px; color: var(--text-muted); margin-top: 4px; opacity: .7; }
.oc-upload-error { font-size: 11px; color: #F87171; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.2); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; }
.oc-sel-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.oc-sel-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.oc-sel-row span { color: var(--text-muted); }
.oc-sel-row b { color: var(--text); font-weight: 600; }
.oc-chart-panel { background: var(--panel); border-radius: 14px; border: 1px solid var(--border); padding: 24px 16px; overflow-x: auto; }
.oc-chart-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.oc-chart-row-ceo { margin-bottom: 0; }
.oc-chart-connector-v { width: 2px; height: 24px; background: var(--border); margin: 0 auto; }
.oc-chart-connector-h { height: 2px; background: var(--border); margin: 0 auto; max-width: 100%; }
.oc-card { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; padding: 14px 12px; width: 140px; text-align: center; cursor: pointer; transition: border-color .15s, transform .15s; flex-shrink: 0; }
.oc-card:hover { border-color: #1E5BFF; transform: translateY(-2px); }
.oc-card-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; margin: 0 auto 8px; overflow: hidden; position: relative; cursor: pointer; transition: box-shadow .15s; }
.oc-card-avatar:hover { box-shadow: 0 0 0 2px #1E5BFF; }
.oc-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.oc-avatar-upload-hint { position: absolute; inset: 0; background: rgba(0,0,0,.45); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; font-size: 14px; color: #fff; pointer-events: none; }
.oc-card-avatar:hover .oc-avatar-upload-hint,
.oc-list-avatar:hover .oc-avatar-upload-hint,
.oc-sel-avatar:hover .oc-avatar-upload-hint { opacity: 1; }
.oc-list-avatar { position: relative; }
.oc-card-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.3; }
.oc-card-pos { font-size: 10px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.3; }
.oc-card-dept { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; display: inline-block; }
.oc-view-toggle { display: flex; background: rgba(255,255,255,.06); border-radius: 20px; padding: 3px; gap: 2px; }
.oc-view-btn { background: none; border: none; padding: 5px 14px; border-radius: 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all .15s; }
.oc-view-btn.active { background: #1E5BFF; color: #fff; }
body.light .oc-card { background: #fff; }
body.light .oc-role-emp { background: rgba(0,0,0,.06); color: #666; }
body.light .oc-view-toggle { background: rgba(0,0,0,.06); }

/* ── СБП Модальное окно оплаты ─────────────────────────────────────── */
.sbp-modal { max-width: 600px; width: 100%; }
.sbp-modal-inner { display: flex; gap: 28px; align-items: flex-start; padding: 0 4px 4px; }
.sbp-qr-block { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; }
.sbp-qr-wrap { background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 0 0 1px rgba(30,91,255,.15); }
.sbp-qr-hint { font-size: 12px; color: #8899BB; text-align: center; max-width: 160px; line-height: 1.4; }
.sbp-deeplink-btn { background: linear-gradient(135deg, #1E5BFF, #00E5D4); color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-family: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity .2s; }
.sbp-deeplink-btn:hover { opacity: .85; }
.sbp-details { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.sbp-detail-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 8px 12px; background: rgba(255,255,255,.04); border-radius: 8px; border: 1px solid rgba(255,255,255,.06); }
.sbp-detail-row span:first-child { color: #8899BB; }
.sbp-detail-row strong { font-size: 16px; font-weight: 700; color: #00E5D4; }
.sbp-detail-status .sbp-status-waiting { color: #F5A623; font-size: 12px; font-weight: 600; }
.sbp-promo-section { margin-top: 4px; }
.sbp-promo-row { display: flex; gap: 8px; }
.sbp-promo-input { flex: 1; min-width: 0; }
.sbp-promo-applied { font-size: 13px; color: #00E5D4; font-weight: 600; padding: 8px 12px; background: rgba(0,229,212,.08); border-radius: 8px; border: 1px solid rgba(0,229,212,.2); }
.sbp-actions { display: flex; gap: 10px; margin-top: 4px; }
.sbp-actions .elt-btn-primary { flex: 1; }
.sbp-footer { font-size: 11px; color: #4A5568; text-align: center; margin-top: 4px; }
.sbp-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #1E5BFF, #00E5D4); color: #fff; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600; padding: 12px 24px; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,229,212,.3); z-index: 9999; animation: sbpToastIn .3s ease; }
@keyframes sbpToastIn { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.lightTheme .sbp-detail-row { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
.lightTheme .sbp-detail-row span:first-child { color: #6B7A99; }

/* === SBP Pack Selector === */
.sbp-pack-selector { margin-bottom: 16px; }
.sbp-pack-label { font-size: 11px; font-weight: 600; color: var(--mutedDark); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.sbp-pack-options { display: flex; gap: 8px; }
.sbp-pack-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px; border-radius: 10px; border: 1.5px solid rgba(30,91,255,.25); background: rgba(30,91,255,.06); color: var(--ice); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s; }
.sbp-pack-btn span { font-size: 11px; font-weight: 500; color: var(--mutedDark); }
.sbp-pack-btn:hover { border-color: #1E5BFF; background: rgba(30,91,255,.14); }
.sbp-pack-btn.active { border-color: #00E5D4; background: rgba(0,229,212,.1); color: #00E5D4; }
.sbp-pack-btn.active span { color: #00E5D4; }

/* === Пополнение баланса через провайдера Монета === */
.topup-modal { max-width: 468px; width: 100%; }
.topup-modal-narrow { max-width: 400px; }
.topup-inner { display: flex; flex-direction: column; gap: 14px; padding: 4px 4px 6px; }

.topup-balance-now { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: rgba(30,91,255,.07); border: 1px solid rgba(30,91,255,.16); }
.topup-balance-label { font-size: 12px; color: var(--mutedDark); }
.topup-balance-value { font-size: 22px; font-weight: 800; color: var(--ice); }
.topup-balance-value em { font-size: 12px; font-weight: 600; font-style: normal; color: var(--mutedDark); margin-left: 4px; }

.topup-section-label { font-size: 11px; font-weight: 700; color: var(--mutedDark); text-transform: uppercase; letter-spacing: .07em; margin-top: 2px; }

.topup-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.topup-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px 12px; border-radius: 12px; border: 1.5px solid rgba(30,91,255,.22); background: rgba(30,91,255,.05); color: var(--ice); cursor: pointer; transition: transform .16s, border-color .16s, background .16s; }
.topup-pack:hover { border-color: #1E5BFF; background: rgba(30,91,255,.12); transform: translateY(-1px); }
.topup-pack-selected { border-color: #00E5D4; background: rgba(0,229,212,.10); box-shadow: 0 0 0 1px rgba(0,229,212,.25); }
.topup-pack-count { font-size: 20px; font-weight: 800; line-height: 1; }
.topup-pack-unit { font-size: 11px; color: var(--mutedDark); }
.topup-pack-price { font-size: 14px; font-weight: 700; margin-top: 7px; }
.topup-pack-per { font-size: 10px; color: var(--mutedDark); }
.topup-pack-selected .topup-pack-count, .topup-pack-selected .topup-pack-price { color: #00E5D4; }
.topup-pack-badge { position: absolute; top: -8px; right: 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #0A0F1E; background: #00E5D4; padding: 2px 6px; border-radius: 6px; }

.topup-promo-row { display: flex; gap: 8px; }
.topup-promo-input { flex: 1; min-width: 0; }
.topup-promo-applied { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #00E5D4; font-weight: 600; padding: 9px 12px; background: rgba(0,229,212,.08); border-radius: 9px; border: 1px solid rgba(0,229,212,.2); }
.topup-promo-clear { background: none; border: none; color: var(--mutedDark); font-size: 12px; cursor: pointer; text-decoration: underline; }
.topup-error-inline { font-size: 12px; color: var(--danger); margin-top: 6px; }

.topup-summary { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.topup-summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ice); }
.topup-summary-muted { color: var(--mutedDark); }
.topup-summary-total { border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; margin-top: 2px; font-size: 14px; }
.topup-summary-total strong { font-size: 18px; color: #00E5D4; font-weight: 800; }

.topup-demo-note { font-size: 12px; color: var(--warning); background: rgba(217,164,65,.1); border: 1px solid rgba(217,164,65,.25); border-radius: 9px; padding: 8px 12px; }

.topup-cta { width: 100%; margin-top: 2px; font-size: 15px; padding: 13px; }
.topup-cta[disabled] { opacity: .6; cursor: default; }
.topup-trust { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--mutedLight); text-align: center; }
.topup-trust svg { color: #00E5D4; flex-shrink: 0; }

.topup-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 8px 10px; }
.topup-state-title { font-size: 17px; font-weight: 700; color: var(--ice); }
.topup-state-sub { font-size: 13px; color: var(--mutedDark); max-width: 320px; line-height: 1.5; }
.topup-state-sub strong { color: var(--ice); }
.topup-state-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.topup-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(30,91,255,.18); border-top-color: #00E5D4; animation: topupSpin .8s linear infinite; }
@keyframes topupSpin { to { transform: rotate(360deg); } }
.topup-badge-ok { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #16D7FF, #00E5D4); box-shadow: 0 8px 28px rgba(0,229,212,.35); }
.topup-badge-err { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--danger); background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3); }

.lightTheme .topup-balance-value, .lightTheme .topup-pack, .lightTheme .topup-summary-row, .lightTheme .topup-state-title, .lightTheme .topup-state-sub strong { color: #0A0F1E; }
.lightTheme .topup-summary { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.07); }
.lightTheme .topup-summary-total { border-top-color: rgba(0,0,0,.1); }

/* ═══════════════════════════════════════════════════════════
   AI-АССИСТЕНТ ПАНЕЛЬ — Dashboard
   ═══════════════════════════════════════════════════════════ */

@keyframes aiGradientBorder {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes aiGlow {
  0%, 100% { box-shadow: 0 0 18px 2px rgba(30,91,255,.18), 0 0 40px 4px rgba(0,229,212,.08); }
  50%       { box-shadow: 0 0 28px 6px rgba(0,229,212,.22), 0 0 60px 10px rgba(30,91,255,.12); }
}

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

@keyframes aiMessageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aiTypingDot {
  0%, 80%, 100% { opacity: .4; transform: scale(1); }
  40%            { opacity: 1;  transform: scale(1.3); }
}

.elt-ai-panel-wrap {
  position: relative;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, #1E5BFF, #00E5D4, #1E5BFF, #7B61FF, #00E5D4);
  background-size: 300% 300%;
  animation: aiGradientBorder 4s ease infinite, aiGlow 3s ease-in-out infinite;
}

.elt-ai-panel {
  background: #0B1020;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.elt-ai-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.elt-ai-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1E5BFF, #00E5D4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.elt-ai-title {
  font-size: 14px;
  font-weight: 700;
  color: #E6F2FF;
  letter-spacing: -.01em;
}

.elt-ai-badge {
  font-size: 10px;
  font-weight: 600;
  color: #00E5D4;
  background: rgba(0,229,212,.1);
  border: 1px solid rgba(0,229,212,.25);
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: .04em;
}

.elt-ai-badge-soon {
  font-size: 10px;
  font-weight: 600;
  color: #8899AA;
  background: rgba(136,153,170,.08);
  border: 1px solid rgba(136,153,170,.15);
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: .04em;
}

.elt-ai-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(30,91,255,.3) transparent;
}

.elt-ai-messages::-webkit-scrollbar { width: 4px; }
.elt-ai-messages::-webkit-scrollbar-track { background: transparent; }
.elt-ai-messages::-webkit-scrollbar-thumb { background: rgba(30,91,255,.3); border-radius: 4px; }

.elt-ai-msg {
  display: flex;
  gap: 8px;
  animation: aiMessageIn .3s ease;
}

.elt-ai-msg-user { flex-direction: row-reverse; }

.elt-ai-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E5BFF, #00E5D4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
}

.elt-ai-msg-user .elt-ai-msg-avatar {
  background: linear-gradient(135deg, #1E3A6E, #2A4A8A);
}

.elt-ai-msg-bubble {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #C8D8E8;
}

.elt-ai-msg-bot .elt-ai-msg-bubble {
  background: rgba(30,91,255,.1);
  border: 1px solid rgba(30,91,255,.18);
  border-top-left-radius: 4px;
}

.elt-ai-msg-user .elt-ai-msg-bubble {
  background: rgba(0,229,212,.08);
  border: 1px solid rgba(0,229,212,.15);
  border-top-right-radius: 4px;
  color: #E6F2FF;
}

.elt-ai-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 13px;
  background: #00E5D4;
  margin-left: 2px;
  vertical-align: middle;
  border-radius: 1px;
  animation: aiTypingCursor .7s ease-in-out infinite;
}

.elt-ai-typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}

.elt-ai-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00E5D4;
  opacity: .4;
  animation: aiTypingDot 1.2s ease-in-out infinite;
}

.elt-ai-typing-dots span:nth-child(2) { animation-delay: .2s; }
.elt-ai-typing-dots span:nth-child(3) { animation-delay: .4s; }

.elt-ai-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.elt-ai-input {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(30,91,255,.25);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13px;
  font-family: Manrope, sans-serif;
  color: #E6F2FF;
  resize: none;
  min-height: 40px;
  max-height: 100px;
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}

.elt-ai-input::placeholder { color: #4A5A70; }

.elt-ai-input:focus {
  border-color: #1E5BFF;
  box-shadow: 0 0 0 3px rgba(30,91,255,.12);
}

.elt-ai-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1E5BFF, #00E5D4);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity .2s, transform .15s;
}

.elt-ai-send-btn:hover  { opacity: .85; transform: scale(1.05); }
.elt-ai-send-btn:active { transform: scale(.97); }

.elt-ai-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.elt-ai-quick-btn {
  font-size: 11px;
  font-weight: 600;
  color: #7B9CC4;
  background: rgba(30,91,255,.07);
  border: 1px solid rgba(30,91,255,.18);
  border-radius: 20px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all .18s;
  font-family: Manrope, sans-serif;
}

.elt-ai-quick-btn:hover {
  color: #E6F2FF;
  background: rgba(30,91,255,.18);
  border-color: rgba(30,91,255,.4);
}

.elt-ai-divider {
  height: 1px;
  background: rgba(255,255,255,.05);
  margin: 2px 0;
}

/* ── Filter Bar Variant 3 (Collapsed) ──────────────────────────────────────── */

.elt-filter-bar-v3 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.elt-filter-bar-v3::-webkit-scrollbar { display: none; }

/* Period segment */
.elt-fb-period {
  display: flex;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 2px;
  gap: 1px;
  flex-shrink: 0;
}
.elt-fb-period-btn {
  background: none;
  border: none;
  color: rgba(230,242,255,.4);
  font-size: 11.5px;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.elt-fb-period-btn:hover {
  color: rgba(230,242,255,.75);
  background: rgba(255,255,255,.05);
}
.elt-fb-period-btn.active {
  background: rgba(30,91,255,.25);
  color: #E6F2FF;
  font-weight: 600;
}

/* Filters button */
.elt-fb-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  color: rgba(230,242,255,.5);
  font-size: 11.5px;
  font-family: inherit;
  padding: 5px 11px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: all .15s;
}
.elt-fb-filter-btn:hover {
  background: rgba(30,91,255,.1);
  border-color: rgba(30,91,255,.3);
  color: rgba(230,242,255,.85);
}

/* Active filter count badge */
.elt-fb-badge {
  background: #1E5BFF;
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  line-height: 1.4;
  flex-shrink: 0;
}

/* Active filter tags */
.elt-fb-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,229,212,.08);
  border: 1px solid rgba(0,229,212,.22);
  border-radius: 20px;
  color: #00E5D4;
  font-size: 11px;
  font-family: inherit;
  padding: 3px 9px;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: default;
}
.elt-fb-tag-more {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: rgba(230,242,255,.4);
  cursor: pointer;
}
.elt-fb-tag-x {
  opacity: .5;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  transition: opacity .1s;
}
.elt-fb-tag-x:hover { opacity: 1; }

/* Clear button */
.elt-fb-clear {
  background: none;
  border: none;
  color: rgba(230,242,255,.25);
  font-size: 11px;
  font-family: inherit;
  padding: 4px 6px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color .15s;
}
.elt-fb-clear:hover { color: rgba(230,242,255,.6); }

/* Light theme overrides */
.lightTheme .elt-fb-period { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.07); }
.lightTheme .elt-fb-period-btn { color: rgba(10,15,30,.45); }
.lightTheme .elt-fb-period-btn.active { background: rgba(30,91,255,.15); color: #1E5BFF; }
.lightTheme .elt-fb-filter-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: rgba(10,15,30,.5); }
.lightTheme .elt-fb-filter-btn:hover { background: rgba(30,91,255,.08); border-color: rgba(30,91,255,.25); color: #1E5BFF; }
.lightTheme .elt-fb-tag { background: rgba(0,180,160,.08); border-color: rgba(0,180,160,.25); color: #009688; }
.lightTheme .elt-fb-clear { color: rgba(10,15,30,.3); }
.lightTheme .elt-fb-clear:hover { color: rgba(10,15,30,.6); }

/* ── Filters Modal Panel ────────────────────────────────────────────────────── */

.elt-filters-modal {
  width: 560px;
  max-width: 96vw;
}
.elt-fp-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 60vh;
  overflow-y: auto;
  /* Горизонтальный отступ совпадает с шапкой/футером (24px), иначе ряды
     «вылезали» к краям модалки — выбор опций был не выровнен с заголовком. */
  padding: 18px 24px;
}
.elt-fp-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.elt-fp-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(230,242,255,.4);
  text-transform: uppercase;
  letter-spacing: .06em;
  width: auto;
  gap: 0;
}
.elt-fp-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.elt-fp-opt {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  color: rgba(230,242,255,.5);
  font-size: 12px;
  font-family: inherit;
  padding: 4px 11px;
  cursor: pointer;
  transition: all .13s;
  white-space: nowrap;
}
.elt-fp-opt:hover {
  background: rgba(30,91,255,.1);
  border-color: rgba(30,91,255,.3);
  color: rgba(230,242,255,.85);
}
.elt-fp-opt.active {
  background: rgba(0,229,212,.12);
  border-color: rgba(0,229,212,.35);
  color: #00E5D4;
  font-weight: 600;
}
.elt-fp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 24px по бокам — в одну линию с шапкой; снизу 18px, чтобы «Применить»
     не прилипал к нижней кромке модалки. */
  padding: 16px 24px 18px;
  border-top: 1px solid rgba(255,255,255,.06);
  gap: 10px;
}
.elt-fp-footer .elt-btn-ghost {
  background: none;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: rgba(230,242,255,.4);
  font-size: 12px;
  font-family: inherit;
  padding: 7px 14px;
  cursor: pointer;
  transition: all .15s;
}
.elt-fp-footer .elt-btn-ghost:hover {
  border-color: rgba(255,255,255,.2);
  color: rgba(230,242,255,.7);
}
.elt-fp-footer .blueButton {
  flex: 1;
  max-width: 180px;
}
.elt-fp-empty {
  color: rgba(230,242,255,.45);
  font-size: 13px;
  text-align: center;
  padding: 24px 8px;
  margin: 0;
}

/* Light theme */
.lightTheme .elt-fp-empty { color: rgba(10,15,30,.45); }
.lightTheme .elt-fp-label { color: rgba(10,15,30,.4); }
.lightTheme .elt-fp-opt { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: rgba(10,15,30,.5); }
.lightTheme .elt-fp-opt:hover { background: rgba(30,91,255,.08); border-color: rgba(30,91,255,.25); color: #1E5BFF; }
.lightTheme .elt-fp-opt.active { background: rgba(0,180,160,.1); border-color: rgba(0,180,160,.3); color: #009688; }

/* ═══════════════════════════════════════════════════════════
   VIEW TRANSITIONS + GLOBAL ANIMATIONS  v16
   ═══════════════════════════════════════════════════════════ */

/* View Transition — плавная смена страниц */
@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

::view-transition-old(root) {
  animation: 180ms ease-in vt-fade-out;
}
::view-transition-new(root) {
  animation: 220ms ease-out vt-fade-in;
}

/* Модальное окно — появление */
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modalBackdrop {
  animation: backdrop-in 180ms ease-out;
}
.modal,
.elt-filters-modal {
  animation: modal-in 200ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* KPI-карточки — появление при смене страницы */
@keyframes card-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.elt-kpi-card,
.elt-glass-card,
.elt-panel {
  animation: card-in 240ms ease-out both;
}

/* Stagger для карточек в сетке */
.elt-kpi-grid .elt-kpi-card:nth-child(1) { animation-delay: 0ms; }
.elt-kpi-grid .elt-kpi-card:nth-child(2) { animation-delay: 30ms; }
.elt-kpi-grid .elt-kpi-card:nth-child(3) { animation-delay: 60ms; }
.elt-kpi-grid .elt-kpi-card:nth-child(4) { animation-delay: 90ms; }
.elt-kpi-grid .elt-kpi-card:nth-child(5) { animation-delay: 120ms; }
.elt-kpi-grid .elt-kpi-card:nth-child(6) { animation-delay: 150ms; }
.elt-kpi-grid .elt-kpi-card:nth-child(7) { animation-delay: 180ms; }
.elt-kpi-grid .elt-kpi-card:nth-child(8) { animation-delay: 210ms; }
.elt-kpi-grid .elt-kpi-card:nth-child(9) { animation-delay: 240ms; }

/* Hover-переходы для карточек */
.elt-kpi-card,
.elt-glass-card {
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.elt-kpi-card:hover,
.elt-glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,229,212,0.10);
}

/* Кнопки — плавный hover */
.blueButton,
.elt-btn-ghost,
.elt-fb-filter-btn,
.elt-period-btn,
.elt-fp-opt {
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

/* Левое меню — активный пункт */
.navItem {
  transition: background 140ms ease, color 140ms ease;
}

/* Пункт навигации «В разработке» — некликабельный */
.elt-nav-wip {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.elt-wip-badge {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .2px;
  white-space: nowrap;
  color: #FFC56B;
  background: rgba(255, 168, 56, .14);
  border: 1px solid rgba(255, 168, 56, .35);
}
.lightTheme .elt-wip-badge {
  color: #B5731A;
  background: rgba(255, 168, 56, .16);
  border-color: rgba(181, 115, 26, .3);
}

/* Тулбар — теги фильтров */
.elt-fb-tag {
  animation: card-in 180ms ease-out both;
  transition: background 140ms ease, opacity 140ms ease;
}

/* Таблица — строки */
@keyframes row-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
table tbody tr {
  animation: row-in 200ms ease-out both;
}
table tbody tr:nth-child(1) { animation-delay: 0ms; }
table tbody tr:nth-child(2) { animation-delay: 25ms; }
table tbody tr:nth-child(3) { animation-delay: 50ms; }
table tbody tr:nth-child(4) { animation-delay: 75ms; }
table tbody tr:nth-child(5) { animation-delay: 100ms; }
table tbody tr:nth-child(6) { animation-delay: 125ms; }
table tbody tr:nth-child(7) { animation-delay: 150ms; }
table tbody tr:nth-child(8) { animation-delay: 175ms; }

/* Прогресс-бары — анимация заполнения */
@keyframes bar-fill {
  from { width: 0 !important; }
}
.elt-bar-fill,
.elt-funnel-bar,
.elt-source-bar {
  animation: bar-fill 600ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ASSESSMENT WIZARD
   ═══════════════════════════════════════════════════════════════════════════ */
.aw-modal { width: 720px; max-width: 96vw; max-height: 90vh; display: flex; flex-direction: column; }
.aw-steps { display: flex; align-items: center; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,.06); }
.aw-step { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(230,242,255,.35); font-weight: 500; }
.aw-step > span:first-child { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.aw-step.active { color: #E6F2FF; }
.aw-step.active > span:first-child { background: #1E5BFF; border-color: #1E5BFF; color: #fff; }
.aw-step.done { color: #00E5D4; }
.aw-step.done > svg { width: 22px; height: 22px; border-radius: 50%; background: rgba(0,229,212,.12); border: 1.5px solid #00E5D4; padding: 4px; flex-shrink: 0; }
.aw-step-line { flex: 1; height: 1px; background: rgba(255,255,255,.1); margin: 0 10px; min-width: 20px; }
.aw-step-label { white-space: nowrap; }
.aw-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.aw-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); margin-top: auto; }
.aw-scope-grid { display: flex; flex-direction: column; gap: 10px; }
.aw-scope-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,.03); border: 1.5px solid rgba(255,255,255,.08); border-radius: 10px; cursor: pointer; transition: all .15s; text-align: left; width: 100%; color: #E6F2FF; }
.aw-scope-card:hover { background: rgba(30,91,255,.08); border-color: rgba(30,91,255,.3); }
.aw-scope-card.selected { background: rgba(30,91,255,.12); border-color: #1E5BFF; }
.aw-scope-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #00E5D4; }
.aw-scope-card.selected .aw-scope-icon { background: rgba(30,91,255,.2); color: #1E5BFF; }
.aw-scope-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.aw-scope-text strong { font-size: 14px; font-weight: 600; color: #E6F2FF; }
.aw-scope-text span { font-size: 12px; color: rgba(230,242,255,.5); }
.aw-scope-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; transition: all .15s; }
.aw-scope-card.selected .aw-scope-check { background: #1E5BFF; border-color: #1E5BFF; color: #fff; }
.aw-type-grid { display: flex; flex-direction: column; gap: 10px; }
.aw-type-card { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,.03); border: 1.5px solid rgba(255,255,255,.08); border-radius: 10px; cursor: pointer; transition: all .15s; text-align: left; width: 100%; color: #E6F2FF; overflow: hidden; }
.aw-type-card:hover:not(.locked) { background: rgba(30,91,255,.08); border-color: rgba(30,91,255,.3); }
.aw-type-card.selected { background: rgba(30,91,255,.12); border-color: #1E5BFF; }
.aw-type-card.selected .aw-scope-check { background: #1E5BFF; border-color: #1E5BFF; color: #fff; }
.aw-type-card.locked { opacity: .7; cursor: default; }
.aw-type-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #00E5D4; }
.aw-type-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.aw-type-title-row { display: flex; align-items: center; gap: 8px; }
.aw-type-title-row strong { font-size: 14px; font-weight: 600; color: #E6F2FF; }
.aw-type-text span { font-size: 12px; color: rgba(230,242,255,.5); line-height: 1.5; }
.aw-badge-lock { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: rgba(30,91,255,.2); color: #7aaeff; border: 1px solid rgba(30,91,255,.3); letter-spacing: .3px; }
.aw-lock-overlay { position: absolute; inset: 0; background: rgba(10,15,30,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: rgba(230,242,255,.6); border-radius: 9px; }
.aw-step3-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex: 1; }
.aw-step3-left, .aw-step3-right { display: flex; flex-direction: column; gap: 14px; }
.aw-field-label { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: rgba(230,242,255,.4); display: block; margin-bottom: 6px; }
.aw-emp-select { display: flex; flex-direction: column; gap: 8px; }
.aw-emp-search-wrap { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 12px; color: rgba(230,242,255,.4); }
.aw-emp-search { background: none; border: none; outline: none; color: #E6F2FF; font-size: 13px; flex: 1; }
.aw-emp-search::placeholder { color: rgba(230,242,255,.3); }
.aw-emp-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; scrollbar-width: thin; }
.aw-emp-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.02); border: 1px solid transparent; cursor: pointer; transition: all .12s; text-align: left; width: 100%; color: #E6F2FF; }
.aw-emp-row:hover { background: rgba(30,91,255,.07); border-color: rgba(30,91,255,.2); }
.aw-emp-row.selected { background: rgba(30,91,255,.12); border-color: rgba(30,91,255,.4); }
.aw-emp-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#1E5BFF,#00E5D4); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.aw-emp-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.aw-emp-info strong { font-size: 13px; font-weight: 600; }
.aw-emp-info span { font-size: 11px; color: rgba(230,242,255,.45); }
.aw-emp-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0; transition: all .12s; }
.aw-emp-row.selected .aw-emp-check { background: #1E5BFF; border-color: #1E5BFF; color: #fff; }
.aw-emp-empty { padding: 20px; text-align: center; color: rgba(230,242,255,.3); font-size: 13px; }
/* 360: строка оценщика с выбором роли */
.aw-rater-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.02); border: 1px solid transparent; transition: all .12s; }
.aw-rater-row.selected { background: rgba(0,229,212,.08); border-color: rgba(0,229,212,.3); }
.aw-rater-roles { display: flex; gap: 4px; flex-shrink: 0; }
.aw-role-pill { padding: 4px 9px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: rgba(230,242,255,.6); font-size: 11px; font-weight: 600; cursor: pointer; transition: all .12s; white-space: nowrap; }
.aw-role-pill:hover { border-color: rgba(0,229,212,.4); color: #E6F2FF; }
.aw-role-pill.on { background: rgba(0,229,212,.18); border-color: #00E5D4; color: #00E5D4; }

/* Сводный 360-отчёт на вкладке «Оценка 360» */
.ts360-section { margin-top: 16px; }
.ts360-panel { padding: 18px 20px; }
.ts360-subjects { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.ts360-subj { padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: rgba(230,242,255,.7); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.ts360-subj:hover { border-color: rgba(30,91,255,.4); color: #E6F2FF; }
.ts360-subj.active { background: rgba(30,91,255,.18); border-color: #1E5BFF; color: #fff; }
.ts360-summary { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ts360-overall { flex: 1; min-width: 120px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ts360-overall span { font-size: 12px; color: rgba(230,242,255,.5); }
.ts360-overall b { font-size: 22px; color: #E6F2FF; }
.ts360-gap.high b { color: #F87171; }
.ts360-gap.low b { color: #00E5D4; }
.ts360-raters { font-size: 12.5px; color: rgba(230,242,255,.55); margin-bottom: 14px; }
.ts360-comps { display: flex; flex-direction: column; gap: 12px; }
.ts360-comp { display: grid; grid-template-columns: 150px 1fr 150px; gap: 12px; align-items: center; }
.ts360-comp-name { font-size: 13px; font-weight: 600; color: #E6F2FF; }
.ts360-bars { display: flex; flex-direction: column; gap: 4px; }
.ts360-bar { height: 8px; border-radius: 99px; background: rgba(148,163,184,.18); overflow: hidden; }
.ts360-bar i { display: block; height: 100%; border-radius: 99px; }
.ts360-comp-vals { font-size: 11.5px; color: rgba(230,242,255,.5); text-align: right; }
.ts360-comp-vals b { color: #E6F2FF; }
.ts360-comp-vals .ts360-h { color: #F87171; }
.ts360-comp-vals .ts360-l { color: #00E5D4; }
@media (max-width: 640px) { .ts360-comp { grid-template-columns: 1fr; } .ts360-comp-vals { text-align: left; } }

/* Таймлайн адаптации */
.adapt-section { margin-top: 16px; }
.adapt-panel { padding: 18px 20px; }
.adapt-rows { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.adapt-row { border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,.02); }
.adapt-row.risk { border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.04); }
.adapt-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.adapt-row-who { display: flex; flex-direction: column; gap: 2px; }
.adapt-row-who b { font-size: 14px; color: #E6F2FF; }
.adapt-row-who span { font-size: 11.5px; color: rgba(230,242,255,.5); }
.adapt-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.adapt-badge.risk { background: rgba(248,113,113,.14); color: #F87171; }
.adapt-badge.done { background: rgba(34,197,94,.14); color: #22C55E; }
.adapt-badge.active { background: rgba(30,91,255,.14); color: #5B8CFF; }
.adapt-stages { display: flex; gap: 8px; flex-wrap: wrap; }
.adapt-stage { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 8px 6px; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); cursor: default; }
.adapt-stage[data-open-assess], .adapt-stage[data-open-stage-answers] { cursor: pointer; }
.adapt-stage[data-open-stage-answers]:hover { filter: brightness(1.15); box-shadow: 0 0 0 1.5px rgba(34,197,94,.45) inset; }
.adapt-stage-day { font-size: 12px; font-weight: 700; color: #E6F2FF; }
.adapt-stage-st { font-size: 10px; color: rgba(230,242,255,.5); white-space: nowrap; }
.adapt-stage.st-completed { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); }
.adapt-stage.st-completed .adapt-stage-st { color: #22C55E; }
.adapt-stage.st-sent { background: rgba(30,91,255,.12); border-color: rgba(30,91,255,.35); }
.adapt-stage.st-sent .adapt-stage-st { color: #5B8CFF; }
.adapt-stage.st-scheduled { opacity: .7; border-style: dashed; }
.adapt-stage.st-missed { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }
.adapt-stage.st-missed .adapt-stage-st { color: #F87171; }
.adapt-stage.st-skipped { opacity: .4; }
.adapt-stage.risk { box-shadow: 0 0 0 1.5px rgba(248,113,113,.5) inset; }

/* Сигналы руководителю */
.adapt-alerts { margin-bottom: 16px; }
.adapt-alert-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.adapt-alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); }
.adapt-alert.risk { border-color: rgba(248,113,113,.28); background: rgba(248,113,113,.05); }
.adapt-alert.missed { border-color: rgba(217,164,65,.28); background: rgba(217,164,65,.05); }
.adapt-alert-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.adapt-alert.risk .adapt-alert-dot { background: #F87171; }
.adapt-alert.missed .adapt-alert-dot { background: #D9A441; }
.adapt-alert-text { font-size: 13px; color: #C7D6EE; line-height: 1.5; }
.adapt-alert-text b { color: #E6F2FF; }
.adapt-alert-text span { display: block; font-size: 11.5px; color: rgba(230,242,255,.45); }

/* Разовые опросы адаптации */
.adapt-standalone-panel { margin-top: 16px; }
.adapt-standalone-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.adapt-standalone { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); text-align: left; transition: all .12s; }
.adapt-standalone.st-completed { border-color: rgba(34,197,94,.25); }
.adapt-standalone.st-sent { border-color: rgba(30,91,255,.25); }
.adapt-standalone.risk { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.05); }
.adapt-standalone[data-open-stage-answers], .adapt-standalone[data-open-assess] { cursor: pointer; }
.adapt-standalone[data-open-stage-answers]:hover, .adapt-standalone[data-open-assess]:hover { filter: brightness(1.12); }
.adapt-standalone-name { font-size: 13.5px; font-weight: 600; color: #E6F2FF; }
.adapt-standalone-survey { font-size: 12.5px; color: rgba(230,242,255,.6); }
.adapt-standalone-st { font-size: 12px; color: rgba(230,242,255,.5); text-align: right; }
.adapt-standalone.st-completed .adapt-standalone-st { color: #22C55E; }
.adapt-standalone.risk .adapt-standalone-st { color: #F87171; }
@media (max-width: 640px) { .adapt-standalone { grid-template-columns: 1fr; } .adapt-standalone-st { text-align: left; } }
/* Модалка «Этап адаптации» */
.adapt-stage-summary { display: flex; flex-wrap: wrap; gap: 18px; padding: 4px 2px 14px; font-size: 13px; color: rgba(230,242,255,.6); }
.adapt-stage-summary b { color: #E6F2FF; }
.adapt-stage-list { display: flex; flex-direction: column; gap: 6px; }
.adapt-stage-li { display: grid; grid-template-columns: 1.4fr .9fr .5fr 1fr; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); text-align: left; color: #E6F2FF; transition: all .12s; }
.adapt-stage-li.clickable { cursor: pointer; }
.adapt-stage-li.clickable:hover { filter: brightness(1.12); border-color: rgba(30,91,255,.35); }
.adapt-stage-li.st-completed { border-color: rgba(34,197,94,.25); }
.adapt-stage-li.st-sent { border-color: rgba(30,91,255,.25); }
.adapt-stage-li.st-missed { border-color: rgba(248,113,113,.3); }
.adapt-stage-li.risk { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.05); }
.adapt-stage-li-name { font-size: 13.5px; font-weight: 600; }
.adapt-stage-li-status { font-size: 12px; color: rgba(230,242,255,.55); }
.adapt-stage-li.st-completed .adapt-stage-li-status { color: #22C55E; }
.adapt-stage-li.st-missed .adapt-stage-li-status { color: #F87171; }
.adapt-stage-li-val { font-size: 13px; font-weight: 600; color: rgba(230,242,255,.7); }
.adapt-stage-li-action { text-align: right; }
.adapt-stage-link { font-size: 12px; font-weight: 600; color: #5B8CFF; white-space: nowrap; }
@media (max-width: 640px) { .adapt-stage-li { grid-template-columns: 1fr 1fr; } .adapt-stage-li-action { text-align: left; grid-column: 1 / -1; } }
.aw-selected-count { font-size: 12px; color: rgba(230,242,255,.5); padding: 4px 2px; }
.aw-selected-count strong { color: #00E5D4; }
.aw-dept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aw-dept-btn { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: rgba(255,255,255,.03); border: 1.5px solid rgba(255,255,255,.08); border-radius: 8px; cursor: pointer; text-align: left; transition: all .12s; color: #E6F2FF; }
.aw-dept-btn:hover { background: rgba(30,91,255,.08); border-color: rgba(30,91,255,.3); }
.aw-dept-btn.selected { background: rgba(30,91,255,.15); border-color: #1E5BFF; }
.aw-dept-btn strong { font-size: 13px; font-weight: 600; }
.aw-dept-btn span { font-size: 11px; color: rgba(230,242,255,.45); }
.aw-prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.aw-prof-btn { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: rgba(255,255,255,.03); border: 1.5px solid rgba(255,255,255,.08); border-radius: 8px; cursor: pointer; text-align: left; transition: all .12s; color: #E6F2FF; }
.aw-prof-btn:hover { background: rgba(30,91,255,.08); border-color: rgba(30,91,255,.3); }
.aw-prof-btn.selected { background: rgba(30,91,255,.15); border-color: #1E5BFF; }
.aw-prof-btn strong { font-size: 12px; font-weight: 600; }
.aw-prof-btn span { font-size: 10px; color: rgba(230,242,255,.4); }
.aw-fixed-test { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: rgba(30,91,255,.1); border: 1.5px solid rgba(30,91,255,.3); border-radius: 8px; }
.aw-fixed-test strong { font-size: 13px; font-weight: 700; color: #E6F2FF; }
.aw-fixed-test span { font-size: 11px; color: rgba(230,242,255,.5); }
.aw-deadline-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.aw-deadline-btn { padding: 6px 14px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.1); color: rgba(230,242,255,.7); font-size: 12px; cursor: pointer; transition: all .12s; }
.aw-deadline-btn:hover { background: rgba(30,91,255,.1); border-color: rgba(30,91,255,.4); color: #E6F2FF; }
.aw-deadline-btn.selected { background: rgba(30,91,255,.2); border-color: #1E5BFF; color: #E6F2FF; }
.aw-send-preview { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: rgba(0,229,212,.07); border: 1px solid rgba(0,229,212,.2); border-radius: 8px; font-size: 12px; color: rgba(230,242,255,.7); }
.aw-send-preview strong { color: #00E5D4; }
.aw-send-preview svg { color: #00E5D4; flex-shrink: 0; }
.elt-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #fff; animation: toastIn .25s ease; }
.elt-toast-success { background: linear-gradient(135deg, #0d9e6e, #00b89c); box-shadow: 0 8px 24px rgba(0,184,156,.3); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── Assessment Wizard: 360 Roles Panel ─────────────────────────────────── */
.aw-360-roles { display: flex; flex-direction: column; gap: 10px; }
.aw-role-list { display: flex; flex-direction: column; gap: 6px; }
.aw-role-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  transition: background 0.15s;
}
.aw-role-row:hover { background: rgba(255,255,255,0.07); }
.aw-role-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: #8899bb; }
.aw-role-info svg { flex-shrink: 0; color: #00E5D4; }
.aw-role-info div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aw-role-info strong { font-size: 13px; font-weight: 600; color: #E6F2FF; white-space: nowrap; }
.aw-role-info span { font-size: 11px; color: #5a6a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Toggle */
.aw-role-toggle {
  flex-shrink: 0; position: relative; width: 44px; height: 24px;
  border-radius: 12px; border: none; cursor: pointer; font-size: 0;
  background: rgba(255,255,255,0.1); transition: background 0.2s; outline: none;
}
.aw-role-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; opacity: 0.5; transition: transform 0.2s, opacity 0.2s;
}
.aw-role-toggle.on { background: #00E5D4; }
.aw-role-toggle.on::after { transform: translateX(20px); opacity: 1; }

/* Counter */
.aw-role-counter {
  display: flex; align-items: center; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; overflow: hidden;
}
.aw-cnt-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: none; color: #8899bb; font-size: 16px;
  cursor: pointer; transition: background 0.15s, color 0.15s; line-height: 1;
}
.aw-cnt-btn:hover { background: rgba(0,229,212,0.15); color: #00E5D4; }
.aw-cnt-val {
  min-width: 28px; text-align: center; font-size: 13px; font-weight: 600;
  color: #E6F2FF; padding: 0 4px; background: rgba(255,255,255,0.03);
}

/* Summary / Warning */
.aw-360-summary {
  font-size: 12px; color: #00E5D4;
  background: rgba(0,229,212,0.08); border: 1px solid rgba(0,229,212,0.2);
  border-radius: 8px; padding: 8px 12px; margin-top: 2px;
}
.aw-360-summary strong { color: #fff; }
.aw-360-warn {
  font-size: 12px; color: #e8a44a;
  background: rgba(232,164,74,0.08); border: 1px solid rgba(232,164,74,0.2);
  border-radius: 8px; padding: 8px 12px; margin-top: 2px;
}

/* PR Scales */
.aw-pr-scales { display: flex; flex-direction: column; gap: 16px; }
.aw-pr-scale-block { display: flex; flex-direction: column; gap: 8px; }
.aw-pr-scale-label { font-size: 12px; font-weight: 600; color: #8899bb; text-transform: uppercase; letter-spacing: 0.06em; }
.aw-pr-scale-opts { display: flex; gap: 6px; }
.aw-pr-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.15s;
  font-size: 11px; color: #5a6a8a; text-align: center; line-height: 1.2;
}
.aw-pr-opt strong { font-size: 15px; font-weight: 700; color: #8899bb; }
.aw-pr-opt:hover { background: rgba(30,91,255,0.12); border-color: rgba(30,91,255,0.3); color: #a0b4d0; }
.aw-pr-opt.selected { background: rgba(30,91,255,0.18); border-color: #1E5BFF; color: #E6F2FF; }
.aw-pr-opt.selected strong { color: #fff; }

/* ── 360 Role Row: disabled state ───────────────────────────────────────── */
.aw-role-row.off { opacity: 0.5; }
.aw-role-row.off .aw-role-counter { opacity: 0.4; pointer-events: none; }

/* ── PR Scale desc ───────────────────────────────────────────────────────── */
.aw-pr-scale-desc { font-size: 11px; color: #5a6a8a; margin-bottom: 6px; display: block; }
.aw-pr-scale { display: flex; flex-direction: column; gap: 4px; }
.aw-pr-opts { display: flex; gap: 4px; flex-wrap: wrap; }
.aw-pr-opts .aw-pr-opt { min-width: 0; flex: 1; font-size: 11px; padding: 7px 4px; }

/* ── 9-box preview badge ─────────────────────────────────────────────────── */
.aw-ninebox-preview { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.aw-ninebox-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  width: fit-content;
}

/* ── Send preview ────────────────────────────────────────────────────────── */
.aw-send-preview {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 12px; color: #8899bb;
  background: rgba(30,91,255,0.08); border: 1px solid rgba(30,91,255,0.2);
  border-radius: 8px; padding: 8px 12px;
}
.aw-send-preview strong { color: #E6F2FF; }
.aw-send-preview svg { color: #1E5BFF; flex-shrink: 0; }

/* ── Wizard: плашка «Скоро» и soon-карточка ─────────────────────────────── */
.aw-badge-soon {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 185, 50, 0.12);
  color: #FFB932;
  border: 1px solid rgba(255, 185, 50, 0.25);
  flex-shrink: 0;
  margin-left: 6px;
}
.aw-type-card.soon {
  opacity: 0.52;
  cursor: default;
}
.aw-type-card.soon:hover {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  transform: none !important;
  box-shadow: none !important;
}
.aw-type-card.soon .aw-scope-check { display: none; }

/* ── Toast: info ─────────────────────────────────────────────────────────── */
.elt-toast-info {
  background: #1E2A45;
  color: #E6F2FF;
  border: 1px solid rgba(30, 91, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Действия в карточках «Кого взять в работу» (top fit) */
.elt-top-fit-actions,
.top-fit-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* Меню быстрых действий «три точки» у кандидата */
.rowActionsWrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.elt-kebab-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  color: rgba(230, 242, 255, 0.55);
}
.elt-kebab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e6f2ff;
}
.elt-kebab-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.elt-kebab-pop {
  position: fixed;
  z-index: 201;
  /* привязка по правому-нижнему углу: меню раскрывается влево и ВВЕРХ */
  transform: translate(-100%, -100%);
  min-width: 184px;
  background: #0e1726;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  padding: 4px;
}
.elt-kebab-pop button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: none;
  border: none;
  color: #cfe0f5;
  font-size: 13px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.elt-kebab-pop button:hover {
  background: rgba(30, 91, 255, 0.2);
  color: #fff;
}
.elt-kebab-sep {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255, 255, 255, 0.08);
}

/* ===================== СТРУКТУРА v2 (список + граф) ===================== */
/* Локальные токены — переменные приложения (--text/--panel) в рантайме не заданы. */
.oc2 { --oc-text: #E6F2FF; --oc-muted: #8C9BB5; --oc-panel: #0F1730; --oc-border: rgba(255,255,255,.09); --oc-soft: rgba(255,255,255,.04); }
body.light .oc2 { --oc-text: #0A0F1E; --oc-muted: #5A6B85; --oc-panel: #FFFFFF; --oc-border: rgba(10,15,30,.1); --oc-soft: rgba(10,15,30,.03); }

.oc2-grid { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .oc2-grid { grid-template-columns: 1fr; } .oc2-list-panel { display: none; } }

.oc2-list-panel, .oc2-graph { background: var(--oc-panel); border: 1px solid var(--oc-border); border-radius: 14px; }
.oc2-list-panel { display: flex; flex-direction: column; max-height: calc(100vh - 132px); overflow: hidden; }
.oc2-list-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; }
.oc2-list-title { font-size: 14px; font-weight: 700; color: var(--oc-text); }
.oc2-add-btn { padding: 6px 12px; font-size: 12px; }

.oc2-search { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; padding: 8px 11px; background: var(--oc-soft); border: 1px solid var(--oc-border); border-radius: 9px; color: var(--oc-muted); }
.oc2-search-input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--oc-text); font-size: 13px; }
.oc2-search-input::placeholder { color: var(--oc-muted); }

.oc2-list-allrow { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; font-size: 12px; color: var(--oc-muted); border-bottom: 1px solid var(--oc-border); }
.oc2-list-allrow b { color: var(--oc-text); }
.oc2-list-scroll { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.oc2-empty { padding: 24px 12px; text-align: center; font-size: 12px; color: var(--oc-muted); }

.oc2-li { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: none; cursor: pointer; text-align: left; transition: background .12s, border-color .12s; }
.oc2-li:hover { background: rgba(30,91,255,.07); border-color: rgba(30,91,255,.18); }
.oc2-li-av, .oc2-member-av, .oc2-ceo-av { position: relative; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0; cursor: pointer; }
.oc2-li-av { width: 38px; height: 38px; font-size: 13px; }
.oc2-member-av { width: 32px; height: 32px; font-size: 12px; }
.oc2-ceo-av { width: 44px; height: 44px; font-size: 15px; }
.oc2-li-av:hover .oc-avatar-upload-hint, .oc2-member-av:hover .oc-avatar-upload-hint, .oc2-ceo-av:hover .oc-avatar-upload-hint { opacity: 1; }
.oc2-li-main { min-width: 0; }
.oc2-li-name { font-size: 13px; font-weight: 600; color: var(--oc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc2-li-pos { font-size: 11px; color: var(--oc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc2-li-dept { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px; }
.oc2-li-status { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.oc2-li-status.active { background: rgba(34,197,94,.14); color: #22C55E; }
.oc2-li-status.new { background: rgba(30,91,255,.14); color: #5B8CFF; }
.oc2-list-foot { margin: 6px; padding: 10px; border: none; background: rgba(30,91,255,.08); color: #5B8CFF; font-size: 12.5px; font-weight: 600; border-radius: 10px; cursor: pointer; }
.oc2-list-foot:hover { background: rgba(30,91,255,.14); }

.oc2-graph { display: flex; flex-direction: column; overflow: hidden; }
.oc2-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--oc-border); flex-wrap: wrap; }
.oc2-search-wide { margin: 0; flex: 1; min-width: 200px; }
.oc2-chip { font-size: 12px; font-weight: 600; color: var(--oc-muted); background: var(--oc-soft); border: 1px solid var(--oc-border); border-radius: 20px; padding: 7px 13px; white-space: nowrap; }
.oc2-chip-active { background: rgba(30,91,255,.12); color: #5B8CFF; border-color: rgba(30,91,255,.3); }
.oc2-zoom { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--oc-muted); margin-left: auto; }
.oc2-zoom button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--oc-border); background: var(--oc-soft); color: var(--oc-text); font-size: 16px; cursor: pointer; line-height: 1; }
.oc2-zoom button:hover { border-color: #1E5BFF; color: #5B8CFF; }

.oc2-canvas-wrap { overflow: auto; padding: 26px 20px; max-height: calc(100vh - 200px); }
.oc2-canvas { display: flex; flex-direction: column; align-items: center; transform-origin: top center; min-width: max-content; margin: 0 auto; }
.oc2-conn-v { width: 2px; height: 22px; background: var(--oc-border); }

.oc2-node { display: flex; align-items: center; gap: 12px; background: var(--oc-soft); border: 1px solid var(--oc-border); border-radius: 12px; padding: 12px 18px; }
.oc2-company { border-color: rgba(30,91,255,.3); }
.oc2-company-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(30,91,255,.14); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.oc2-ceo { cursor: pointer; transition: border-color .12s, transform .12s; }
.oc2-ceo:hover { border-color: #1E5BFF; transform: translateY(-1px); }
.oc2-node-name { font-size: 14px; font-weight: 700; color: var(--oc-text); }
.oc2-node-sub { font-size: 11.5px; color: var(--oc-muted); margin-top: 2px; }

.oc2-depts { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.oc2-dept { width: 210px; background: var(--oc-soft); border: 1px solid var(--oc-border); border-radius: 12px; padding: 12px; }
.oc2-dept-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--oc-border); margin-bottom: 8px; }
.oc2-dept-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; }
.oc2-dept-name { font-size: 13px; font-weight: 700; color: var(--oc-text); line-height: 1.2; }
.oc2-dept-count { font-size: 11px; color: var(--oc-muted); margin-top: 2px; }
.oc2-dept-members { display: flex; flex-direction: column; gap: 2px; }
.oc2-member { display: flex; align-items: center; gap: 9px; padding: 6px 7px; border-radius: 8px; border: none; background: none; cursor: pointer; text-align: left; transition: background .12s; }
.oc2-member:hover { background: rgba(30,91,255,.08); }
.oc2-member-main { min-width: 0; }
.oc2-member-name { font-size: 12.5px; font-weight: 600; color: var(--oc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc2-member-role { font-size: 10.5px; color: var(--oc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc2-dept-more { width: 100%; margin-top: 6px; padding: 7px; border: none; background: none; color: #5B8CFF; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 7px; }
.oc2-dept-more:hover { background: rgba(30,91,255,.08); }
.oc2-more-depts { margin-top: 18px; padding: 11px 20px; border: 1px dashed var(--oc-border); background: rgba(30,91,255,.05); color: #5B8CFF; font-size: 13px; font-weight: 600; border-radius: 10px; cursor: pointer; }
.oc2-more-depts:hover { background: rgba(30,91,255,.1); }

/* ===================== ГЛАВНАЯ (Overview) ===================== */
/* .ov — только область локальных токенов; раскладку даёт .elt-dashboard. */
.ov { --ov-text: #E6F2FF; --ov-muted: #8C9BB5; --ov-border: rgba(255,255,255,.09); --ov-soft: rgba(255,255,255,.03); }
body.light .ov { --ov-text: #0A0F1E; --ov-muted: #5A6B85; --ov-border: rgba(10,15,30,.1); --ov-soft: rgba(10,15,30,.025); }
.ov-empty { font-size: 13px; color: var(--ov-muted); padding: 18px 12px; text-align: center; }

.ov-att-list, .ov-events-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.ov-att { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 9px 11px; background: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer; text-align: left; transition: background .12s, border-color .12s; }
.ov-att:hover { background: var(--ov-soft); border-color: var(--ov-border); }
.ov-att-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ov-att-body { min-width: 0; }
.ov-att-title { font-size: 13px; font-weight: 600; color: var(--ov-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-att-sub { font-size: 11.5px; color: var(--ov-muted); margin-top: 2px; }
.ov-att-arrow { font-size: 14px; color: var(--ov-muted); }
.ov-att:hover .ov-att-arrow { color: #5B8CFF; }

.ov-event { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; background: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer; text-align: left; transition: background .12s, border-color .12s; }
.ov-event:hover { background: var(--ov-soft); border-color: var(--ov-border); }
.ov-event-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.ov-event-body { min-width: 0; }
.ov-event-title { font-size: 12.5px; font-weight: 600; color: var(--ov-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-event-sub { font-size: 11px; color: var(--ov-muted); margin-top: 1px; }
.ov-event-time { font-size: 11px; color: var(--ov-muted); white-space: nowrap; }

/* Анимации из Claude Design: мигающая точка напоминания (Стоимость привлечения)
   и въезд правого drawer-а (фильтры/визарды). */
@keyframes caBlink { 0% { opacity: 1; } 50% { opacity: .2; } 100% { opacity: 1; } }
@keyframes eltDrIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes deptFade { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Списки людей на экране адаптации (карточки «Рекомендуем взять» / «Возможно
   расстаться» / «Ближайшие чек-ины»). Портировано из Claude Design (класс gp-row). */
.gp-list { display: flex; flex-direction: column; gap: 6px; }
.gp-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 11px; background: rgba(255,255,255,.03); transition: background .15s, border-color .15s, transform .15s; text-align: left; width: 100%; }
button.gp-row { cursor: pointer; font: inherit; }
.gp-row:hover { transform: translateX(2px); background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.4); }
.gp-row b { color: rgba(230,242,255,.72); font-size: 12px; font-weight: 600; }
.gp-row > div span { color: rgba(230,242,255,.42); font-size: 11px; }

.ov-up-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
@media (max-width: 980px) { .ov-up-list { grid-template-columns: 1fr; } }
.ov-up { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--ov-soft); border: 1px solid var(--ov-border); border-radius: 10px; cursor: pointer; text-align: left; transition: border-color .12s, transform .12s; }
.ov-up:hover { border-color: rgba(30,91,255,.4); transform: translateY(-1px); }
.ov-up.overdue { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.05); }
.ov-up.today { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.05); }
.ov-up-day { font-size: 14px; font-weight: 700; color: #5B8CFF; text-align: center; }
.ov-up.overdue .ov-up-day { color: #F87171; }
.ov-up.today .ov-up-day { color: #F59E0B; }
.ov-up-body { min-width: 0; }
.ov-up-name { font-size: 13px; font-weight: 600; color: var(--ov-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-up-stage { font-size: 11px; color: var(--ov-muted); margin-top: 2px; }
.ov-up-due { font-size: 11.5px; font-weight: 600; color: var(--ov-muted); white-space: nowrap; }
.ov-up.overdue .ov-up-due { color: #F87171; }
.ov-up.today .ov-up-due { color: #F59E0B; }

/* ─── ИИ-ассистент (виджет) ──────────────────────────────────────────────── */
.elt-asst { position: fixed; right: 24px; bottom: 24px; z-index: 1200; }
.elt-asst-fab {
  position: fixed; right: 24px; bottom: 24px; width: 60px; height: 60px;
  border-radius: 50%; border: none; cursor: pointer; z-index: 1201;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #38BDF8, #2563EB);
  box-shadow: 0 10px 30px rgba(37,99,235,.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.elt-asst-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 36px rgba(37,99,235,.55); }
.elt-asst-fab.open { font-size: 22px; font-weight: 600; }
.elt-asst-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(56,189,248,.5); animation: asstPulse 2.4s infinite;
}
.elt-asst-fab.open::after { animation: none; }
@keyframes asstPulse { 0% { box-shadow: 0 0 0 0 rgba(56,189,248,.5); } 70% { box-shadow: 0 0 0 16px rgba(56,189,248,0); } 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); } }

.elt-asst-panel {
  position: fixed; right: 24px; bottom: 96px; width: 380px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 130px); z-index: 1201;
  display: flex; flex-direction: column; overflow: hidden;
  background: #0F1730; border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5); animation: asstIn .22s ease;
}
@keyframes asstIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.elt-asst-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(37,99,235,.1)); }
.elt-asst-head-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #38BDF8, #2563EB); }
.elt-asst-head-title { display: flex; flex-direction: column; line-height: 1.2; }
.elt-asst-head-title b { color: #E6F2FF; font-size: 14px; }
.elt-asst-head-title span { color: #8FB3CC; font-size: 11.5px; }
.elt-asst-x { margin-left: auto; background: none; border: none; color: #8FB3CC; font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.elt-asst-x:hover { background: rgba(255,255,255,.07); color: #E6F2FF; }

.elt-asst-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.elt-asst-msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; animation: asstMsgIn .2s ease; }
@keyframes asstMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.elt-asst-msg.bot { align-self: flex-start; background: rgba(255,255,255,.06); color: #E6F2FF; border-bottom-left-radius: 4px; }
.elt-asst-msg.user { align-self: flex-end; background: linear-gradient(135deg, #38BDF8, #2563EB); color: #fff; border-bottom-right-radius: 4px; }
#elt-asst-greeting { min-height: 20px; }
#elt-asst-greeting::after { content: "▍"; color: #38BDF8; animation: asstCaret 1s steps(1) infinite; }
@keyframes asstCaret { 50% { opacity: 0; } }

.elt-asst-dots { display: flex; gap: 4px; align-items: center; }
.elt-asst-dots span { width: 7px; height: 7px; border-radius: 50%; background: #8FB3CC; animation: asstDot 1.2s infinite; }
.elt-asst-dots span:nth-child(2) { animation-delay: .2s; }
.elt-asst-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes asstDot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.elt-asst-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.elt-asst-chip { background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.25); color: #BAE6FD; font-size: 12px; padding: 6px 10px; border-radius: 14px; cursor: pointer; }
.elt-asst-chip:hover { background: rgba(56,189,248,.2); }

.elt-asst-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.elt-asst-input input { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 10px 12px; color: #E6F2FF; font-size: 13.5px; outline: none; }
.elt-asst-input input::placeholder { color: #6B829E; }
.elt-asst-input input:focus { border-color: rgba(56,189,248,.5); }
.elt-asst-input button { width: 40px; border: none; border-radius: 12px; background: linear-gradient(135deg, #38BDF8, #2563EB); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.elt-asst-input button:disabled { opacity: .5; cursor: default; }

/* Светлая тема */
.lightTheme .elt-asst-panel { background: #FFFFFF; border-color: rgba(10,15,30,.1); }
.lightTheme .elt-asst-head-title b { color: #0A0F1E; }
.lightTheme .elt-asst-msg.bot { background: #F1F5F9; color: #0F172A; }
.lightTheme .elt-asst-input input { background: #F8FAFC; border-color: rgba(10,15,30,.12); color: #0F172A; }
.lightTheme .elt-asst-x:hover { background: rgba(10,15,30,.05); color: #0F172A; }

@media (max-width: 480px) {
  .elt-asst-panel { right: 12px; bottom: 86px; width: calc(100vw - 24px); height: calc(100vh - 110px); }
}

/* Карточка-предложение ассистента (подтверждение добавления) */
.elt-asst-prop-card { margin-top: 8px; background: rgba(56,189,248,.07); border: 1px solid rgba(56,189,248,.22); border-radius: 12px; padding: 10px 12px; }
.elt-asst-prop-head { font-size: 12px; font-weight: 700; color: #7DD3FC; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.elt-asst-prop-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; }
.elt-asst-prop-row span { color: #8FB3CC; }
.elt-asst-prop-row b { color: #E6F2FF; text-align: right; word-break: break-word; }
.elt-asst-prop-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.elt-asst-prop-actions button { border: none; border-radius: 9px; padding: 7px 14px; font-size: 13px; cursor: pointer; background: linear-gradient(135deg,#38BDF8,#2563EB); color: #fff; }
.elt-asst-prop-actions button.ghost { background: rgba(255,255,255,.08); color: #BAE6FD; }
.elt-asst-prop-status { margin-top: 8px; font-size: 12.5px; color: #8FB3CC; }
.elt-asst-prop-status.ok { color: #4ADE80; }
.elt-asst-prop-status.err { color: #F87171; }
.lightTheme .elt-asst-prop-card { background: #F0F9FF; border-color: #BAE6FD; }
.lightTheme .elt-asst-prop-row b { color: #0F172A; }
.lightTheme .elt-asst-prop-actions button.ghost { background: rgba(10,15,30,.06); color: #0284C7; }

/* Библиотека тестов — теги категорий/уровней, поиск, фильтры */
.lib-search { margin: 10px 0; }
.lib-search .elt-input { width: 100%; max-width: 420px; }
.elt-filter-bar.lib-cats, .elt-filter-bar.lib-levels { flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lib-levels { align-items: center; }
.lib-levels-label { font-size: 12px; color: #8FB3CC; margin-right: 4px; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.lib-tag { font-size: 11px; padding: 3px 8px; border-radius: 10px; background: rgba(56,189,248,.1); color: #BAE6FD; border: 1px solid rgba(56,189,248,.2); }
.lib-tag-lvl { background: rgba(168,139,250,.12); color: #C4B5FD; border-color: rgba(168,139,250,.25); }
.lightTheme .lib-levels-label { color: #5A6B85; }
.lightTheme .lib-tag { background: #F0F9FF; color: #0369A1; border-color: #BAE6FD; }
.lightTheme .lib-tag-lvl { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }

/* Ошибка формы входа/регистрации */
.authError { margin-top: 10px; color: #F87171; font-size: 13px; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); border-radius: 8px; padding: 8px 10px; }


/* === Eltera Landing (imported from Claude Design: Eltera Landing.dc.html) === */
@keyframes eltFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
    @keyframes eltDrift { 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(20px,-18px) } }
    .eltHero { position:relative; overflow:hidden; }
    .eltParticles { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
    .eltParticles span { position:absolute; bottom:-12px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(150,180,255,.9), rgba(124,58,237,.5) 55%, rgba(124,58,237,0) 75%); box-shadow:0 0 8px rgba(110,140,255,.5); opacity:0; animation:eltRise linear infinite; }
    @keyframes eltRise {
      0% { transform:translateY(0) translateX(0); opacity:0; }
      12% { opacity:.7; }
      80% { opacity:.55; }
      100% { transform:translateY(-680px) translateX(var(--drift,20px)); opacity:0; }
    }
    .eltOrb { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; }
    .heroMatrix { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.34; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%); }
    .heroScrim { position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(90deg, rgba(6,12,26,.92) 0%, rgba(6,12,26,.72) 30%, rgba(6,12,26,.2) 52%, rgba(6,12,26,0) 66%); }
    .heroAurora { position:absolute; inset:-20%; z-index:0; pointer-events:none; filter:blur(46px); opacity:.7; background:radial-gradient(38% 48% at 22% 30%, rgba(30,91,255,.3), transparent 60%), radial-gradient(34% 44% at 80% 24%, rgba(124,58,237,.26), transparent 60%), radial-gradient(44% 40% at 62% 82%, rgba(0,229,212,.16), transparent 60%); animation:auroraShift 18s ease-in-out infinite alternate; }
    .heroGrid { position:absolute; left:50%; bottom:0; width:220%; height:50%; transform:translateX(-50%) perspective(440px) rotateX(66deg); transform-origin:bottom center; z-index:0; pointer-events:none; opacity:.6; background-image:linear-gradient(rgba(0,210,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(110,160,255,.24) 1px, transparent 1px); background-size:62px 62px; -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 82%); mask-image:linear-gradient(to top, #000 0%, transparent 82%); animation:gridMove 6.5s linear infinite; }
    @keyframes auroraShift { 0%{ transform:translate(0,0) scale(1) } 100%{ transform:translate(-4%,3%) scale(1.09) } }
    @keyframes gridMove { to { background-position:0 62px, 0 0 } }
    .eltMock { position:relative; z-index:1; }
    .eltFloatCard { position:absolute; left:-34px; bottom:-30px; width:230px; z-index:3; padding:15px; border-radius:14px; animation:eltFloat 5s ease-in-out infinite; }
    .eltKpiMini { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .eltKpiMini > div { border:1px solid var(--lineDark); border-radius:10px; padding:10px; background:rgba(15,23,42,.4); }
    .eltKpiMini b { display:block; color:#fff; font-size:25px; font-weight:800; line-height:1; }
    .eltKpiMini span { color:#8FA3C2; font-size:11px; font-weight:700; }
    .bento { display:grid; grid-template-columns:1.35fr 1fr 1fr; grid-template-rows:auto auto; grid-template-areas:"a b c" "a d e"; gap:14px; }
    .bentoCard { position:relative; overflow:hidden; border:1px solid var(--lineDark); border-radius:16px; background:rgba(30,41,59,.5); padding:22px; display:grid; gap:8px; align-content:start; transition:border-color .2s, transform .2s; }
    .bentoCard:hover { border-color:rgba(0,229,212,.4); transform:translateY(-3px); }
    .bentoCard h3 { color:#fff; font-size:18px; margin:0; font-weight:800; }
    .bentoCard p { color:#B8C5DA; font-size:14px; line-height:1.55; margin:0; }
    .bentoIcon { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:20px; background:rgba(0,229,212,.12); color:var(--cyan); border:1px solid rgba(0,229,212,.2); }
    .bentoFeat { grid-area:a; background:linear-gradient(160deg, rgba(30,91,255,.16), rgba(124,58,237,.1) 60%, rgba(0,229,212,.08)); }
    .bigScore { font-size:64px; font-weight:900; line-height:1; background:linear-gradient(135deg,var(--cyan),var(--blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
    .stepper { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; }
    .stepCard { display:grid; gap:10px; align-content:start; }
    .stepNum { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; font-size:20px; font-weight:900; color:#02121a; background:linear-gradient(135deg,var(--cyan),var(--blue)); box-shadow:0 12px 30px rgba(0,229,212,.22); }
    .stepCard h3 { color:#fff; font-size:18px; margin:0; }
    .stepCard p { color:#B8C5DA; font-size:14px; line-height:1.55; margin:0; }
    .metricBand { max-width:1220px; margin:0 auto; padding:0 22px; }
    .metricBandInner { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--lineDark); border-radius:20px; overflow:hidden; background:linear-gradient(135deg, rgba(30,91,255,.1), rgba(0,229,212,.05)); }
    .metricCell { padding:34px 24px; text-align:center; border-right:1px solid var(--lineDark); }
    .metricCell:last-child { border-right:none; }
    .metricCell b { display:block; font-size:46px; font-weight:900; line-height:1; background:linear-gradient(135deg,#fff,#9fd2ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
    .metricCell span { display:block; margin-top:8px; color:#9FB0CC; font-size:14px; font-weight:700; }
    .faqItem { border:1px solid var(--lineDark); border-radius:12px; background:rgba(30,41,59,.46); overflow:hidden; }
    .faqItem summary { list-style:none; cursor:pointer; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:14px; color:#fff; font-weight:800; font-size:16px; }
    .faqItem summary::-webkit-details-marker { display:none; }
    .faqItem summary::after { content:'+'; color:var(--cyan); font-size:24px; font-weight:400; transition:transform .2s; }
    .faqItem[open] summary::after { transform:rotate(45deg); }
    .faqItem p { margin:0; padding:0 20px 20px; color:#B8C5DA; font-size:14.5px; line-height:1.6; }
    .logoChip { display:flex; align-items:center; justify-content:center; padding:0 24px; color:#7E92B4; font-weight:900; font-size:18px; letter-spacing:.04em; white-space:nowrap; }
    .testCard { display:grid; gap:16px; align-content:start; padding:24px; border:1px solid var(--lineDark); border-radius:16px; background:rgba(30,41,59,.5); }
    .testCard p { color:#E2EAF6; font-size:16px; line-height:1.6; margin:0; }
    .testWho { display:flex; align-items:center; gap:12px; }
    .testAv { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:900; color:#021018; background:linear-gradient(135deg,var(--cyan),var(--blue)); flex:none; }
    .cryptoWrap { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:32px; align-items:center; border:1px solid rgba(0,229,212,.28); border-radius:22px; padding:38px; background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(30,91,255,.12) 45%, rgba(0,229,212,.08)); position:relative; overflow:hidden; }
    .featRow { display:flex; gap:12px; align-items:flex-start; }
    .featTick { flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:rgba(0,229,212,.16); color:var(--cyan); font-weight:900; font-size:13px; margin-top:1px; }
    .walletCard { border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:22px; background:rgba(9,15,29,.7); backdrop-filter:blur(12px); display:grid; gap:14px; }
    .ctaBand { max-width:1220px; margin:0 auto 72px; padding:56px; border-radius:24px; text-align:center; background:radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.22), transparent 60%), linear-gradient(135deg, rgba(30,91,255,.24), rgba(0,229,212,.12)); border:1px solid rgba(0,229,212,.3); position:relative; overflow:hidden; }
    .pillEy { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid rgba(0,229,212,.3); border-radius:999px; background:rgba(0,229,212,.07); color:var(--cyan); font-weight:800; font-size:13px; letter-spacing:.03em; }
    .liveView { position:absolute; inset:0; transition:opacity .7s ease; }
    .pulseStage { position:relative; height:448px; }
    .pulseSlide { position:absolute; inset:0; transition:opacity .55s ease; }
    .pulseGrid { display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:34px; align-items:center; height:100%; }
    .eltTok { display:inline-grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#00E5D4,#1E5BFF); color:#021018; font-weight:900; flex:none; }
    @media (max-width:900px){ .pulseStage{ height:auto; } .pulseSlide{ position:relative; opacity:1 !important; } .pulseGrid{ grid-template-columns:1fr; gap:20px; } .pulseMetrics{ grid-template-columns:repeat(2,1fr) !important; } }
    @keyframes pulseGlow { 0%,100%{ opacity:.4; transform:scale(1); } 50%{ opacity:1; transform:scale(1.14); } }
    @keyframes pulseGlow2 { 0%,100%{ opacity:.85; transform:scale(1.1); } 50%{ opacity:.35; transform:scale(1); } }
    @keyframes pulseHue { 0%{ filter:hue-rotate(0deg); } 100%{ filter:hue-rotate(360deg); } }
    .pulseBg::before { content:""; position:absolute; inset:-25%; z-index:0; pointer-events:none; background:radial-gradient(circle at 28% 24%, rgba(0,229,212,.22), transparent 48%), radial-gradient(circle at 78% 78%, rgba(124,58,237,.24), transparent 48%); animation:pulseGlow 2.6s ease-in-out infinite, pulseHue 13s linear infinite; }
    .pulseBg::after { content:""; position:absolute; inset:-25%; z-index:0; pointer-events:none; background:radial-gradient(circle at 72% 18%, rgba(30,91,255,.2), transparent 46%), radial-gradient(circle at 22% 82%, rgba(34,197,94,.16), transparent 46%); animation:pulseGlow2 2.6s ease-in-out infinite, pulseHue 13s linear infinite reverse; }
    .pulseBg > *:not(.eltOrb) { position:relative; z-index:1; }
    /* ELT launch countdown */
    .launchSection { position:relative; overflow:hidden; margin:0 0 0; padding:96px 24px 0; min-height:780px; background:radial-gradient(ellipse at 50% 120%, #0a1f3a 0%, #061226 45%, #03070f 100%); perspective:1100px; }
    .starfield { position:absolute; inset:0; z-index:0; pointer-events:none; background-repeat:no-repeat; animation:starTwinkle 7s ease-in-out infinite;
      background-image:
        radial-gradient(1.6px 1.6px at 8% 16%, rgba(255,255,255,.9), transparent),
        radial-gradient(1.2px 1.2px at 19% 34%, rgba(180,220,255,.7), transparent),
        radial-gradient(1px 1px at 27% 12%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.4px 1.4px at 38% 26%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 46% 9%, rgba(160,200,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 58% 20%, rgba(255,255,255,.85), transparent),
        radial-gradient(1px 1px at 66% 33%, rgba(200,220,255,.6), transparent),
        radial-gradient(1.3px 1.3px at 74% 14%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 83% 28%, rgba(180,210,255,.6), transparent),
        radial-gradient(1.6px 1.6px at 91% 18%, rgba(255,255,255,.85), transparent),
        radial-gradient(1px 1px at 14% 48%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.2px 1.2px at 34% 54%, rgba(180,220,255,.55), transparent),
        radial-gradient(1px 1px at 52% 46%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.3px 1.3px at 71% 52%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 88% 44%, rgba(200,220,255,.5), transparent); }
    .deepGlow { position:absolute; left:50%; top:34%; width:900px; height:900px; transform:translate(-50%,-50%); z-index:0; pointer-events:none;
      background:radial-gradient(circle, rgba(0,170,255,.16), transparent 55%), radial-gradient(circle at 60% 60%, rgba(124,58,237,.14), transparent 55%); filter:blur(10px); }
    .orbitWrap { position:absolute; left:50%; top:46%; width:1180px; height:1180px; transform:translate(-50%,-50%) rotateX(70deg); transform-style:preserve-3d; z-index:1; pointer-events:none; }
    .launchMatrix { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.3; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 92%); mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 92%); }
    .orbitRing { position:absolute; border-radius:50%; border:1px solid rgba(120,180,255,.14); }
    .orbitRing.r1 { inset:0; }
    .orbitRing.r2 { inset:150px; border-color:rgba(159,70,241,.16); }
    .orbitRing.r3 { inset:320px; border-color:rgba(0,229,212,.14); }
    .orbit { position:absolute; border-radius:50%; animation:orbitSpin 38s linear infinite; }
    .orbit.o1 { inset:0; }
    .orbit.o2 { inset:150px; animation-duration:54s; animation-direction:reverse; }
    .orbit.o3 { inset:320px; animation-duration:30s; }
    .sat { position:absolute; top:-5px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#16D7FF; box-shadow:0 0 14px #16D7FF, 0 0 28px rgba(22,215,255,.5); }
    .orbit.o2 .sat { background:#9F46F1; box-shadow:0 0 14px #9F46F1, 0 0 28px rgba(159,70,241,.5); }
    .orbit.o3 .sat { background:#00E5D4; box-shadow:0 0 14px #00E5D4, 0 0 28px rgba(0,229,212,.5); }
    .earth { position:absolute; left:50%; bottom:-640px; width:920px; height:920px; transform:translateX(-50%); border-radius:50%; z-index:1; overflow:hidden;
      background:radial-gradient(circle at 50% 22%, rgba(150,210,255,.4), rgba(26,74,122,.9) 38%, #0a2540 62%, #061a2e 100%);
      box-shadow:0 -6px 60px rgba(0,170,255,.45), 0 -2px 120px rgba(0,140,255,.25), inset 0 26px 70px rgba(150,210,255,.3), inset 0 -40px 120px rgba(0,0,0,.55); }
    .earth::before { content:''; position:absolute; inset:0; border-radius:50%; opacity:.55; mix-blend-mode:screen; background-size:220% 100%; animation:earthSpin 70s linear infinite;
      background-image:radial-gradient(40px 26px at 30% 30%, rgba(34,197,94,.55), transparent 70%), radial-gradient(60px 30px at 62% 40%, rgba(0,180,160,.5), transparent 70%), radial-gradient(46px 24px at 80% 28%, rgba(34,160,120,.5), transparent 70%), radial-gradient(50px 30px at 18% 55%, rgba(20,140,150,.45), transparent 70%); }
    .earthRim { position:absolute; left:50%; bottom:-640px; width:920px; height:920px; transform:translateX(-50%); border-radius:50%; z-index:1; pointer-events:none; box-shadow:inset 0 14px 36px rgba(120,210,255,.55); }
    .launchInner { position:relative; z-index:3; max-width:920px; margin:0 auto; text-align:center; animation:fadeUp .9s ease both; }
    .cdRow { display:flex; justify-content:center; align-items:stretch; gap:16px; margin:34px 0 30px; flex-wrap:wrap; }
    .cdTile { position:relative; min-width:118px; padding:22px 18px; border-radius:18px; background:linear-gradient(180deg, rgba(22,34,62,.72), rgba(9,16,32,.6)); border:1px solid rgba(120,180,255,.24); box-shadow:0 0 44px rgba(0,160,255,.14), inset 0 0 26px rgba(0,200,255,.07); backdrop-filter:blur(8px); animation:cdGlow 3.2s ease-in-out infinite; }
    .cdTile.sec { animation:cdGlow 3.2s ease-in-out infinite, cdFlicker 4s steps(1) infinite; }
    .cdNum { font-size:60px; font-weight:900; line-height:1; color:#EAF4FF; letter-spacing:-.01em; text-shadow:0 0 18px rgba(0,200,255,.55), 0 0 42px rgba(80,140,255,.35); font-variant-numeric:tabular-nums; }
    .cdLbl { margin-top:9px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#7FA8D8; font-weight:700; }
    .launchNote { margin-top:22px; font-size:13px; letter-spacing:.04em; color:#6E89B4; }
    .roadmapGrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,540px); gap:40px; align-items:center; }
    .rmChip { display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--lineDark); border-radius:13px; background:rgba(30,41,59,.45); }
    .phoneWrap { position:relative; justify-self:center; width:540px; height:486px; max-width:100%; }
    .phoneCore { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:184px; height:374px; border-radius:46px; padding:6px; background:linear-gradient(155deg,#3a4256,#171c28 42%,#0a0d16); border:1px solid rgba(180,200,230,.22); box-shadow:0 30px 72px rgba(0,0,0,.6), 0 0 56px rgba(0,200,255,.14), inset 0 0 0 1.5px rgba(120,140,170,.25); z-index:3; }
    .phoneScreen2 { position:relative; width:100%; height:100%; border-radius:40px; overflow:hidden; background:radial-gradient(circle at 50% 36%, #112744, #0a1020 72%); display:grid; place-items:center; }
    .phoneNotch { position:absolute; top:13px; left:50%; transform:translateX(-50%); width:78px; height:24px; border-radius:14px; background:#05070d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); z-index:4; display:flex; align-items:center; justify-content:flex-end; padding-right:9px; }
    .phoneNotch::after { content:''; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #2a4a6a, #0a1a2a); box-shadow:0 0 4px rgba(0,180,255,.4); }
    .logoRing { position:absolute; width:152px; height:152px; border-radius:50%; background:conic-gradient(from 0deg, rgba(0,229,212,0), rgba(0,229,212,.65), rgba(124,58,237,.65), rgba(0,229,212,0)); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); animation:roadSpin 9s linear infinite; }
    .logoRing.r2 { width:108px; height:108px; background:conic-gradient(from 180deg, rgba(124,58,237,0), rgba(124,58,237,.5), rgba(0,229,212,.5), rgba(124,58,237,0)); animation:roadSpin 6s linear infinite reverse; }
    .logoPulse { width:118px; z-index:1; animation:logoPulse 3.6s ease-in-out infinite; filter:drop-shadow(0 0 14px rgba(0,200,255,.45)); }
    .orbitField { position:absolute; inset:0; z-index:2; animation:roadSpin 40s linear infinite; }
    .orbitItem { position:absolute; left:50%; top:50%; width:0; height:0; }
    .orbitCounter { position:absolute; top:0; left:0; }
    .orbitInner { position:absolute; top:0; left:0; transform:translate(-50%,-50%); animation:roadSpinRev 40s linear infinite; }
    .roadCard { display:flex; align-items:center; gap:9px; width:max-content; padding:10px 13px; border-radius:13px; background:rgba(13,20,38,.9); border:1px solid rgba(120,180,255,.26); box-shadow:0 12px 30px rgba(0,0,0,.42); backdrop-filter:blur(6px); white-space:nowrap; }
    .roadCard b { color:#fff; font-size:12.5px; font-weight:700; }
    .rcIcon { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:13px; flex:none; }
    @keyframes roadSpin { to { transform:rotate(360deg) } }
    @keyframes roadSpinRev { from { transform:translate(-50%,-50%) rotate(0) } to { transform:translate(-50%,-50%) rotate(-360deg) } }
    @keyframes logoPulse { 0%,100%{ transform:scale(1); opacity:.92 } 50%{ transform:scale(1.06); opacity:1 } }
    .featDark { position:relative; padding:64px 40px; }
    .featDark::before { content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:100vw; z-index:0; pointer-events:none; background:radial-gradient(rgba(120,160,220,.09) 1px, transparent 1px) 0 0 / 26px 26px, radial-gradient(ellipse at 20% 0%, rgba(0,229,212,.08), transparent 52%), radial-gradient(ellipse at 82% 100%, rgba(124,58,237,.1), transparent 52%), linear-gradient(180deg,#090e1a,#06090f); -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%); }
    .featDark > * { position:relative; z-index:1; }
    @media (max-width:560px){ .featDark{ padding:46px 18px; } }
    .eltFooter { margin-top:48px; padding:0 22px; }
    .footInner { position:relative; max-width:1220px; margin:0 auto; padding:46px 44px 28px; border:1px solid var(--lineDark); border-top:1px solid rgba(0,229,212,.28); border-radius:26px 26px 0 0; background:radial-gradient(ellipse at 14% -10%, rgba(0,229,212,.09), transparent 52%), radial-gradient(ellipse at 86% -10%, rgba(124,58,237,.09), transparent 52%), rgba(12,17,30,.72); backdrop-filter:blur(14px); overflow:hidden; }
    .footGrid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:36px; }
    .footBrand { display:flex; flex-direction:column; gap:14px; max-width:340px; }
    .footBrand img { width:150px; }
    .footDesc b { display:block; color:#fff; font-size:14px; margin-bottom:7px; font-weight:800; }
    .footDesc span { color:#9FB0CC; font-size:13.5px; line-height:1.62; }
    .footCopy { color:#6E89B4; font-size:12.5px; margin-top:2px; }
    .footCol h4 { color:#fff; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; margin:0 0 13px; }
    .footCol a { display:block; width:fit-content; color:#9FB0CC; font-size:14px; text-decoration:none; padding:6px 0; cursor:pointer; transition:color .2s ease, text-shadow .2s ease, transform .2s ease; }
    .footCol a:hover { color:var(--cyan); text-shadow:0 0 12px rgba(0,229,212,.55); transform:translateX(3px); }
    .footBottom { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:34px; padding-top:20px; border-top:1px solid var(--lineDark); }
    .footTagline { color:#6E89B4; font-size:12.5px; }
    .footActions { display:flex; gap:10px; flex-wrap:wrap; }
    @media (max-width:900px){ .footGrid{ grid-template-columns:1fr 1fr; gap:28px 24px; } .footBrand{ grid-column:1 / -1; max-width:none; } .footInner{ padding:40px 26px 24px; } }
    @media (max-width:560px){ .footGrid{ grid-template-columns:1fr; } .footBottom{ flex-direction:column; align-items:flex-start; } }
    @media (max-width:640px){ .phoneWrap{ transform:scale(.64); margin:-86px auto; } }
    .phoneGlow { position:absolute; inset:-26px; z-index:0; filter:blur(34px); background:radial-gradient(circle at 48% 38%, rgba(0,200,255,.24), transparent 58%), radial-gradient(circle at 62% 72%, rgba(124,58,237,.22), transparent 58%); animation:auroraShift 9s ease-in-out infinite alternate; }
    .phoneFrame { position:absolute; left:50%; top:0; transform:translateX(-50%); width:242px; height:440px; border-radius:40px; padding:11px; background:linear-gradient(160deg,#1b2340,#0a0f1e); border:1px solid rgba(255,255,255,.13); box-shadow:0 34px 80px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,229,212,.07); z-index:1; }
    .phoneNotch { position:absolute; top:15px; left:50%; transform:translateX(-50%); width:84px; height:6px; border-radius:99px; background:rgba(255,255,255,.2); z-index:3; }
    .phoneScreen { width:100%; height:100%; border-radius:31px; overflow:hidden; display:block; }
    .floatCardR { position:absolute; z-index:2; padding:11px 13px; border-radius:14px; background:rgba(13,20,38,.86); border:1px solid rgba(120,180,255,.24); box-shadow:0 14px 34px rgba(0,0,0,.45); backdrop-filter:blur(8px); animation:eltFloat 5.5s ease-in-out infinite; }
    @media (max-width:900px){ .roadmapGrid{ grid-template-columns:1fr; gap:34px; } }
    @keyframes starTwinkle { 0%,100%{ opacity:.85 } 50%{ opacity:.55 } }
    @keyframes orbitSpin { to { transform:rotate(360deg) } }
    @keyframes earthSpin { to { background-position:220% 0 } }
    @keyframes cdGlow { 0%,100%{ box-shadow:0 0 44px rgba(0,160,255,.14), inset 0 0 26px rgba(0,200,255,.07); border-color:rgba(120,180,255,.24) } 50%{ box-shadow:0 0 64px rgba(0,190,255,.26), inset 0 0 30px rgba(0,220,255,.12); border-color:rgba(140,200,255,.4) } }
    @keyframes cdFlicker { 0%,96%,100%{ opacity:1 } 97%{ opacity:.78 } 98%{ opacity:1 } 99%{ opacity:.86 } }
    @keyframes fadeUp { from { opacity:0; transform:translateY(26px) } to { opacity:1; transform:translateY(0) } }
    @keyframes adaptShimmer { 0%{ background-position:0% 50%, 0% 0%, 0% 50% } 100%{ background-position:0% 50%, 0% 0%, 300% 50% } }
    @keyframes adaptGlow { 0%,100%{ box-shadow:0 0 22px rgba(0,200,255,.16) } 50%{ box-shadow:0 0 44px rgba(140,80,255,.3) } }
    .rv { opacity:0; transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1), filter .75s ease; will-change:opacity, transform; }
    .rv-up { transform:translateY(36px); }
    .rv-left { transform:translateX(-44px); }
    .rv-right { transform:translateX(44px); }
    .rv-scale { transform:scale(.9); }
    .rv-blur { transform:translateY(22px); filter:blur(12px); }
    .rv.in { opacity:1; transform:none; filter:none; }
    @media (max-width:900px){ .launchSection{ min-height:680px; } .earth,.earthRim{ width:680px; height:680px; bottom:-470px; } .cdNum{ font-size:46px } .cdTile{ min-width:92px } }
    .liveFunnel em { background:linear-gradient(90deg,#7C3AED,#1E5BFF) !important; }
    .liveFunnel .fnl1 em { background:linear-gradient(90deg,#7C3AED,#8B5CF6) !important; }
    .liveFunnel .fnl2 em { background:linear-gradient(90deg,#4F46E5,#6366F1) !important; }
    .liveFunnel .fnl3 em { background:linear-gradient(90deg,#2563EB,#3B82F6) !important; }
    .liveFunnel .fnl4 em { background:linear-gradient(90deg,#06B6D4,#22D3EE) !important; }
    .liveFunnel .fnl5 em { background:linear-gradient(90deg,#14B8A6,#2DD4BF) !important; }
    .liveFunnel .fnl6 em { background:linear-gradient(90deg,#22C55E,#4ADE80) !important; }
    .compBar i em { background:linear-gradient(90deg,#7C3AED,#1E5BFF) !important; }
    .compBar.barGood i em { background:linear-gradient(90deg,#15915C,#22C55E) !important; }
    .compBar.barWarn i em { background:linear-gradient(90deg,#B97D2A,#E7A93C) !important; }
    .compBar.barRisk i em { background:linear-gradient(90deg,#D9504D,#F87171) !important; }
    .aiNote.noteGood { border-color:rgba(34,197,94,.3) !important; background:rgba(34,197,94,.08) !important; }
    .aiNote.noteWarn { border-color:rgba(217,164,65,.32) !important; background:rgba(217,164,65,.09) !important; }
    .aiNote b.recGood { color:#34D77F; } .aiNote b.recWarn { color:#E7A93C; } .aiNote b.recRisk { color:#F87171; }
    .heroPanel .funnel span { color:#fff !important; font-weight:800 !important; font-size:15px !important; font-variant-numeric:tabular-nums; }
    .heroPanel .eltKpiMini b { font-variant-numeric:tabular-nums; }
    .heroPanel .eltKpiMini b.kpiBig { font-size:34px !important; font-weight:900 !important; line-height:1 !important; }
    .heroPanel .eltKpiMini b.kpiResp { color:#7C3AED !important; text-shadow:0 0 16px rgba(124,58,237,.45) !important; }
    .heroPanel .eltKpiMini b.kpiFit { color:#22C55E !important; text-shadow:0 0 16px rgba(34,197,94,.45) !important; }
    .heroPanel .eltKpiMini b.kpiOff { color:#06B6D4 !important; text-shadow:0 0 16px rgba(6,182,212,.45) !important; }
    .heroPanel image-slot { box-shadow:0 0 0 1px rgba(255,255,255,.1); }
    @keyframes riskGlow { 0%,100%{ box-shadow:0 0 0 1px rgba(248,113,113,.2), 0 0 14px rgba(248,113,113,.1) } 50%{ box-shadow:0 0 0 1px rgba(248,113,113,.42), 0 0 30px rgba(248,113,113,.3) } }
    .riskRow { border-color:rgba(248,113,113,.5) !important; background:rgba(248,113,113,.09) !important; animation:riskGlow 2.6s ease-in-out infinite; }
    .riskRow image-slot { box-shadow:0 0 0 2px rgba(248,113,113,.65), 0 0 14px rgba(248,113,113,.5) !important; }
    @keyframes livePulse { 0%,100%{ box-shadow:0 0 0 0 rgba(34,197,94,.5) } 50%{ box-shadow:0 0 0 6px rgba(34,197,94,0) } }
    .livePulse { animation:livePulse 1.8s ease-in-out infinite; }
    @keyframes drawLine { 0%{ stroke-dashoffset:620 } 100%{ stroke-dashoffset:0 } }
    .sparkPath { stroke-dasharray:620; animation:drawLine 2.4s ease-out forwards; }
    @keyframes barBreathe { 0%,100%{ transform:scaleX(1) } 50%{ transform:scaleX(.965) } }
    .liveFunnel em { transform-origin:left center; animation:barBreathe 3.4s ease-in-out infinite; transition:width .9s cubic-bezier(.4,0,.2,1); }
    .liveRow { display:flex; align-items:center; gap:12px; padding:9px 11px; border:1px solid var(--lineDark); border-radius:12px; background:rgba(15,23,42,.42); }
    .liveRow image-slot { flex:none; }
    .donutWrap { display:flex; align-items:center; gap:18px; }
    .compBar { display:grid; gap:5px; }
    .compBar > div { display:flex; justify-content:space-between; font-size:12px; font-weight:700; }
    .compBar > div span { color:#9FB0CC; }
    .compBar > div b { color:#fff; }
    .compBar i { display:block; height:7px; border-radius:999px; background:rgba(148,163,184,.2); overflow:hidden; }
    .compBar i em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan),var(--blue)); }
    @media (max-width:900px){ .bento{ grid-template-columns:1fr; grid-template-areas:"a" "b" "c" "d" "e"; } .stepper{ grid-template-columns:1fr 1fr; } .metricBandInner{ grid-template-columns:1fr 1fr; } .cryptoWrap{ grid-template-columns:1fr; } }
    /* ===== Responsive: iPad / tablet ===== */
    @media (max-width:1024px){
      .stepper{ grid-template-columns:repeat(2,1fr); }
      .tariffGrid{ gap:14px !important; }
      .heroCopy h1{ font-size:clamp(32px,4.6vw,48px); }
    }
    /* ===== Stack hero + key grids (iPad portrait & down) ===== */
    @media (max-width:900px){
      .hero{ grid-template-columns:1fr !important; gap:30px; padding:34px 20px 24px; }
      .heroPanel{ width:100%; max-width:600px; margin:0 auto; }
      .testGrid{ grid-template-columns:repeat(2,1fr) !important; }
      .tariffGrid{ grid-template-columns:1fr !important; max-width:440px; margin:0 auto; }
      .cafeGrid{ grid-template-columns:repeat(2,1fr) !important; }
      .ctaBand{ padding:40px 24px; }
      .cryptoWrap{ padding:28px; }
    }
    /* ===== Mobile ===== */
    @media (max-width:760px){
      .landingHeader{ grid-template-columns:auto 1fr auto !important; padding:12px 16px !important; gap:10px !important; }
      .landingNav{ display:none !important; }
      .landingLogo img{ width:128px !important; }
      .landingSection{ padding:42px 16px !important; }
      .metricBand{ padding:0 16px; }
      .metricBandInner{ grid-template-columns:1fr 1fr; }
      .stepper{ grid-template-columns:1fr; }
      .testGrid{ grid-template-columns:1fr !important; }
      .cryptoWrap{ padding:24px; }
      .ctaBand{ margin:0 16px 48px; padding:34px 20px; }
      .pulseMetrics{ gap:10px; }
    }
    /* ===== Small phones ===== */
    @media (max-width:540px){
      .heroCopy h1{ font-size:clamp(26px,8.5vw,38px); }
      .heroCopy p, .sectionIntro p{ font-size:15px; }
      .eltKpiMini b{ font-size:20px; }
      .metricCell{ padding:24px 14px; }
      .metricCell b{ font-size:34px; }
      .cafeGrid{ grid-template-columns:1fr !important; }
      .pulseMetrics{ grid-template-columns:repeat(2,1fr) !important; }
      .cdTile{ min-width:0; flex:1 1 42%; padding:16px 10px; }
      .cdNum{ font-size:38px; }
      .ctaBand h2{ font-size:30px !important; }
      .bentoCard{ padding:18px; }
      .launchSection{ padding-top:64px; }
    }