/* ═══════════════════════════════════════════════════════════════
   Crypto Japan — Broker Access Terminal
   Ethereal-glass / OLED · immersive split · morphing console.
   Логика в js/script.js; config.js + translations.js без изменений.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --bg: #06070B;
    --bg-2: #0A0C12;

    --ink: #F4F6FB;
    --ink-2: #AEB4C4;
    --ink-3: #6D7486;
    --ink-4: #454B5C;

    --line: rgba(255, 255, 255, 0.07);
    --line-2: rgba(255, 255, 255, 0.12);

    /* Акцент как в приложении Nova (dark): #7B7FF2 */
    --iris: #7B7FF2;
    --iris-hi: #9095FF;
    --iris-deep: #5A5FD9;
    --iris-glow: rgba(123, 127, 242, 0.55);
    --mint: #4BE0A8;
    --mint-soft: rgba(75, 224, 168, 0.12);
    --rose: #FF6B7A;
    --rose-soft: rgba(255, 107, 122, 0.12);
    --amber: #F5B544;

    --glass: rgba(20, 22, 32, 0.62);
    --glass-2: rgba(28, 31, 44, 0.72);

    /* Семантические поверхности (инвертируются в светлой теме) */
    --card: rgba(12, 14, 21, 0.86);       /* стеклянные карточки/меню */
    --card-solid: rgba(13, 15, 22, 0.95); /* модалки/тосты */
    --overlay: rgba(4, 5, 9, 0.7);        /* бэкдроп модалок */
    --well: rgba(0, 0, 0, 0.32);          /* утопленные панели (лог) */
    --fill: rgba(255, 255, 255, 0.03);    /* лёгкая подложка */
    --fill-2: rgba(255, 255, 255, 0.05);  /* подложка/hover сильнее */
    --sheen: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));

    --spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Типографика как в приложении Nova */
    --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, "Cascadia Code", monospace;

    --sheet: 0 40px 120px -40px rgba(0, 0, 0, 0.9);
    --edge: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Светлая тема (как в приложении Nova) ──────────────────── */
[data-theme="light"] {
    --bg: #F3F5FA;
    --bg-2: #E9ECF4;

    --ink: #14161F;
    --ink-2: #4C5266;
    --ink-3: #7C8397;
    --ink-4: #AAB0C0;

    --line: rgba(15, 18, 30, 0.09);
    --line-2: rgba(15, 18, 30, 0.15);

    /* Акцент чуть глубже для контраста на светлом */
    --iris: #5A5FD9;
    --iris-hi: #4A4FCC;
    --iris-deep: #4045B5;
    --iris-glow: rgba(90, 95, 217, 0.35);
    --mint: #12B981;
    --mint-soft: rgba(18, 185, 129, 0.12);
    --rose: #E5484D;
    --rose-soft: rgba(229, 72, 77, 0.10);
    --amber: #D9880B;

    --glass: rgba(255, 255, 255, 0.7);
    --glass-2: rgba(255, 255, 255, 0.82);

    --card: rgba(255, 255, 255, 0.9);
    --card-solid: #FFFFFF;
    --overlay: rgba(24, 27, 40, 0.32);
    --well: rgba(15, 18, 30, 0.04);
    --fill: rgba(15, 18, 30, 0.03);
    --fill-2: rgba(15, 18, 30, 0.055);
    --sheen: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.1));

    --sheet: 0 30px 80px -34px rgba(30, 35, 60, 0.28);
    --edge: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="light"] ::selection { background: rgba(90, 95, 217, 0.22); color: #14161F; }

/* Атмосфера в светлой теме — мягче и светлее */
[data-theme="light"] .aurora {
    background:
        radial-gradient(48% 42% at 12% 6%, rgba(123, 127, 242, 0.16), transparent 60%),
        radial-gradient(40% 40% at 88% 18%, rgba(120, 90, 255, 0.10), transparent 62%),
        radial-gradient(55% 50% at 78% 108%, rgba(18, 185, 129, 0.10), transparent 60%),
        radial-gradient(60% 60% at 30% 120%, rgba(93, 96, 230, 0.08), transparent 60%),
        var(--bg);
}
[data-theme="light"] .grain { opacity: 0.035; }
[data-theme="light"] .cta { color: #fff; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-ui);
    color: var(--ink);
    background: var(--bg);
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    font-feature-settings: "liga" 1, "calt" 1, "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1;
    line-height: 1.5;
}
::selection { background: rgba(138, 140, 255, 0.28); color: #fff; }

button, input { font-family: inherit; }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }

/* ── Атмосфера ─────────────────────────────────────────────── */
.aurora {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(48% 42% at 12% 6%, rgba(138, 140, 255, 0.22), transparent 60%),
        radial-gradient(40% 40% at 88% 18%, rgba(120, 90, 255, 0.14), transparent 62%),
        radial-gradient(55% 50% at 78% 108%, rgba(75, 224, 168, 0.12), transparent 60%),
        radial-gradient(60% 60% at 30% 120%, rgba(93, 96, 230, 0.12), transparent 60%),
        var(--bg);
    animation: auroraDrift 24s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
    from { transform: scale(1) translateY(0); }
    to   { transform: scale(1.08) translateY(-2%); }
}

.grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* ── Каркас ────────────────────────────────────────────────── */
.stage {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top) + 18px) clamp(18px, 4vw, 44px) calc(env(safe-area-inset-bottom) + 26px);
}

