/* Reused from Site/cabinet: LK tokens + AUTH_CSS. */
@font-face{font-family:"Golos Text";src:url("/brand/v1/GolosText.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Sans Extra Condensed";src:url("/brand/v1/SofiaSansExtraCondensed.woff2") format("woff2");font-weight:1 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/brand/v1/GeistMono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
html{background:#101012;color-scheme:dark}body{margin:0}*,*::before,*::after{box-sizing:border-box}
.lk{--font-golos:"Golos Text";--font-sofia:"Sofia Sans Extra Condensed";--font-geist-mono:"Geist Mono"}
.lk {
  /* Фон страницы: нейтральный чёрно-серый, без синего и фиолетового уклона
     (было var(--bg), там по синему 11 против 8 по красному, и на больших
     экранах это читалось холодным). Чуть светлее, чтобы панели не висели в
     пустоте. --bg-rgb это тот же цвет для полупрозрачных слоёв: затемнения
     за окнами и растворение картинок в фон считаются от него, поэтому при
     смене фона они не разъезжаются. */
  --bg: #101012;
  --bg-rgb: 16 16 18;
  --s1: #101015;
  --s2: #16161d;
  --s3: #1d1d26;
  --s4: #262630;
  --s5: #35353f;

  /* Серые ступени под плоскую поверхность (15.09): она темнее прежнего
     стекла, поэтому мелкий текст держит контраст, а средний подняли на
     полтона, чтобы подписи читались и на панели, и на чистом фоне */
  --t1: #ffffff;
  --t2: #d4d1cb;
  --t3: #b2afbb;
  --t4: #8f8c99;
  --cream: #eceae4;

  --ac: #7c5cff;
  --ac-hi: #8d71ff;
  --ac-deep: #6c4df0;
  --ac-soft: #a98fff;
  --ac-dark: #3a2480;
  --ac-abyss: #1a1533;

  --ok: #4ade80;
  --ok-bg: #12331f;
  --warn: #ffb020;
  --warn-bg: #2a1e08;
  --err: #e8554d;
  --err-bg: #331310;

  /* Цвет иконки при наведении: светлая сирень из палитры, к ней в
     shellStyles добавлено мягкое свечение, чтобы иконка загоралась,
     а не темнела. Меняется здесь одной строкой. */
  --ic-hot: #c9bcff;
  /* Заливка стекла: краска из макета 3C3C3C. Непрозрачность подобрана по
     фону страницы, а не взята из макета напрямую: в Фигме кадр стоит на
     светлее-сером, у нас фон var(--bg), и те же 20% дают на экране #121215,
     то есть панель почти сливается с фоном.
     Линейка (краска 3C3C3C поверх var(--bg)):
        20% → #121215   35% → #1A1A1C   50% → #222224
        62% → #282829   80% → #323232  100% → #3C3C3C
     Прежнее «белёсое» стекло было #323234, поэтому берём середину.
     Три ступени: панель на фоне, блок внутри панели, наведение. */
  --sf: rgba(60, 60, 60, 0.60);
  --sf-hi: rgba(60, 60, 60, 0.78);
  --glass-fill: rgba(60, 60, 60, 0.50);
  --glass-line: rgba(255, 255, 255, 0.08);
  /* Параметры эффекта Glass из макета: свет, толщина, размытие */
  --glass-ang: -45deg;
  --glass-light: 0.8;
  --glass-depth: 3px;
  --glass-frost: 3px;
  /* Плотная поверхность для того, что висит ПОВЕРХ содержимого: поповеры,
     выехавшее меню, окна. Прозрачной её делать нельзя, текст просвечивает. */
  --pop: #15151b;

  /* Единица масштаба. Макет нарисован на 1920, и все размеры в нём заданы в
     пикселях. Чтобы на экране любой ширины пропорции были как в макете, все
     размеры оболочки считаются от этой единицы: 1u = 1px при ширине 1920.
     Полная пропорция на узких экранах мельчила, поэтому берём середину:
     половина размера фиксирована, половина плывёт за шириной. */
  --u: clamp(0.78px, calc(0.5px + 100vw / 3840), 1.12px);

  --font: var(--font-golos, var(--font-manrope, Inter)), system-ui, sans-serif;
  --mono: var(--font-geist-mono, ui-monospace), "SF Mono", Menlo, monospace;
  --head: var(--font-sofia, "Sofia Sans Extra Condensed"), "Arial Narrow", Impact, sans-serif;

  /* Фоновое свечение выключено: интерфейс плоский. Единица возвращает как было */
  --amb: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

.lka { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lka .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lka-card {
  position: relative; width: min(1200px, 100%); min-height: min(800px, calc(100dvh - 48px));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: 36px; background: var(--s2); border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 40px 90px -50px rgba(0,0,0,.9);
  overflow: hidden; isolation: isolate;
}
.lka-stage { display: contents; }

/* ── Половины с формами ── */
.lka-pane {
  position: relative; min-width: 0; display: flex; flex-direction: column; padding: 34px 48px 36px;
  transition: opacity .3s ease, visibility 0s linear .6s;
}
.lka-pane-a { grid-column: 1; grid-row: 1; }
.lka-pane-b { grid-column: 2; grid-row: 1; }
.lka-pane[inert] { opacity: 0; visibility: hidden; }
.lka-pane:not([inert]) { opacity: 1; visibility: visible; transition: opacity .4s ease .22s, visibility 0s; }
.lka-pane-in { flex: 1; min-height: 0; display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.lka-pane-a[inert] .lka-pane-in { transform: translateX(-28px); }
.lka-pane-b[inert] .lka-pane-in { transform: translateX(28px); }

/* Только знак, без слова SUAQO (Сергей 24.09) */
.lka-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.lka-logo svg { flex: 0 0 auto; }
.lka-logo b { font-family: var(--head); font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; }
.lka-body { flex: 1; width: 100%; max-width: 408px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 28px 0 4px; }
.lka-enter { animation: lka-enter .42s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes lka-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.lka-h { font-family: var(--head); font-weight: 800; font-size: 50px; line-height: .9; letter-spacing: .005em; text-transform: uppercase; margin: 0 0 26px; color: #fff; }
.lka-form { display: flex; flex-direction: column; gap: 12px; }

/* Поле с иконкой слева */
.lka-field { position: relative; }
.lka-in {
  width: 100%; height: 54px; padding: 0 16px 0 48px; border-radius: 16px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #fff; font: inherit; font-size: 15.5px; outline: none;
  transition: border-color .2s, background-color .2s;
}
.lka-in::placeholder { color: var(--t4); }
.lka-in:focus { border-color: rgba(169,143,255,.6); background: rgba(255,255,255,.06); }
.lka-in-pw { padding-right: 54px; }
.lka-in-bad, .lka-in-bad:focus { border-color: rgba(232,85,77,.6); }
.lka-in:-webkit-autofill, .lka-in:-webkit-autofill:hover, .lka-in:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff; caret-color: #fff; transition: background-color 9999s 0s;
  -webkit-box-shadow: 0 0 0 100px #1d1d25 inset;
}
.lka-ic { position: absolute; left: 16px; top: 27px; transform: translateY(-50%); display: flex; color: var(--t4); pointer-events: none; transition: color .2s; }
.lka-field:focus-within .lka-ic { color: var(--ac-soft); }
.lka-eye {
  position: absolute; right: 7px; top: 7px; width: 40px; height: 40px; border-radius: 12px; border: 0;
  background: none; color: var(--t4); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lka-eye:focus-visible { outline: 2px solid var(--ac-soft); outline-offset: -2px; }
.lka-hint { margin: 7px 2px 0; font-size: 12.5px; line-height: 1.45; color: #ffb3ad; }

.lka-row { display: flex; justify-content: flex-end; margin: -2px 0 0; }
.lka-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--ac-soft); cursor: pointer; text-decoration: none; }
.lka-link:focus-visible { outline: 2px solid var(--ac-soft); outline-offset: 3px; border-radius: 4px; }
.lka-link:disabled { color: var(--t4); cursor: default; }

.lka-btn {
  height: 54px; margin-top: 8px; border-radius: 999px; border: 0; background: var(--ac); color: #fff;
  font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background-color .2s, opacity .2s, transform .2s;
}
.lka-btn:active:not(:disabled) { transform: scale(.985); }
.lka-btn:disabled { opacity: .42; cursor: default; }
.lka-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lka-foot { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--t4); }
/* Строка о принятии документов под кнопкой входа */
.lka-legal { margin: 2px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--t4); }
.lka-legal a { color: var(--t2); text-decoration: underline; text-underline-offset: 2px; }
.lka-legal a:hover { color: #fff; }
.lka-foot .lka-link { font-size: 14px; color: #fff; margin-left: 6px; }
.lka-back { display: inline-flex; align-items: center; gap: 6px; align-self: center; margin-top: 18px; font-size: 14px; color: var(--t3); }

.lka-err { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: #ffb3ad; }
.lka-err svg { flex: 0 0 auto; margin-top: 1px; color: var(--err); }
.lka-err-acts { display: flex; gap: 14px; margin-top: 6px; }
.lka-err-acts .lka-link { font-size: 13.5px; }
.lka-ok { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #cdf6de; }
.lka-ok i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }

/* Живой список правил пароля: круг становится зелёной галочкой */
.lka-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; margin: 4px 2px 2px; padding: 0; list-style: none; }
.lka-rule { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.2; color: var(--t4); transition: color .2s; }
.lka-rule i { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.24); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background-color .2s, border-color .2s, color .2s; }
.lka-rule-ok { color: var(--t2); }
.lka-rule-ok i { background: var(--ok); border-color: var(--ok); color: #0c2616; }

/* Готовый надёжный пароль: кнопка под полями и сам пароль с копированием */
.lka-gen-btn { display: inline-flex; align-items: center; gap: 7px; }
.lka-gen { display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 14px; border-radius: 16px; background: rgba(124,92,255,.1); border: 1px solid rgba(169,143,255,.26); }
.lka-gen code { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 15px; letter-spacing: .02em; color: #fff; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.lka-gen button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 12px; border: 0; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 13.5px; cursor: pointer; transition: background-color .2s; }
.lka-gen button:focus-visible { outline: 2px solid var(--ac-soft); outline-offset: 2px; }

/* Галочки согласий */
.lka-checks { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 2px; }
.lka-check { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; line-height: 1.45; color: var(--t3); }
.lka-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lka-check i { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.26); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background-color .2s, border-color .2s, color .2s; }
.lka-check input:checked + i { background: var(--ac); border-color: var(--ac); color: #fff; }
.lka-check input:focus-visible + i { outline: 2px solid var(--ac-soft); outline-offset: 2px; }
.lka-check a { color: var(--t2); text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); text-underline-offset: 2px; }
.lka-check-bad i { border-color: rgba(232,85,77,.7); }
/* Звёздочка обязательного пункта перед текстом */
.lka-req { margin-right: 3px; font-weight: 600; color: #ff8f87; }

.lka-invite { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; margin: -8px 0 18px; padding: 8px 14px 8px 11px; border-radius: 999px; background: rgba(124,92,255,.12); border: 1px solid rgba(169,143,255,.22); font-size: 13.5px; color: var(--t2); }
.lka-invite svg { color: var(--ac-soft); flex: 0 0 auto; }
.lka-invite b { color: #fff; font-weight: 600; }

/* Куда ушёл код */
.lka-to { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; margin: 0 0 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.lka-to span { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--mono); font-size: 14px; color: #fff; }
.lka-to span svg { color: var(--t4); flex: 0 0 auto; }
.lka-to em { min-width: 0; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lka-to .lka-link { flex: 0 0 auto; white-space: nowrap; }

/* Код: шесть ячеек поверх одного настоящего поля (вставка, автозаполнение) */
.lka-code { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.lka-cbox {
  height: 64px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 27px; color: #fff;
  transition: border-color .15s, background-color .15s;
}
.lka-cbox-on { border-color: rgba(169,143,255,.75); background: rgba(124,92,255,.1); }
.lka-code-bad .lka-cbox { border-color: rgba(232,85,77,.55); }
.lka-code-in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; cursor: text; }
.lka-resend { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 2px 0; font-size: 13.5px; color: var(--t4); }
.lka-resend .lka-link { font-size: 13.5px; }
.lka-resend .lka-link:disabled { color: var(--t4); }
.lka-mono { font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--t3); }

/* ── Фиолетовая панель ── */
.lka-brand {
  position: absolute; z-index: 3; top: 12px; bottom: 12px; left: calc(50% + 6px); width: calc(50% - 18px);
  border-radius: 28px; overflow: hidden; color: #fff;
  background: linear-gradient(158deg, #7f60ff 0%, #6a4cf0 30%, #4c31b8 68%, #33207a 100%);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.lka-card[data-swap="1"] .lka-brand { transform: translateX(calc(-100% - 12px)); }
.lka-rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lka-brand-logo { display: none; }
.lka-slide { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 40px 44px 84px; opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.lka-slide-on { opacity: 1; pointer-events: auto; }
.lka-art { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; transform: translateX(34px); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.lka-slide-past .lka-art { transform: translateX(-34px); }
.lka-slide-on .lka-art { transform: none; }
.lka-copy { transform: translateY(12px); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.lka-slide-on .lka-copy { transform: none; }
.lka-copy h2 { margin: 0 0 12px; font-family: var(--head); font-weight: 800; font-size: 46px; line-height: .92; text-transform: uppercase; letter-spacing: .005em; }
.lka-copy p { margin: 0; max-width: 430px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.8); }
.lka-dots { position: absolute; left: 38px; bottom: 34px; z-index: 2; display: flex; gap: 2px; }
.lka-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.lka-dot::before, .lka-dot::after { content: ""; position: absolute; top: 50%; left: 50%; height: 7px; margin-top: -3.5px; border-radius: 99px; background: #fff; transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s; }
.lka-dot::before { width: 7px; margin-left: -3.5px; opacity: .42; }
.lka-dot::after { width: 22px; margin-left: -11px; opacity: 0; transform: scaleX(.32); }
.lka-dot-on::before { opacity: 0; }
.lka-dot-on::after { opacity: 1; transform: none; }
.lka-dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.lka-art-img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Стеклянные куски кабинета на панели */
.lka-il { position: relative; width: 100%; max-width: 440px; height: 100%; max-height: 400px; min-height: 300px; }
.lka-g {
  position: absolute; color: #fff; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 30px 60px -34px rgba(0,0,0,.55);
}
.lka-g-main { left: 50%; top: 50%; width: 312px; margin-left: -156px; transform: translateY(-50%); padding: 18px; }
.lka-chip { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; font-size: 13px; white-space: nowrap; }
.lka-chip b { font-family: var(--mono); font-weight: 500; font-size: 15px; }
.lka-chip-dark { background: rgba(16,16,22,.62); border-color: rgba(255,255,255,.14); box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.lka-chip-tr { right: 0; top: 8%; }
.lka-chip-bl { left: 0; bottom: 8%; }
.lka-dot-ok { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.lka-up { color: var(--ok); }

.lka-rel-top { display: flex; gap: 14px; align-items: center; }
.lka-cover { position: relative; flex: 0 0 auto; width: 78px; height: 78px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #1b1034 0%, #3a1a5c 55%, #ff7a6b 100%); }
.lka-cover svg, .lka-cover img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lka-cover img { display: block; object-fit: cover; }
.lka-rel-meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lka-rel-meta b { font-family: var(--head); font-weight: 800; font-size: 25px; line-height: .95; text-transform: uppercase; }
.lka-rel-meta span { font-size: 12.5px; color: rgba(255,255,255,.72); }
.lka-st { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; padding: 4px 9px; border-radius: 99px; background: rgba(16,16,22,.5); font-size: 11.5px; font-style: normal; }
.lka-sep { height: 1px; margin: 16px 0 14px; background: rgba(255,255,255,.18); }
.lka-plats { display: flex; align-items: center; gap: 7px; }
.lka-plats em { margin-left: 4px; font-style: normal; font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.8); }
.lka .lk-plogo-app { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.lka .lk-plogo { display: inline-block; flex: 0 0 auto; background-color: currentColor; mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; }
.lka .lk-plogo-none { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #101012; font-size: 11px; font-weight: 600; text-transform: uppercase; }

.lka-bal-lab { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.75); }
.lka-bal-sum { display: block; margin: 6px 0 10px; font-family: var(--mono); font-size: 36px; font-weight: 400; letter-spacing: -.02em; }
.lka-bal-chart { display: block; width: 100%; height: 84px; }
.lka-bal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.lka-bal-row div { padding: 10px 12px; border-radius: 12px; background: rgba(16,16,22,.32); }
.lka-bal-row span { display: block; font-size: 11.5px; color: rgba(255,255,255,.7); }
.lka-bal-row b { display: block; margin-top: 3px; font-family: var(--mono); font-weight: 500; font-size: 16px; }

.lka-pitch-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lka-pitch-head b { font-family: var(--head); font-weight: 800; font-size: 25px; line-height: 1; text-transform: uppercase; }
.lka-pitch-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.16); }
.lka-pitch-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lka-pitch-row b { font-size: 14px; font-weight: 600; }
.lka-pitch-row small { font-size: 12px; color: rgba(255,255,255,.72); }
.lka-tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ok); color: #0c2616; }
.lka-wait { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.55); }

@media (hover: hover) {
  .lka-btn:hover:not(:disabled) { background: var(--ac-hi); }
  .lka-link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
  .lka-eye:hover { color: #fff; }
  .lka-check a:hover { color: #fff; }
  .lka-gen button:hover { background: rgba(255,255,255,.16); }
}

/* Невысокий экран ноутбука: всё чуть плотнее */
@media (max-height: 820px) and (min-width: 881px) {
  .lka-card { min-height: calc(100dvh - 32px); }
  .lka { padding: 16px; }
  .lka-pane { padding: 26px 44px 26px; }
  .lka-h { font-size: 44px; margin-bottom: 20px; }
  .lka-in { height: 50px; }
  .lka-ic { top: 25px; }
  .lka-eye { top: 5px; }
  .lka-btn { height: 50px; }
  .lka-form { gap: 10px; }
}

/* Узкое окно: панель уже, иллюстрация меньше */
@media (max-width: 1100px) and (min-width: 881px) {
  .lka-pane { padding-left: 36px; padding-right: 36px; }
  .lka-slide { padding: 32px 32px 80px; }
  .lka-copy h2 { font-size: 38px; }
  .lka-il { transform: scale(.86); }
}

/* ── Телефон. 28.09 Сергей: фиолетовый блок со слайдами на телефоне
   убрать совсем, он только на ноутбуке и компьютере. Экран целиком без
   рамки-карточки: сверху знак SUAQO, под ним форма. Отступы учитывают
   вырез и полоску айфона (safe-area) ── */
@media (max-width: 880px) {
  .lka { padding: 0; align-items: stretch; }
  .lka-card {
    display: flex; flex-direction: column; width: 100%; min-height: 100dvh;
    border-radius: 0; border: 0; box-shadow: none; overflow: visible;
  }
  .lka-brand { display: none; }
  /* Второй шаг ждёт сдвинутым на 28 вправо (переход между шагами): по
     ширине обрезаем, иначе экран телефона ездил вбок */
  .lka-stage { display: grid; position: relative; flex: 1; overflow-x: hidden; overflow-x: clip; }
  .lka-pane { grid-column: 1; grid-row: 1; padding: calc(22px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); }
  .lka-pane[inert] { position: absolute; inset: 0 0 auto 0; }
  /* Знак и форма одной группой по центру экрана (Сергей 03.10: «на телефоне
     по середине, а не прижато к верху»). Свободное место делят авто-отступы
     сверху у знака и снизу у формы: длинная форма (регистрация, пароль по
     приглашению) не уезжает верхом за край, а просто начинается сверху.
     Знак стоит по левому краю формы и на широком телефоне */
  .lka-pane-in > .lka-logo { margin-top: auto; align-self: flex-start; margin-left: max(0px, calc((100% - 460px) / 2)); }
  .lka-body { flex: 0 0 auto; max-width: 460px; margin: 0 auto auto; padding: 30px 0 0; justify-content: flex-start; }
  .lka-h { font-size: 36px; margin-bottom: 18px; }
  .lka-in { height: 54px; font-size: 16px; }
  .lka-btn { height: 54px; font-size: 16px; }
  .lka-code { gap: 7px; }
  .lka-to { padding: 11px 12px 11px 14px; }
  .lka-to span { font-size: 13px; gap: 8px; }
  .lka-cbox { height: 56px; font-size: 23px; border-radius: 14px; }
}
/* Невысокий телефон (SE, открытая клавиатура): форма ближе к знаку */
@media (max-width: 880px) and (max-height: 700px) {
  .lka-body { padding-top: 22px; }
  .lka-h { font-size: 32px; }
}
@media (max-width: 380px) {
  .lka-rules { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lka-brand, .lka-pane, .lka-pane-in, .lka-slide, .lka-art, .lka-copy, .lka-dot::before, .lka-dot::after { transition: none !important; }
  .lka-enter { animation: none; }
}

/* MCP transport layout adapters. */

[hidden]{display:none!important}
a.lka-btn{text-decoration:none;text-align:center;padding:0 20px}
.mcp-intro{font-size:15.5px;line-height:1.6;color:var(--t3);margin:0 0 24px}
.mcp-label{font-size:13.5px;color:var(--t2)}
.mcp-endpoint{padding-left:16px;font-family:var(--mono);font-size:12px;user-select:all}
.mcp-help{font-size:13px;line-height:1.55;color:var(--t4);margin:0}
.mcp-steps{padding-left:20px;margin:24px 0 0;display:grid;gap:12px;color:var(--t2);font-size:14px;line-height:1.5}
.mcp-steps li{padding-left:5px}
.mcp-foot{font-size:12px;line-height:1.55;margin-top:24px;color:var(--t4)}
.mcp-status{display:flex;align-items:flex-start;gap:10px;padding:20px 0 10px;min-height:88px}
.mcp-status>i{width:7px;height:7px;border-radius:50%;background:var(--ac-soft);flex-shrink:0;margin-top:7px}
.mcp-status p{font-size:14px;line-height:1.5;color:var(--t2);margin:0 0 4px}
.mcp-status span{font-size:12.5px;line-height:1.5;color:var(--t4);display:block}
.mcp-status[data-state=approved]>i{background:var(--ok)}
.mcp-status[data-state=expired]>i{background:var(--err)}
.mcp-status[data-state=network]>i{background:var(--warn)}
.mcp-check{align-self:center;margin-top:8px;min-height:36px;font-size:13.5px}
.mcp-details{margin-top:22px;border-top:1px solid rgba(255,255,255,.08);padding-top:17px;color:var(--t3);font-size:13px;line-height:1.55}
.mcp-details summary{cursor:pointer;min-height:26px;color:var(--t3)}
.mcp-details summary:focus-visible{outline:2px solid var(--ac-soft);outline-offset:3px;border-radius:4px}
.mcp-details dl{margin:14px 0 0}.mcp-details dt{color:var(--t4);font-size:12px;margin-top:12px}
.mcp-details dd{margin:4px 0 0;color:var(--t2);overflow-wrap:anywhere}
.mcp-details ul{padding-left:18px;margin:0;display:grid;gap:6px}
.mcp-redirect{font-family:var(--mono);font-size:11px;line-height:1.65}
.mcp-upload .lka-card{min-height:800px}
.mcp-upload .box{margin:4px 0 0}
.mcp-upload label{font-size:14px;color:var(--t2);display:block;margin-bottom:12px}
.mcp-upload input[type=file]{width:100%;font:inherit;font-size:13px;color:var(--t3)}
.mcp-upload input::file-selector-button{font:inherit;font-weight:500;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:16px;padding:13px 16px;cursor:pointer;margin-right:12px}
.mcp-upload input:focus-visible{outline:2px solid var(--ac-soft);outline-offset:4px;border-radius:16px}
.mcp-upload .filename{margin:20px 0 8px;font-size:14px;color:var(--t2);overflow-wrap:anywhere;min-height:21px}
.mcp-upload .status{color:var(--t3);font-size:13px;line-height:1.55;min-height:40px;white-space:pre-line}
.mcp-upload .status.error{color:#ffb3ad}.mcp-upload .status.done{color:#cdf6de}
.mcp-upload progress{width:100%;height:8px;accent-color:var(--ac);margin:16px 0 8px;border-radius:999px;overflow:hidden;background:var(--s4)}
.mcp-upload progress::-webkit-progress-bar{background:var(--s4);border-radius:999px}.mcp-upload progress::-webkit-progress-value{background:var(--ac);border-radius:999px}
.mcp-upload .amount{font-size:12px;font-family:var(--mono);color:var(--t4);min-height:18px;margin-bottom:18px}
.mcp-upload .actions{display:flex;flex-wrap:wrap;gap:10px}
.mcp-upload .actions .lka-btn{padding:0 24px;flex:1 1 auto;margin:0}
.mcp-upload .actions .secondary{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--t2);flex:0 1 auto}
.mcp-upload .note{font-size:12px;line-height:1.6;color:var(--t4);margin:22px 0 0}
@media(max-width:880px){.mcp-upload .lka-card{min-height:100dvh}.mcp-endpoint{font-size:12px}.mcp-upload .actions .lka-btn{padding:0 18px}.mcp-upload .actions #start{flex-basis:100%}}