/* ==========================================================================
   Encrypta.bg — бранд слой за invited.encrypta.bg
   Зарежда се СЛЕД kubrat-consolidated.css и го надгражда:
   шрифтове, типография, модерни анимации, Khan login.
   Палитра: мастилено индиго, ключ (#9184d9 / #5d52a8), шевица само за състояния.
   ========================================================================== */

/* ── Шрифтове (self-hosted, SIL OFL, variable woff2) ─────────────────────── */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("../fonts/ibmplexsans-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("../fonts/ibmplexsans-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("../fonts/ibmplexsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("../fonts/ibmplexsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Допълнителни бранд токени ───────────────────────────────────────────── */
:root {
  --en-key: #5d52a8;  --en-key-light: #423a6a; --en-key-deep: #e7e5fe;
  --en-signal: #a8423c; --en-success: #2f7a56;
  --en-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="dark"], html.theme-dark {
  --en-key: #9184d9;  --en-key-light: #b5abfc; --en-key-deep: #423a6a;
  --en-signal: #d98a84; --en-success: #7fc2a0;
}

/* ── Типография ──────────────────────────────────────────────────────────── */
body { font-family: var(--en-font-body); -webkit-font-smoothing: antialiased; letter-spacing: 0; }
h1, h2, h3, h4, h5, .khan-title, .home-title, .plan-name, .price, .plan-storage {
  font-family: var(--en-font-heading);
  letter-spacing: -0.015em;
}
::selection { background: var(--en-key); color: #fff; }

/* Светлата тема: фон със сянка на ключа вместо старата снимка */
html.theme-light { background-color: #f6f6fa; }
html.theme-dark  { background-color: #0f1120; }

/* ── Бранд знак (inline SVG) ─────────────────────────────────────────────── */
.en-mark-svg .en-mark-fill   { fill: var(--en-key); }
.en-mark-svg .en-mark-stroke { stroke: var(--en-key); }
.en-mark-svg .en-mark-dots   { fill: var(--en-key-light); }
[data-theme="dark"] .en-mark-svg .en-mark-fill,
[data-theme="dark"] .en-mark-svg .en-mark-stroke { fill: #e9e9ed; stroke: #e9e9ed; }
[data-theme="dark"] .en-mark-svg .en-mark-fill { stroke: none; }
[data-theme="dark"] .en-mark-svg .en-mark-stroke { fill: none; }

/* Начална страница — знакът вместо щит */
.security-badge-icon.en-mark-svg { width: 50px; height: 50px; color: inherit; filter: drop-shadow(0 4px 14px rgba(145, 132, 217, 0.45)); }
.security-badge-bg { background: linear-gradient(135deg, var(--en-key-deep), transparent); box-shadow: 0 0 36px rgba(145, 132, 217, 0.35), inset 0 0 0 1px rgba(255,255,255,0.08); }

/* Khan — словна марка в горната лента */
.khan-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.khan-brand svg { width: 26px; height: 26px; }
.khan-brand .khan-wordmark { font-family: var(--en-font-heading); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.khan-brand .khan-wordmark span { color: var(--en-key); font-weight: 500; }
.khan-brand .khan-area { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--khan-muted); margin-left: 6px; }

/* ── Модерни анимации ────────────────────────────────────────────────────── */
/* По-спокойни заместители на старите „електрически вълни“ (същите имена → по-късната
   дефиниция печели). Вълната при въвеждане на покана (electricWaveTravel) е запазена. */
@keyframes electricWaveHome {
  0%   { transform: translate3d(-12%, -6%, 0) scale(1);   opacity: .55; }
  50%  { transform: translate3d(14%, 8%, 0)  scale(1.12); opacity: .85; }
  100% { transform: translate3d(-12%, -6%, 0) scale(1);   opacity: .55; }
}
@keyframes electricWaveKhan {
  0%   { transform: translate3d(-8%, 0, 0) scale(1);    opacity: .5; }
  50%  { transform: translate3d(8%, 4%, 0) scale(1.08); opacity: .8; }
  100% { transform: translate3d(-8%, 0, 0) scale(1);    opacity: .5; }
}
@keyframes electricWave      { 0%,100% { transform: translate3d(-6%, 0, 0); opacity: .5; } 50% { transform: translate3d(6%, 0, 0); opacity: .8; } }
@keyframes electricWaveFlow  { 0%,100% { transform: translate3d(-5%, -3%, 0); opacity: .45; } 50% { transform: translate3d(5%, 3%, 0); opacity: .75; } }
@keyframes electricWaveFooter{ 0%,100% { opacity: .35; } 50% { opacity: .7; } }
@keyframes electricWaveHover { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes gradientPulse     { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes glowPulse         { 0%,100% { box-shadow: 0 0 0 0 rgba(145,132,217,.0); } 50% { box-shadow: 0 0 0 10px rgba(145,132,217,.08); } }
@keyframes badgePulse        { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.06); } }
@keyframes particleDrift     { 0%,100% { transform: translate3d(0,0,0); opacity: .35; } 50% { transform: translate3d(6px,-14px,0); opacity: .7; } }

/* Влизане на елементи: меко издигане с леко мащабиране */
@keyframes en-rise { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes en-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes en-key-float { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-10px,0) rotate(-1.5deg); } }

.glass-box, .home-container, .plan-card, .khan-card, .checkout-card, .success-card, .error-card {
  animation: en-rise .6s var(--en-ease) both;
}
.khan-main > * { animation: en-rise .55s var(--en-ease) both; }
.khan-main > *:nth-child(2) { animation-delay: .06s; }
.khan-main > *:nth-child(3) { animation-delay: .12s; }
.plan-card:nth-child(2) { animation-delay: .06s; }
.plan-card:nth-child(3) { animation-delay: .12s; }
.plan-card:nth-child(4) { animation-delay: .18s; }
.plan-card:nth-child(5) { animation-delay: .24s; }

/* Интерактивност: кратки, с пружинна крива */
.btn-glass, .khan-btn, .act-btn, .invite-btn-enhanced, .plan-card, .btn, button[type="submit"] {
  transition: transform .18s var(--en-ease), box-shadow .22s var(--en-ease), background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-glass:hover, .khan-btn:hover, .btn:hover { transform: translateY(-1px); }
.btn-glass:active, .khan-btn:active, .btn:active, .invite-btn-enhanced:active { transform: translateY(0) scale(.98); }
.plan-card:hover { transform: translateY(-4px); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--focus-ring); transition: box-shadow .15s ease, border-color .15s ease; }

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

/* ── Khan вход ───────────────────────────────────────────────────────────── */
/* Тъмен фон с ключа (огледално → ключът е вляво), малка стъклена карта горе вдясно,
   без обяснителни текстове. */
.khan-login-shell {
  position: relative;
  min-height: 100vh;
  display: block;
  padding: 0;
  overflow: hidden;
  background: #0f1120 !important;
  color: #e9e9ed;
}
.khan-login-shell::before {
  content: "";
  position: fixed; inset: 0; z-index: 0;
  background: url("/brand/login-bg-2560x1440.png") center / cover no-repeat;
  transform: scaleX(-1);
  animation: en-fade 1.2s ease both;
}
@media (max-aspect-ratio: 3/4) {
  .khan-login-shell::before { background-image: url("/brand/login-bg-1080x1920.png"); }
}
.khan-login-shell::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(245deg, rgba(15, 17, 32, .55) 0%, rgba(15, 17, 32, .15) 45%, rgba(15, 17, 32, 0) 70%);
}
.khan-login-hero {
  position: relative; z-index: 1;
  display: flex;
  justify-content: flex-end;
  width: auto;
  margin: 0;
  padding: clamp(24px, 6vh, 72px) clamp(20px, 6vw, 96px) 0 20px;
}
.khan-login-card {
  width: min(360px, calc(100vw - 40px));
  padding: 24px 24px 20px;
  background: rgba(22, 24, 38, .55) !important;
  border: 1px solid rgba(233, 233, 237, .14) !important;
  border-radius: 16px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #e9e9ed !important;
  text-shadow: none !important;
  animation: en-rise .7s var(--en-ease) both;
}
.khan-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.khan-login-brand svg { width: 34px; height: 34px; flex: none; animation: en-key-float 7s ease-in-out infinite; }
.khan-login-brand .khan-wordmark { font-family: var(--en-font-heading); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: #e9e9ed; }
.khan-login-brand .khan-wordmark span { color: #b5abfc; font-weight: 500; }
.khan-login-form { display: grid; gap: 12px; }
.khan-login-form .form-label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #9397ab; margin: 2px 0 -4px; font-family: var(--en-font-heading); font-weight: 700; }
.khan-login-shell .input-wrapper input {
  background: rgba(15, 17, 32, .55); color: #e9e9ed;
  border: 1px solid rgba(233, 233, 237, .16); border-radius: 10px;
  padding: 12px 44px 12px 14px; font-family: var(--en-font-body); font-size: .98rem;
}
.khan-login-shell .input-wrapper input::placeholder { color: #6f738a; }
.khan-login-shell .input-wrapper input:focus { border-color: #9184d9; box-shadow: 0 0 0 3px rgba(145, 132, 217, .25); }
.khan-login-shell .field-ico { color: #9397ab; display: inline-flex; }
.khan-login-shell .field-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.khan-login-shell .field-ico:hover { color: #b5abfc; }
.khan-login-shell .login-submit {
  margin-top: 8px; min-height: 44px; border-radius: 10px;
  background: #9184d9 !important; border: none !important; color: #0f1120 !important;
  font-family: var(--en-font-heading); font-weight: 800; letter-spacing: .01em;
  backdrop-filter: none;
}
.khan-login-shell .login-submit:hover { background: #b5abfc !important; }
.khan-login-error {
  background: rgba(217, 138, 132, .12); border: 1px solid rgba(217, 138, 132, .35);
  color: #d98a84; border-radius: 10px; padding: 10px 14px; font-size: .875rem;
}
.khan-login-error:empty, .khan-login-error.validation-summary-valid { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Корекции след преглед на Dev (октомври 2026)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Превключвател на тема: шевица (светла) ↔ ключ (тъмна) ─────────────── */
.toggle-ui { background-color: #d9d8e6; border: 1px solid rgba(22,24,38,.12); box-sizing: border-box; }
.toggle-ui::before {
  content: "";
  background-color: #ffffff;
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d52a8' stroke-width='2' stroke-linejoin='round'><path d='M12 3l9 9-9 9-9-9z'/><path d='M12 8l4 4-4 4-4-4z' fill='%235d52a8' stroke='none'/></svg>");
  box-shadow: 0 1px 3px rgba(22,24,38,.25);
  transform: none;
  top: 2px; left: 2px; height: 22px; width: 22px;
}
#theme-toggle-checkbox:checked + .toggle-ui { background-color: #423a6a; border-color: rgba(233,233,237,.14); }
#theme-toggle-checkbox:checked + .toggle-ui::before {
  content: "";
  background-color: #161826;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'><path fill='%23e9e9ed' fill-rule='evenodd' d='M24 8L40 24L24 40L8 24ZM24 17L31 24L24 31L17 24Z'/><path fill='%23b5abfc' d='M24 0L27 3L24 6L21 3ZM0 24L3 21L6 24L3 27ZM24 42L27 45L24 48L21 45Z'/><path d='M32 32L58 58M48 48L42 54M55 55L49 61' stroke='%23e9e9ed' stroke-width='7'/></svg>");
  transform: translateX(24px);
}

/* ── Начална страница: знакът ────────────────────────────────────────────── */
.security-badge-bg {
  background: linear-gradient(135deg, rgba(145,132,217,.22), rgba(66,58,106,.25));
  border: none;
  box-shadow: 0 0 36px rgba(145,132,217,.28), inset 0 0 0 1px rgba(255,255,255,.08);
  animation: none;
}
[data-theme="light"] .security-badge-bg {
  background: linear-gradient(135deg, #e7e5fe, #ffffff);
  box-shadow: 0 8px 24px rgba(93,82,168,.18), inset 0 0 0 1px rgba(93,82,168,.18);
}
.security-badge-icon.en-mark-svg { filter: none; }
.en-mark-outline, .en-mark-outline-stroke { display: none; }
/* Светла тема: бял ключ с тъмен контур */
[data-theme="light"] .security-badge-icon .en-mark-fill { fill: #ffffff; }
[data-theme="light"] .security-badge-icon .en-mark-stroke { stroke: #ffffff; }
[data-theme="light"] .security-badge-icon .en-mark-dots { fill: #5d52a8; }
[data-theme="light"] .security-badge-icon .en-mark-outline { display: block; fill: #161826; stroke: #161826; stroke-width: 4; stroke-linejoin: round; }
[data-theme="light"] .security-badge-icon .en-mark-outline-stroke { display: block; stroke: #161826; fill: none; }

/* ── Начална страница: мрежа от шевици с импулси ─────────────────────────── */
.home-container { position: relative; }
.en-network {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: .9;
}
.en-network .en-wire {
  fill: none; stroke: var(--en-key); stroke-width: 1; stroke-linecap: round;
  stroke-opacity: .55; stroke-dasharray: 6 180; stroke-dashoffset: 0;
  animation: en-pulse-travel 6s linear infinite;
}
.en-network .en-wire:nth-child(2) { animation-delay: -1.2s; animation-duration: 7s; }
.en-network .en-wire:nth-child(3) { animation-delay: -2.4s; animation-duration: 4.5s; }
.en-network .en-wire:nth-child(4) { animation-delay: -3.1s; animation-duration: 5s; }
.en-network .en-wire:nth-child(5) { animation-delay: -0.6s; animation-duration: 5.5s; }
.en-network .en-wire:nth-child(6) { animation-delay: -4s;   animation-duration: 6.5s; }
.en-network .en-wire:nth-child(7) { animation-delay: -2s;   animation-duration: 6s; }
.en-network .en-node { fill: var(--en-key); opacity: .35; animation: en-node-blink 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.en-network .en-node:nth-child(odd) { animation-delay: -1.6s; }
.en-network .en-node:nth-child(3n) { animation-delay: -0.8s; }
@keyframes en-pulse-travel { to { stroke-dashoffset: -186; } }
@keyframes en-node-blink { 0%,100% { opacity: .25; transform: scale(1); } 50% { opacity: .9; transform: scale(1.35); } }
.home-container > :not(.en-network) { position: relative; z-index: 1; }
.home-container::before { display: none; } /* старата „електрическа“ мъгла */
.floating-particles { display: none; }

/* ── Начална страница: поле за код — състояния ───────────────────────────── */
.invite-wrapper-enhanced { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease, transform .25s var(--en-ease); }
.invite-btn-enhanced { transition: background .25s ease, box-shadow .25s ease, transform .18s var(--en-ease); }
.invite-btn-enhanced::before { display: none; }
.invite-btn-enhanced:hover { transform: translateY(-50%) scale(1.05); }
.invite-btn-enhanced:active { transform: translateY(-50%) scale(.96); }
.invite-btn-enhanced .ico-check, .invite-btn-enhanced .ico-ring { display: none; }
.invite-btn-enhanced .ico-ring {
  position: absolute; inset: 4px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: en-spin .8s linear infinite;
}
.invite-feedback {
  margin-top: 10px; font-size: .86rem; color: var(--en-signal);
  opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s var(--en-ease);
  min-height: 1.2em;
}
.invite-feedback.show { opacity: 1; transform: none; }

/* проверка */
#invitation-form.is-checking .invite-btn-enhanced { cursor: progress; }
#invitation-form.is-checking .invite-btn-enhanced .ico-arrow { display: none; }
#invitation-form.is-checking .invite-btn-enhanced .ico-ring { display: block; }
#invitation-form.is-checking .invite-wrapper-enhanced { border-color: rgba(145,132,217,.6); }
#invitation-form.is-checking .invite-wrapper-enhanced input { color: var(--text-muted) !important; }

/* успех */
#invitation-form.is-success .invite-wrapper-enhanced {
  border-color: var(--en-success) !important;
  background: rgba(127,194,160,.12) !important;
  box-shadow: 0 0 0 4px rgba(127,194,160,.18), 0 10px 36px rgba(0,0,0,.3) !important;
  transform: none;
}
#invitation-form.is-success .invite-wrapper-enhanced input {
  color: var(--en-success) !important; font-weight: 700 !important; text-align: center;
  padding-right: 1.5rem; animation: en-fade .4s ease both;
}
#invitation-form.is-success .invite-btn-enhanced { background: var(--en-success); box-shadow: 0 4px 14px rgba(127,194,160,.45); animation: en-pop .45s var(--en-ease) both; }
#invitation-form.is-success .invite-btn-enhanced .ico-arrow { display: none; }
#invitation-form.is-success .invite-btn-enhanced .ico-check { display: block; width: 20px; height: 20px; }
#invitation-form.is-success .ico-check-path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: en-draw .45s .15s ease forwards; }
@keyframes en-pop { 0% { transform: translateY(-50%) scale(.6); } 60% { transform: translateY(-50%) scale(1.12); } 100% { transform: translateY(-50%) scale(1); } }
@keyframes en-draw { to { stroke-dashoffset: 0; } }

/* грешка */
#invitation-form.is-error .invite-wrapper-enhanced {
  border-color: var(--en-signal) !important;
  box-shadow: 0 0 0 4px rgba(217,138,132,.18), 0 10px 36px rgba(0,0,0,.3) !important;
  animation: en-shake .5s var(--en-ease);
}
#invitation-form.is-error .invite-btn-enhanced { background: var(--en-signal); box-shadow: 0 4px 14px rgba(217,138,132,.4); }
@keyframes en-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ── Khan вход: без етикети, стрелка вместо текст ────────────────────────── */
.khan-login-form .form-label { display: none; }
.khan-login-shell .login-submit { font-size: 1.3rem; line-height: 1; }

/* ── Потвърждение на поръчка: две колони, без скрол на екран ≥ 1024 px ──── */
.en-checkout { max-width: 1040px; min-height: calc(100vh - 32px); align-items: center; }
.en-checkout-glass { padding: 1.4rem 1.6rem 1.3rem; }
.en-checkout-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; position: relative; z-index: 1; }
.en-checkout-head .checkout-title { margin: 0; font-size: 1.5rem; }
.en-checkout-head .en-eyebrow { margin-bottom: 2px; font-family: var(--en-font-heading); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--en-key); font-weight: 700; }
.en-progress { width: 180px; height: 4px; margin: 0 0 6px; border-radius: 4px; background: rgba(145,132,217,.18); overflow: hidden; }
.en-progress .progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--en-key), var(--en-key-light)); }
.en-checkout-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.en-checkout-col { min-width: 0; }
.en-plan-hero {
  display: grid; gap: 2px; padding: 1rem 1.1rem; border-radius: 14px;
  background: linear-gradient(160deg, var(--en-key-deep), transparent); border: 1px solid var(--border-color);
}
.en-plan-label { font-family: var(--en-font-heading); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.en-plan-name { font-family: var(--en-font-heading); font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.en-plan-quota { font-family: var(--en-font-heading); font-size: 1.9rem; font-weight: 800; color: var(--en-key); letter-spacing: -.02em; line-height: 1.1; }
.en-plan-desc { font-size: .86rem; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
.en-kv-list { margin: .9rem 0 0; display: grid; }
.en-kv-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.en-kv-list dt { font-weight: 400; color: var(--text-muted); font-size: .88rem; margin: 0; }
.en-kv-list dd { margin: 0; font-weight: 500; text-align: right; font-size: .92rem; }
.en-kv-list .en-kv-total { border-bottom: none; padding-top: 12px; }
.en-kv-list .en-kv-total dd { display: grid; justify-items: end; }
.en-kv-list .en-kv-total strong { font-family: var(--en-font-heading); font-size: 1.6rem; font-weight: 800; color: var(--en-key); letter-spacing: -.02em; line-height: 1; }
.en-kv-list .en-kv-total small { color: var(--text-muted); font-size: .78rem; }
.en-feature-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.en-feature-list li { position: relative; padding-left: 16px; font-size: .82rem; color: var(--text-color); line-height: 1.4; }
.en-feature-list li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 7px; height: 7px; background: var(--en-success); transform: rotate(45deg); border-radius: 1px; }
.en-form-title { margin: 0 0 2px; font-family: var(--en-font-heading); font-size: 1.05rem; font-weight: 800; }
.en-form-hint { margin: 0 0 .9rem; font-size: .84rem; color: var(--text-muted); }
.en-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.en-field { display: grid; gap: 5px; margin-bottom: 10px; }
.en-field label { font-family: var(--en-font-heading); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.en-field input {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px;
  background: var(--input-bg); color: var(--text-color);
  border: 1px solid var(--input-border); border-radius: 10px;
  font-family: var(--en-font-body); font-size: .98rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.en-field input::placeholder { color: var(--text-muted); opacity: .7; }
.en-field input:focus { outline: none; border-color: var(--en-key); box-shadow: 0 0 0 3px var(--focus-ring); }
.en-field-help { font-size: .76rem; color: var(--text-muted); }
.en-checkout-actions { display: flex; gap: 10px; align-items: stretch; margin-top: .6rem; }
.en-checkout-actions .submit-button { flex: 1; margin: 0; }
.en-legal { margin: .8rem 0 0; font-size: .74rem; line-height: 1.5; color: var(--text-muted); }
.en-legal a { color: var(--en-key); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) {
  .en-checkout { min-height: 0; }
  .en-checkout-grid { grid-template-columns: 1fr; }
  .en-feature-list { grid-template-columns: 1fr; }
  .en-checkout-head { flex-direction: column; align-items: flex-start; }
}

/* ── Страница за неуспешно плащане: линк към поддръжката ─────────────────── */
.support-info .support-link { color: var(--en-key); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.support-info .support-link:hover { color: var(--en-key-light); }

/* знакът на началната страница: без наследен зелен контур от старите стилове */
.security-badge-icon.en-mark-svg, [data-theme="light"] .security-badge-icon.en-mark-svg { color: var(--en-key); }
.security-badge-icon .en-mark-fill, .security-badge-icon .en-mark-dots { stroke: none !important; }
[data-theme="light"] .security-badge-icon .en-mark-outline { stroke: #161826 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Khan · Поканни кодове (карти, responsive)
   ══════════════════════════════════════════════════════════════════════════ */
.en-invites { display: grid; gap: 14px; align-content: start; }

.en-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 4px 0; }
.en-page-title { margin: 0; font-family: var(--en-font-heading); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--khan-ink); }
.en-page-head .en-eyebrow { margin: 0 0 2px; font-family: var(--en-font-heading); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--en-key); }

.en-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.en-stat { display: grid; gap: 0; padding: 8px 14px; min-width: 92px; border-radius: 10px; background: var(--khan-surface); border: 1px solid var(--khan-border); }
.en-stat-num { font-family: var(--en-font-heading); font-size: 1.25rem; font-weight: 800; line-height: 1.1; color: var(--khan-ink); }
.en-stat-label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--khan-muted); }
.en-stat-warn .en-stat-num { color: var(--en-signal); }

/* тулбар */
.en-toolbar { display: grid; grid-template-columns: minmax(220px, 1.4fr) auto minmax(260px, 1fr); gap: 12px; align-items: center; padding: 10px 12px !important; }
.en-search { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 42px; border-radius: 10px; background: var(--khan-surface); border: 1px solid var(--khan-border); cursor: text; }
.en-search:focus-within { border-color: var(--en-key); box-shadow: 0 0 0 3px var(--focus-ring); }
.en-search svg { width: 18px; height: 18px; flex: none; stroke: var(--khan-muted); fill: none; stroke-width: 2; stroke-linecap: round; }
.en-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--khan-ink); font-family: var(--en-font-body); font-size: .95rem; }
.en-search input::placeholder { color: var(--khan-muted); }
.en-search-count { font-size: .76rem; color: var(--khan-muted); white-space: nowrap; font-family: var(--en-font-heading); font-weight: 700; }

.en-filter { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--khan-surface); border: 1px solid var(--khan-border); }
.en-chip { margin: 0; padding: 7px 12px; border: none; border-radius: 8px; background: transparent; color: var(--khan-muted); font-family: var(--en-font-heading); font-size: .8rem; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.en-chip:hover { color: var(--khan-ink); }
.en-chip.active { background: var(--en-key); color: #fff; }
[data-theme="dark"] .en-chip.active { color: #0f1120; }

.en-create { display: flex; gap: 8px; margin: 0; }
.en-create input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--khan-border); background: var(--khan-surface); color: var(--khan-ink); font-family: var(--en-font-body); font-size: .95rem; }
.en-create input:focus { outline: none; border-color: var(--en-key); box-shadow: 0 0 0 3px var(--focus-ring); }

/* бутони */
.en-btn-primary, .en-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 14px; margin: 0; border-radius: 10px;
  font-family: var(--en-font-heading); font-weight: 700; font-size: .84rem; letter-spacing: .01em;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .15s var(--en-ease);
  white-space: nowrap;
}
.en-btn-primary { background: var(--en-key); color: #fff; border: 1px solid transparent; }
[data-theme="dark"] .en-btn-primary { color: #0f1120; }
.en-btn-primary:hover { background: var(--en-key-light); color: #fff; transform: translateY(-1px); }
[data-theme="dark"] .en-btn-primary:hover { color: #0f1120; }
.en-btn-primary-danger { background: var(--en-signal); }
.en-btn-primary-danger:hover { background: var(--en-signal); filter: brightness(1.1); }
.en-btn-ghost { background: transparent; color: var(--khan-ink); border: 1px solid var(--khan-border); }
.en-btn-ghost:hover { border-color: var(--en-key); color: var(--en-key); text-decoration: none; }
.en-btn-ghost.en-btn-danger:hover { border-color: var(--en-signal); color: var(--en-signal); }
.en-btn-primary svg, .en-btn-ghost svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.en-icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0; padding: 0; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--khan-muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.en-icon-btn:hover { color: var(--en-key); border-color: var(--khan-border); }
.en-icon-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.en-icon-btn.copied { color: var(--en-success); }

/* карти */
.en-invite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.en-invite { display: grid; gap: 10px; padding: 14px 16px 12px !important; animation: en-rise .45s var(--en-ease) both; }
.en-invite[hidden] { display: none !important; }
.en-invite-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.en-invite-code { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.en-code { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; color: var(--khan-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-family: var(--en-font-heading); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.en-pill-free { background: rgba(145,132,217,.16); color: var(--en-key); }
.en-pill-used { background: rgba(127,194,160,.16); color: var(--en-success); }
.en-pill-pending { background: rgba(217,138,132,.16); color: var(--en-signal); }

.en-invite-facts { display: grid; gap: 0; margin: 0; }
.en-invite-facts > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 5px 0; border-top: 1px solid var(--khan-border); font-size: .84rem; }
.en-invite-facts > div:first-child { border-top: none; }
.en-invite-facts dt { color: var(--khan-muted); font-weight: 400; margin: 0; }
.en-invite-facts dd { margin: 0; color: var(--khan-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-invite-facts dd.en-break { white-space: normal; word-break: break-all; }
.en-invite-facts a { color: var(--en-key); }
.en-dim { color: var(--khan-muted); font-weight: 400; }
.en-warn { color: var(--en-signal); font-weight: 600; }

.en-invite-more { font-size: .8rem; }
.en-invite-more summary { cursor: pointer; color: var(--khan-muted); list-style: none; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.en-invite-more summary::-webkit-details-marker { display: none; }
.en-invite-more summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
.en-invite-more[open] summary::before { transform: rotate(45deg); }
.en-invite-more summary:hover { color: var(--en-key); }
.en-invite-facts-tech { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--khan-table-head); }
.en-invite-facts-tech > div { font-size: .78rem; border-top-color: transparent; padding: 3px 0; }

.en-invite-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--khan-border); }
.en-invite-actions form { margin: 0; margin-left: auto; }
.en-invite-actions .en-btn-ghost { min-height: 34px; padding: 0 10px; font-size: .78rem; }

.en-empty { text-align: center; color: var(--khan-muted); padding: 40px 20px !important; }
.en-empty svg { width: 36px; height: 36px; stroke: var(--en-key); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.en-empty p { margin: 0; }

/* диалог за изтриване */
dialog.en-confirm { padding: 0; border: none; background: transparent; }
dialog.en-confirm::backdrop { background: rgba(15,17,32,.6); backdrop-filter: blur(4px); }
.en-confirm-box { width: min(420px, 92vw); padding: 22px 24px 18px; border-radius: 14px; background: var(--khan-surface-strong); color: var(--khan-ink); border: 1px solid var(--khan-border); box-shadow: 0 24px 64px -16px rgba(0,0,0,.5); font-family: var(--en-font-body); }
.en-confirm-box h3 { margin: 0 0 8px; font-family: var(--en-font-heading); font-size: 1.1rem; font-weight: 800; }
.en-confirm-box p { margin: 0 0 18px; font-size: .92rem; color: var(--khan-muted); }
.en-confirm-box p strong { color: var(--khan-ink); }
.en-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 1100px) {
  .en-toolbar { grid-template-columns: 1fr 1fr; }
  .en-toolbar .en-search { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .en-toolbar { grid-template-columns: 1fr; }
  .en-filter { width: 100%; display: flex; overflow-x: auto; }
  .en-chip { flex: 1; text-align: center; }
  .en-invite-grid { grid-template-columns: 1fr; }
  .en-invite-facts > div { grid-template-columns: 80px minmax(0, 1fr); }
  .en-invite-actions form { margin-left: 0; }
  .en-stats { width: 100%; }
  .en-stat { flex: 1; min-width: 0; padding: 8px 10px; }
}

/* Khan layout разтяга последния ред (grid-template-rows: auto auto 1fr) — картите не бива да се разпъват */
.khan-page.en-invites { grid-template-rows: none; align-content: start; }
.en-invite-grid { align-items: start; }
.en-invite { align-content: start; }

/* ══════════════════════════════════════════════════════════════════════════
   Начална страница: мрежата е на фона, полето е минимално, приветствие при успех
   ══════════════════════════════════════════════════════════════════════════ */
.en-network-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; opacity: 1; }
.en-network-bg .en-wire { stroke-width: 1.2; stroke-dasharray: 10 260; animation-duration: 9s; stroke-opacity: .5; }
.en-network-bg .en-wire:nth-child(2n) { animation-duration: 11s; }
.en-network-bg .en-wire:nth-child(3n) { animation-duration: 7.5s; animation-delay: -3s; }
.en-network-bg .en-node { opacity: .3; }
[data-theme="light"] .en-network-bg .en-wire { stroke-opacity: .35; }
#center { z-index: 1; }
.home-container {
  background: rgba(22, 24, 38, .62);
  border: 1px solid rgba(233, 233, 237, .10);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  gap: 1.5rem;
}
[data-theme="light"] .home-container { background: rgba(255, 255, 255, .82); border-color: rgba(22, 24, 38, .08); }
/* минимално поле */
.invite-wrapper-enhanced {
  background: rgba(15, 17, 32, .45) !important;
  border: 1px solid rgba(233, 233, 237, .16) !important;
  box-shadow: none !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.invite-wrapper-enhanced:focus-within { border-color: var(--en-key) !important; box-shadow: 0 0 0 3px rgba(145,132,217,.2) !important; transform: none; }
[data-theme="light"] .invite-wrapper-enhanced { background: #ffffff !important; border: 1px solid rgba(22,24,38,.16) !important; }
.invite-btn-enhanced { background: var(--en-key); box-shadow: none; }
[data-theme="dark"] .invite-btn-enhanced { color: #0f1120; }
.invite-btn-enhanced:hover { background: var(--en-key-light); box-shadow: none; }

/* приветствие */
.en-welcome { display: none; text-align: center; padding: .25rem 0 .5rem; }
.en-welcome-eyebrow { margin: 0 0 6px; font-family: var(--en-font-heading); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--en-key); }
.en-welcome-title { margin: 0 0 8px; font-family: var(--en-font-heading); font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-color); line-height: 1.15; }
.en-welcome-text { margin: 0 0 14px; font-size: .92rem; color: var(--text-muted); line-height: 1.55; }
.en-welcome-line { height: 2px; width: 120px; margin: 0 auto; background: rgba(145,132,217,.2); border-radius: 2px; overflow: hidden; }
.en-welcome-line span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--en-key), var(--en-key-light)); animation: en-progress 2.4s var(--en-ease) forwards; }
@keyframes en-progress { to { width: 100%; } }
.home-container.is-welcome .invite-form-container { display: none; }
.home-container.is-welcome .en-welcome { display: block; animation: en-rise .7s var(--en-ease) both; }
.home-container.is-welcome .security-badge-bg { animation: en-glow 1.6s ease-in-out infinite; }
.home-container.is-welcome .security-badge-icon { animation: en-key-float 2.4s ease-in-out infinite; }
@keyframes en-glow { 0%,100% { box-shadow: 0 0 36px rgba(145,132,217,.28); } 50% { box-shadow: 0 0 56px rgba(145,132,217,.55); } }
.security-footer .tooltip-word { text-decoration-color: rgba(145,132,217,.5); }

/* ══════════════════════════════════════════════════════════════════════════
   Потвърждение: валидация
   ══════════════════════════════════════════════════════════════════════════ */
.en-field input.is-invalid { border-color: var(--en-signal) !important; box-shadow: 0 0 0 3px rgba(217,138,132,.2) !important; }
.en-field input.is-invalid::placeholder { color: var(--en-signal); opacity: .8; }
.en-form-error { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: .86rem; color: var(--en-signal); background: rgba(217,138,132,.12); border-left: 3px solid var(--en-signal); }
.en-form-error[hidden] { display: none; }
.en-shake { animation: en-shake .5s var(--en-ease); }
.en-legal + .en-legal { margin-top: .5rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Избор на план
   ══════════════════════════════════════════════════════════════════════════ */
.en-ps { max-width: 1120px; margin: 0 auto; padding: 24px 20px 48px; color: var(--text-color); }
.en-ps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.en-ps-head .en-eyebrow { margin: 0 0 4px; font-family: var(--en-font-heading); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--en-key); }
.en-ps-title { margin: 0 0 6px; font-family: var(--en-font-heading); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.en-ps-sub { margin: 0; max-width: 560px; font-size: .95rem; color: var(--text-muted); line-height: 1.5; }

/* сегментиран превключвател */
.en-segment { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--surface-color); border: 1px solid var(--border-color); user-select: none; }
.en-segment-input { position: absolute; opacity: 0; width: 0; height: 0; }
.en-segment-opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 9px; font-family: var(--en-font-heading); font-weight: 700; font-size: .88rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: color .2s; margin: 0; }
.en-segment-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: var(--en-key); transition: transform .3s var(--en-ease); }
.en-segment-input:not(:checked) ~ .en-segment-monthly, .en-segment-input:checked ~ .en-segment-annual { color: #fff; }
[data-theme="dark"] .en-segment-input:not(:checked) ~ .en-segment-monthly, [data-theme="dark"] .en-segment-input:checked ~ .en-segment-annual { color: #0f1120; }
.en-segment-input:checked ~ .en-segment-thumb { transform: translateX(100%); }
.en-segment-badge { font-size: .62rem; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: rgba(127,194,160,.18); color: var(--en-success); }
.en-segment-input:checked ~ .en-segment-annual .en-segment-badge { background: rgba(255,255,255,.25); color: inherit; }

/* grid */
.en-ps-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.en-ps-custom { position: relative; display: grid; gap: 14px; padding: 22px 22px 20px !important; border-color: rgba(145,132,217,.35) !important; }
.en-ps-custom.selected, .en-ps-plan.selected { border-color: var(--en-key) !important; box-shadow: 0 0 0 3px rgba(145,132,217,.25), var(--en-shadow, 0 10px 30px rgba(0,0,0,.3)) !important; }
.en-ps-custom-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.en-ps-custom .en-eyebrow { margin: 0 0 2px; font-family: var(--en-font-heading); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--en-key); }
.en-ps-card-title { margin: 0; font-family: var(--en-font-heading); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.en-ps-custom .en-pill { background: rgba(127,194,160,.16); color: var(--en-success); }
.en-ps-custom .en-pill[hidden] { display: none; }
.en-ps-gb { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.en-ps-gb-input { display: inline-flex; align-items: baseline; gap: 6px; }
.en-ps-gb-input input { width: 108px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color); font-family: var(--en-font-heading); font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; text-align: center; -moz-appearance: textfield; }
.en-ps-gb-input input::-webkit-outer-spin-button, .en-ps-gb-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.en-ps-gb-input input:focus { outline: none; border-color: var(--en-key); box-shadow: 0 0 0 3px var(--focus-ring); }
.en-ps-gb-unit { font-family: var(--en-font-heading); font-weight: 800; font-size: 1.1rem; color: var(--text-muted); }
.en-ps-price { text-align: right; }
.en-ps-amount { font-family: var(--en-font-heading); font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--en-key); }
.en-ps-cur { font-family: var(--en-font-heading); font-weight: 700; color: var(--en-key); margin-left: 2px; }
.en-ps-per { margin-left: 6px; font-size: .8rem; color: var(--text-muted); }
.en-ps-bgn { font-size: .74rem; color: var(--text-muted); }
.en-ps-slider input[type="range"] { width: 100%; accent-color: var(--en-key); margin: 0; }
.en-ps-slider-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.en-ps-hint { margin: 0; font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.en-ps-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.en-ps-features li { position: relative; padding-left: 16px; font-size: .82rem; line-height: 1.4; }
.en-ps-features li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 7px; height: 7px; background: var(--en-success); transform: rotate(45deg); border-radius: 1px; }
.en-ps-choose { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border-color); background: transparent; color: var(--text-color); font-family: var(--en-font-heading); font-weight: 700; font-size: .88rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s var(--en-ease); margin: 0; width: 100%; }
.en-ps-choose-primary, .en-ps-plan:hover .en-ps-choose, .en-ps-plan:focus-visible .en-ps-choose, .en-ps-plan.selected .en-ps-choose { background: var(--en-key); border-color: var(--en-key); color: #fff; }
[data-theme="dark"] .en-ps-choose-primary, [data-theme="dark"] .en-ps-plan:hover .en-ps-choose, [data-theme="dark"] .en-ps-plan.selected .en-ps-choose { color: #0f1120; }
.en-ps-choose-primary:hover { background: var(--en-key-light); transform: translateY(-1px); }
.en-ps-choose-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.en-ps-custom.is-locked > :not(.en-ps-custom-head):not(.en-ps-custom-locked):not(.en-ps-choose) { opacity: .35; pointer-events: none; }
.en-ps-custom-locked { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: rgba(145,132,217,.1); border: 1px solid rgba(145,132,217,.25); font-size: .84rem; line-height: 1.5; }
.en-ps-custom-locked[hidden] { display: none; }
.en-ps-custom-locked svg { width: 22px; height: 22px; flex: none; stroke: var(--en-key); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.en-ps-custom-locked p { margin: 0; }

.en-ps-standard-title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-family: var(--en-font-heading); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.en-ps-standard-title::before, .en-ps-standard-title::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
.en-ps-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.en-ps-plan { position: relative; display: grid; gap: 10px; padding: 18px 16px 16px !important; cursor: pointer; transition: transform .18s var(--en-ease), border-color .18s, box-shadow .18s; outline: none; }
.en-ps-plan:hover, .en-ps-plan:focus-visible { transform: translateY(-3px); border-color: var(--en-key) !important; }
.en-ps-plan-rec { border-color: rgba(145,132,217,.5) !important; background: linear-gradient(160deg, rgba(145,132,217,.14), transparent) !important; }
.en-ps-rec { position: absolute; top: -10px; left: 14px; padding: 3px 9px; border-radius: 999px; background: var(--en-key); color: #fff; font-family: var(--en-font-heading); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
[data-theme="dark"] .en-ps-rec { color: #0f1120; }
.en-ps-plan-top { display: grid; gap: 2px; }
.en-ps-plan-name { margin: 0; font-family: var(--en-font-heading); font-size: 1rem; font-weight: 700; color: var(--text-muted); }
.en-ps-plan-quota { font-family: var(--en-font-heading); font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--text-color); }
.en-ps-plan-price .en-ps-amount { font-size: 1.35rem; }
.en-ps-features-compact li { font-size: .78rem; color: var(--text-muted); }
.en-ps-features-compact li::before { width: 6px; height: 6px; }
.en-ps-legal { margin: 20px auto 0; max-width: 720px; text-align: center; font-size: .76rem; line-height: 1.6; color: var(--text-muted); }
.en-ps-legal a { color: var(--en-key); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .en-ps-grid { grid-template-columns: 1fr; }
  .en-ps-plans { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 560px) {
  .en-ps { padding: 16px 14px 40px; }
  .en-segment { width: 100%; }
  .en-segment-badge { display: none; }
  .en-ps-plans { grid-template-columns: 1fr 1fr; }
  .en-ps-gb { flex-direction: column; align-items: flex-start; }
  .en-ps-price { text-align: left; }
}

/* Избор на план: футърът на един ред в дъното, без излишен скрол */
.en-ps { display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; padding-bottom: 14px; }
.en-ps-grid { flex: 1 0 auto; }
.en-ps-legal { max-width: none; margin: 18px auto 0; white-space: nowrap; }
@media (max-width: 1100px) { .en-ps-legal { white-space: normal; } }

/* Начална страница: кутията на знака без контур; при успех ключът се завърта и изчезва */
.security-badge-bg, [data-theme="light"] .security-badge-bg {
  border: 0 !important; outline: 0 !important;
  background: linear-gradient(135deg, rgba(145,132,217,.18), rgba(66,58,106,.22)) !important;
  box-shadow: 0 0 36px rgba(145,132,217,.22) !important;
  animation: none !important;
}
[data-theme="light"] .security-badge-bg { background: linear-gradient(135deg, #e7e5fe, #f6f6fa) !important; box-shadow: 0 8px 24px rgba(93,82,168,.14) !important; }
.home-container.is-welcome .security-badge-icon { animation: en-key-vanish 1.1s cubic-bezier(.55, 0, .3, 1) .15s forwards !important; }
.home-container.is-welcome .security-badge-bg { animation: en-badge-vanish .6s ease .85s forwards !important; }
.home-container.is-welcome .security-badge { animation: en-badge-collapse .5s var(--en-ease) 1.2s forwards; }
@keyframes en-key-vanish {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  25%  { transform: translate(-50%, -50%) rotate(-25deg) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(900deg) scale(0); opacity: 0; }
}
@keyframes en-badge-vanish { to { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
@keyframes en-badge-collapse { to { height: 0; margin: 0; opacity: 0; } }
.en-welcome-title { font-size: 1.6rem; }
.en-welcome-text { font-size: 1.05rem; color: var(--text-color); font-family: var(--en-font-heading); font-weight: 600; letter-spacing: .01em; }
.en-welcome-eyebrow { display: none; }

/* Избор на план: информационен попъп за правилата при смяна на план */
.en-info { position: relative; display: inline-block; }
.en-info-trigger { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; background: none; color: var(--en-key); font: inherit; cursor: help; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.en-info-trigger svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.en-info-trigger:focus-visible { outline: 2px solid var(--en-key); outline-offset: 2px; border-radius: 4px; }
.en-info-pop {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 50;
  width: min(360px, 90vw); padding: 14px 16px; border-radius: 12px;
  background: var(--surface-elevated); color: var(--text-color);
  border: 1px solid var(--border-color); box-shadow: 0 18px 44px -14px rgba(0,0,0,.45);
  font-size: .82rem; line-height: 1.5; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s var(--en-ease), visibility 0s linear .18s;
}
.en-info-pop::before { content: ""; position: absolute; top: -6px; left: 22px; width: 10px; height: 10px; background: inherit; border-left: 1px solid var(--border-color); border-top: 1px solid var(--border-color); transform: rotate(45deg); }
.en-info:hover .en-info-pop, .en-info:focus-within .en-info-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.en-info-pop strong { display: block; margin-bottom: 6px; font-family: var(--en-font-heading); font-size: .88rem; }
.en-info-pop ul { margin: 0 0 10px; padding-left: 16px; }
.en-info-pop li { margin: 3px 0; }
.en-info-pop li b { font-weight: 600; }
.en-info-pop a { color: var(--en-key); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

/* Попъпът е скрит по подразбиране и се показва само при посочване/фокус на иконката */
.en-info { vertical-align: middle; }
.en-info-trigger { text-decoration: none; cursor: help; color: var(--en-key); vertical-align: middle; }
.en-info-trigger svg { width: 16px; height: 16px; }
.en-info-pop { display: none; }
.en-info:hover .en-info-pop, .en-info:focus-within .en-info-pop { display: block; opacity: 1; visibility: visible; transform: none; animation: en-fade .15s ease; }
.en-info-pop ul { margin-bottom: 0; }