/* ── Топбар ────────────────────────────────────────────────── */
.topbar {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 3vw, 16px);
    margin-bottom: clamp(20px, 5vh, 52px);
}

/* Скрытые svg-иконки (атрибут hidden) — надёжно прячем */
svg[hidden] { display: none !important; }

.brandmark { display: inline-flex; align-items: center; gap: clamp(8px, 2.4vw, 11px); min-width: 0; }
.brand-glyph { display: grid; place-items: center; flex-shrink: 0; }
.brand-glyph img { width: clamp(24px, 7vw, 30px); height: clamp(24px, 7vw, 30px); object-fit: contain; display: block; }
/* В светлой теме логотип перекрашиваем в фирменный ирис (#5A5FD9):
   brightness(0) сплющивает любой (белый/чёрный) логотип в чёрный,
   дальше цепочка фильтров красит его в цвет кнопки входа */
[data-theme="light"] .brand-glyph img {
    filter: brightness(0) saturate(100%) invert(21%) sepia(17%) saturate(2977%) hue-rotate(205deg) brightness(184%) contrast(93%);
}
/* Название рядом с лого — тем же фирменным цветом */
[data-theme="light"] .brand-word { color: var(--iris); }
.brand-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(15px, 4.8vw, 20px);
    letter-spacing: 0.02em;
    color: var(--ink);
    white-space: nowrap;
}

.topbar-actions { display: inline-flex; align-items: center; gap: clamp(7px, 2.2vw, 10px); flex-shrink: 0; }

/* Переключатель темы (солнце/луна) */
.theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    width: 60px; height: 34px;
    flex-shrink: 0;
    padding: 2px;
    border-radius: 999px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    box-shadow: var(--edge);
    cursor: pointer;
    transition: border-color .24s var(--ease), background .24s var(--ease);
}
.theme-toggle:hover { border-color: var(--line-2); background: var(--glass-2); }
.theme-toggle-knob {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--iris);
    color: #fff;
    box-shadow: 0 2px 8px -2px var(--iris-glow);
    transform: translateX(0);
    transition: transform .42s var(--spring), background .3s var(--ease);
}
[data-theme="light"] .theme-toggle-knob { transform: translateX(26px); background: var(--amber); }
.theme-ic-sun, .theme-ic-moon {
    grid-area: 1 / 1;
    display: block;
    transition: opacity .3s var(--ease), transform .4s var(--spring);
}
/* Тёмная тема → показываем луну; светлая → солнце */
.theme-ic-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-ic-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-ic-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-ic-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
.theme-toggle:active .theme-toggle-knob { transform: translateX(0) scale(0.9); }
[data-theme="light"] .theme-toggle:active .theme-toggle-knob { transform: translateX(26px) scale(0.9); }

/* Языковой селектор */
.lang { position: relative; z-index: 120; }
.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--edge);
    transition: border-color .24s var(--ease), background .24s var(--ease), transform .16s var(--spring);
}
.lang-trigger:hover { border-color: var(--line-2); background: var(--glass-2); }
.lang-trigger:active { transform: scale(0.96); }
.lang-flag { width: 20px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,0.14); }
.lang-code { letter-spacing: 0.03em; }
.lang-caret { color: var(--ink-3); transition: transform .3s var(--spring); }
.lang.open .lang-caret { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 130;
    width: 216px;
    max-height: min(64vh, 400px);
    overflow-y: auto;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    backdrop-filter: blur(26px) saturate(140%);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--sheet);
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    pointer-events: none;
    transition: opacity .22s var(--ease), transform .3s var(--spring);
}
.lang.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 11px;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .16s var(--ease), color .16s var(--ease);
}
.lang-option .fi { width: 21px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); flex-shrink: 0; }
.lang-option:hover { background: var(--fill-2); color: var(--ink); }
.lang-option.active { background: rgba(138,140,255,0.14); color: var(--ink); }

/* ── Основная сетка ────────────────────────────────────────── */
.shell {
    flex: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
    align-content: center;
    gap: clamp(28px, 6vw, 96px);
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 0 32px;
}

/* ═══ Левая колонка ════════════════════════════════════════ */
.lede {
    display: flex;
    flex-direction: column;
    gap: 30px;
    animation: fadeUp .8s var(--spring) both;
}

/* Сейф-орбита */
.vault {
    position: relative;
    width: 132px;
    height: 132px;
}
.vault-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--line-2);
}
.vault-ring--1 { inset: 0; border-color: rgba(138,140,255,0.30); animation: spin 18s linear infinite; border-style: dashed; }
.vault-ring--2 { inset: 16px; border-color: rgba(255,255,255,0.08); animation: spin 26s linear infinite reverse; }
.vault-ring--3 { inset: 30px; border-color: rgba(75,224,168,0.22); animation: spin 14s linear infinite; }
.vault-core {
    position: absolute;
    inset: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--iris-hi);
    background: radial-gradient(120% 120% at 30% 20%, rgba(138,140,255,0.30), rgba(138,140,255,0.05));
    border: 1px solid var(--line-2);
    box-shadow: var(--edge), 0 0 40px -6px var(--iris-glow);
}
.vault-sat {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin: -4.5px;
}
.vault-sat--a { background: var(--iris); box-shadow: 0 0 12px var(--iris-glow); animation: orbit 18s linear infinite; }
.vault-sat--b { background: var(--mint); box-shadow: 0 0 12px rgba(75,224,168,0.6); animation: orbit 14s linear infinite; animation-delay: -7s; }
@keyframes orbit {
    from { transform: rotate(0) translateX(66px) rotate(0); }
    to   { transform: rotate(360deg) translateX(66px) rotate(-360deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.lede-copy { position: relative; display: flex; flex-direction: column; gap: 16px; }
.eyebrow {
    position: absolute;
    left: 0;
    bottom: calc(100% + 14px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 13px 6px 11px;
    background: var(--fill-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 10px var(--mint);
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.lede-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(30px, 8.5vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--ink);
}
.lede-title em {
    font-style: normal;
    background: linear-gradient(100deg, var(--iris-hi), var(--mint));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lede-sub {
    max-width: 46ch;
    font-size: clamp(14px, 1.4vw, 16px);
    color: var(--ink-2);
    line-height: 1.55;
}

.trust { display: flex; flex-direction: column; gap: 12px; }
.trust-row {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-3);
}
.trust-row svg { color: var(--iris); flex-shrink: 0; }
.trust-row:nth-child(1) svg { color: var(--mint); }

/* ═══ Правая консоль ═══════════════════════════════════════ */
.access {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: fadeUp .8s var(--spring) .1s both;
}

/* Двойной безель: внешняя оболочка + внутреннее ядро */
.console {
    position: relative;
    width: 100%;
    max-width: 452px;
    padding: 8px;
    border-radius: 32px;
    background: var(--sheen);
    border: 1px solid var(--line);
    box-shadow: var(--sheet);
}
.console::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(150deg, rgba(138,140,255,0.4), transparent 40%, transparent 65%, rgba(75,224,168,0.25));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}
.console-inner {
    position: relative;
    padding: clamp(17px, 5.5vw, 30px);
    border-radius: clamp(20px, 5vw, 25px);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 32%),
        var(--card);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    box-shadow: var(--edge);
}

/* Индикатор шагов */
.steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.step-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 7px;
    border-radius: 999px;
    background: var(--fill);
    border: 1px solid var(--line);
    transition: background .3s var(--ease), border-color .3s var(--ease);
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    background: var(--fill-2);
    transition: color .3s var(--ease), background .3s var(--ease);
}
.step-dotico { display: grid; place-items: center; color: var(--ink-3); transition: color .3s var(--ease); }
.step-pill.is-on { background: rgba(138,140,255,0.12); border-color: rgba(138,140,255,0.28); }
.step-pill.is-on .step-num { color: #fff; background: var(--iris-deep); }
.step-pill.is-on .step-dotico { color: var(--iris-hi); }
.step-pill.is-done .step-num { color: var(--mint); background: var(--mint-soft); }
.step-pill.is-done .step-dotico { color: var(--mint); }
.step-line {
    position: relative;
    flex: 1;
    height: 2px;
    background: var(--line-2);
    border-radius: 999px;
    overflow: hidden;
}
.step-line::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mint), var(--iris));
    box-shadow: 0 0 14px rgba(123, 127, 242, 0.38);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s var(--spring), opacity .3s var(--ease);
    opacity: 0;
}
.steps.is-progressed .step-line::before {
    transform: scaleX(1);
    opacity: 1;
}
.step-line i { display: none; }

/* Морф-область */
/* Отрицательные боковые поля дают запас под фокус-обводку полей,
   чтобы её не срезал overflow морф-области (ширина не меняется) */
.morph {
    position: relative;
    overflow: hidden;
    min-height: 176px;
    margin: 0 -8px;
    transition: height .6s var(--spring);
}

/* Формы внутри шагов: единый вертикальный ритм */
#licenseForm, #passwordForm { display: flex; flex-direction: column; gap: 16px; }
.step {
    position: absolute;
    top: 0; left: 8px; right: 8px;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    opacity: 0;
    transform: translateY(12px);
    filter: blur(6px);
    pointer-events: none;
    transition: opacity .4s var(--ease), transform .55s var(--spring), filter .4s var(--ease);
}
.step.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.step[hidden] { display: none; }

.step-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(19px, 2.6vw, 22px);
    letter-spacing: -0.022em;
    line-height: 1.2;
    color: var(--ink);
}

/* ── Поля ──────────────────────────────────────────────────── */
.field-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.01em;
}
.field {
    position: relative;
    display: flex;
    align-items: center;
}
.field-ic {
    position: absolute;
    left: 16px;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    pointer-events: none;
    transition: color .25s var(--ease);
}
.field input {
    width: 100%;
    height: clamp(50px, 14vw, 56px);
    padding: 0 16px 0 48px;
    background: var(--fill);
    border: 1px solid var(--line-2);
    border-radius: 16px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    outline: none;
    transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder { color: var(--ink-4); font-weight: 400; }
.field:focus-within .field-ic { color: var(--iris-hi); }
.field input:focus {
    border-color: rgba(138,140,255,0.6);
    background: rgba(138,140,255,0.05);
    box-shadow: 0 0 0 4px rgba(138,140,255,0.13);
}
#licenseInput { letter-spacing: 0.14em; font-weight: 600; font-variant-numeric: tabular-nums; }

.field.valid input { border-color: rgba(75,224,168,0.5); }
.field.valid .field-ic { color: var(--mint); }
.field.invalid input { border-color: rgba(255,107,122,0.5); }
.field.shake { animation: shake .4s var(--ease); }
@keyframes shake {
    10%,90% { transform: translateX(-1px); }
    20%,80% { transform: translateX(2px); }
    30%,50%,70% { transform: translateX(-4px); }
    40%,60% { transform: translateX(4px); }
}

.field-state {
    position: absolute;
    right: 15px;
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--mint-soft);
    box-shadow: inset 0 0 0 1.4px rgba(75, 224, 168, 0.7);
    color: var(--mint);
    font-size: 12px;
    font-weight: 800;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity .25s var(--ease), transform .35s var(--spring);
}
.field.valid .field-state { opacity: 1; transform: none; }
.field.valid .field-state::before { content: "\2713"; }

.field-help {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: -8px;
    padding-left: 2px;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
}
.field-help::before {
    content: "";
    width: 14px; height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ink-4);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
    background: var(--ink-3);
}

/* Глаз пароля */
.field-eye {
    position: absolute;
    right: 8px;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    border-radius: 11px;
    color: var(--ink-3);
    cursor: pointer;
    transition: color .18s var(--ease), background .18s var(--ease), transform .16s var(--spring);
}
.field-eye:hover { color: var(--ink); background: var(--fill-2); }
.field-eye:active { transform: scale(0.88); }
#passwordInput { padding-right: 54px; }

/* ── CTA (button-in-button) ────────────────────────────────── */
/* Кнопка-действие как в приложении Nova: pill, сплошной акцент */
.cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: clamp(48px, 13.5vw, 52px);
    padding: 0 22px;
    border: none;
    border-radius: 999px;
    background: var(--iris);
    color: #fff;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 20px -10px var(--iris-glow);
    transition: background .16s var(--ease), transform .16s var(--spring), opacity .14s var(--ease);
}
.cta:hover:not(:disabled) { background: var(--iris-hi); }
.cta:active:not(:disabled) { transform: scale(0.97); }
.cta:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.cta-label { transition: opacity .18s var(--ease); }
.cta-arrow { transition: opacity .18s var(--ease), transform .25s var(--spring); }
.cta:hover:not(:disabled) .cta-arrow { transform: translateX(3px); }
.cta-spin {
    position: absolute;
    left: 50%; top: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    border: 2.2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: spin .7s linear infinite;
}
.cta.is-loading { pointer-events: none; }
.cta.is-loading .cta-label,
.cta.is-loading .cta-arrow { opacity: 0; }
.cta.is-loading .cta-spin { opacity: 1; }

/* ── Свёрнутая лицензия / кнопка назад ─────────────────────── */
.cred {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    background: var(--mint-soft);
    border: 1px solid rgba(75,224,168,0.28);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: background .2s var(--ease), border-color .2s var(--ease), transform .16s var(--spring);
}
.cred:hover { background: rgba(75,224,168,0.16); }
.cred:active { transform: scale(0.99); }
.cred-ic {
    display: grid; place-items: center;
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 9px;
    /* Тёмная галочка на светлой мяте тёмной темы */
    color: #06070B;
    background: var(--mint);
}
/* В светлой теме мята насыщенно-зелёная (#12B981) — галочка белая */
[data-theme="light"] .cred-ic { color: #fff; }
.cred-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cred-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.cred-value {
    font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cred-back { display: grid; place-items: center; color: var(--ink-3); flex-shrink: 0; transition: transform .2s var(--spring), color .2s var(--ease); }
.cred:hover .cred-back { color: var(--ink); transform: translateX(-2px); }

/* ── Личность брокера ──────────────────────────────────────── */
.identity {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--fill);
    border: 1px solid var(--line);
    border-radius: 18px;
}
.identity-badge {
    align-self: flex-start;
    padding: 5px 11px;
    background: var(--mint-soft);
    border: 1px solid rgba(75,224,168,0.24);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mint);
}
.identity-main { display: flex; align-items: center; gap: 13px; }
.identity-avatar {
    display: grid; place-items: center;
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.02em;
    color: var(--iris-hi);
    background: radial-gradient(120% 120% at 30% 20%, rgba(138,140,255,0.28), rgba(138,140,255,0.06));
    border: 1px solid var(--line-2);
    text-transform: uppercase;
}
.identity-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.identity-name {
    font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.identity-country { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.identity-country svg { color: var(--ink-3); flex-shrink: 0; }
/* Флаг страны брокера (flag-icons) */
.identity-flag {
    flex-shrink: 0;
    width: 19px; height: 14px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 1px 2px rgba(0,0,0,0.35);
}
.identity-flag.identity-flag--globe {
    display: grid; place-items: center;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: none;
    color: var(--ink-3);
    box-shadow: none;
}
.identity-flag.fi { line-height: 14px; }
.identity-verified {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 9px;
    color: var(--mint);
    background: var(--mint-soft);
}

/* Каскад проявления */
.reveal { opacity: 0; }
.step--broker.is-active .reveal {
    animation: revealIn .6s var(--spring) both;
    animation-delay: calc(var(--d) * 90ms + 140ms);
}
@keyframes revealIn {
    from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

.console-foot {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 11px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.005em;
    color: var(--mint);
    background: var(--mint-soft);
    border: 1px solid rgba(75,224,168,0.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.console-foot svg { color: var(--mint); flex-shrink: 0; }
.console-foot::after {
    content: '';
    order: -1;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 8px rgba(75,224,168,0.7);
    animation: pulse 1.8s ease-in-out infinite;
}

/* ═══ Скан безопасности ════════════════════════════════════ */
.scan {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: var(--overlay);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity .35s var(--ease);
}
.scan.is-open { opacity: 1; }
.scan[hidden] { display: none; }

.scan-card {
    width: 100%;
    max-width: 440px;
    max-height: 90dvh;
    overflow-y: auto;
    padding: clamp(24px, 5vw, 34px);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%),
        var(--card-solid);
    border: 1px solid var(--line);
    box-shadow: var(--edge), var(--sheet);
    transform: translateY(26px) scale(0.96);
    filter: blur(8px);
    opacity: 0;
    transition: transform .5s var(--spring), opacity .4s var(--ease), filter .4s var(--ease);
}
.scan.is-open .scan-card { transform: none; opacity: 1; filter: none; }

.scan-stage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }

/* Сканер — минималистичное кольцо прогресса с ровным ядром */
.scanner { position: relative; width: 116px; height: 116px; display: grid; place-items: center; }
.scanner-track {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
}
.scanner-progress { position: absolute; inset: 0; transform: rotate(-90deg); }
.scanner-progress circle { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.sp-bg { stroke: rgba(255,255,255,0.06); }
.sp-bar {
    stroke: var(--iris);
    stroke-dasharray: 327;
    stroke-dashoffset: 327;
    transition: stroke-dashoffset .6s var(--spring), stroke .4s var(--ease);
}
.scanner-core {
    display: grid; place-items: center;
    width: 60px; height: 60px;
    border-radius: 50%;
    color: var(--iris-hi);
    background: rgba(138,140,255,0.08);
    border: 1px solid var(--line-2);
    transition: color .4s var(--ease), background .4s var(--ease);
}
.scanner[data-state="run"] .scanner-core svg { animation: softPulse 1.8s ease-in-out infinite; }
.scanner[data-state="done"] .sp-bar { stroke: var(--rose); stroke-dashoffset: 0; }
.scanner[data-state="done"] .scanner-core {
    color: var(--rose);
    background: rgba(255,107,122,0.1);
}
@keyframes softPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.scan-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.022em; color: var(--ink); }
.scanner ~ .scan-title { margin-top: 4px; }
.scan-sub { font-size: 13px; color: var(--ink-2); line-height: 1.4; }

/* Терминальный лог */
.scan-log {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px;
    border-radius: 16px;
    background: var(--well);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    max-height: 230px;
    overflow-y: auto;
}
.log-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(6px);
    animation: logIn .3s var(--ease) forwards;
}
@keyframes logIn { to { opacity: 1; transform: none; } }
.log-dot {
    flex-shrink: 0;
    margin-top: 5px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ink-4);
}
.log-line[data-status="run"] .log-dot { background: var(--iris); box-shadow: 0 0 8px var(--iris-glow); animation: pulse 1s ease-in-out infinite; }
.log-line[data-status="ok"] .log-dot { background: var(--mint); box-shadow: 0 0 8px rgba(75,224,168,0.6); }
.log-line[data-status="bad"] .log-dot { background: var(--rose); box-shadow: 0 0 8px rgba(255,107,122,0.6); }
.log-text { flex: 1; min-width: 0; color: var(--ink-2); word-break: break-word; }
.log-line[data-status="ok"] .log-text { color: var(--ink); }
.log-line[data-status="bad"] .log-text { color: var(--ink); }
.log-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }
.log-line[data-status="run"] .log-tag { color: var(--iris-hi); }
.log-line[data-status="ok"] .log-tag { color: var(--mint); }
.log-line[data-status="bad"] .log-tag { color: var(--rose); }

/* Вердикт */
.scan-verdict { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; animation: revealIn .5s var(--spring) both; }
.scan-verdict[hidden] { display: none; }
.verdict-row {
    display: flex; align-items: center; gap: 13px;
    padding: 15px;
    background: var(--rose-soft);
    border: 1px solid rgba(255,107,122,0.28);
    border-radius: 16px;
}
.verdict-ic {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 12px;
    color: var(--rose);
    background: rgba(255,107,122,0.16);
}
.verdict-row h3 { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--rose); letter-spacing: -0.015em; }
.verdict-row p { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.35; }
.scan-close {
    width: 100%;
    height: 50px;
    border-radius: 15px;
    border: 1px solid var(--line-2);
    background: var(--fill);
    color: var(--ink);
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    transition: background .2s var(--ease), transform .16s var(--spring);
}
.scan-close:hover { background: var(--fill-2); }
.scan-close:active { transform: scale(0.98); }

/* ═══ Sonner-уведомления (top-center, как в приложении) ═════ */
.sonner {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 18px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: min(420px, calc(100vw - 28px));
    pointer-events: none;
}
.sonner-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 13px 14px;
    background: var(--card-solid);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: var(--edge), 0 12px 30px -14px rgba(0,0,0,0.7);
    transform: translateY(-14px) scale(0.96);
    opacity: 0;
    transition: opacity .28s var(--ease), transform .42s var(--spring);
}
.sonner-toast.is-open { transform: none; opacity: 1; }
.sonner-toast.is-out { transform: translateY(-14px) scale(0.96); opacity: 0; }
.sonner-toast--error { border-color: rgba(255,107,122,0.34); }
.sonner-toast--success { border-color: rgba(75,224,168,0.34); }
.sonner-ic {
    display: grid; place-items: center;
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 9px;
}
.sonner-toast--error .sonner-ic { color: var(--rose); background: var(--rose-soft); }
.sonner-toast--info .sonner-ic { color: var(--iris-hi); background: rgba(138,140,255,0.14); }
.sonner-toast--success .sonner-ic { color: var(--mint); background: var(--mint-soft); }
.sonner-msg { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.4; }

/* ═══ Анимации входа ═══════════════════════════════════════ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ═══ Адаптив ══════════════════════════════════════════════ */
@media (max-width: 940px) {
    .shell { grid-template-columns: 1fr; gap: 30px; justify-items: center; padding-top: 4px; }
    .lede { align-items: center; text-align: center; gap: 22px; max-width: 480px; }
    .eyebrow { position: static; bottom: auto; left: auto; }
    .eyebrow, .identity-badge { align-self: center; }
    .lede-sub { max-width: 40ch; }
    .trust { align-items: center; }
    .vault { width: 108px; height: 108px; }
    .access { width: 100%; }
}

@media (max-width: 560px) {
    .stage { padding-left: clamp(12px, 4vw, 15px); padding-right: clamp(12px, 4vw, 15px); }
    .vault { display: none; }
    .lede { gap: clamp(14px, 4vw, 18px); }
    .console { padding: clamp(5px, 1.6vw, 7px); border-radius: clamp(22px, 6vw, 26px); }
    .sonner { left: 50%; right: auto; width: calc(100vw - 28px); max-width: none; }
}

/* Ландшафт-телефон */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 940px) {
    .lede { display: none; }
    .shell { padding: 0; }
}

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