/* =============================================================================
   BlockScheme
   Main visual system
   ============================================================================= */

:root {
    --bg: #f4f3ee;
    --bg-soft: #efeee8;

    --surface: #fbfaf7;
    --surface-strong: #ffffff;

    --text: #171817;
    --text-soft: #5f625e;
    --text-faint: #8b8e88;

    --line: #d8d7d0;
    --line-strong: #b7b8b1;

    --accent: #222522;
    --accent-soft: #e5e8e3;

    --success: #667763;
    --warning: #9a7e52;
    --danger: #9d5f59;

    --editor-bg: #1b1d1c;
    --editor-text: #eceee9;
    --editor-muted: #7e837d;

    --shadow-small:
        0 6px 20px
        rgba(25, 28, 25, 0.04);

    --shadow-medium:
        0 18px 48px
        rgba(25, 28, 25, 0.07);

    --shadow-large:
        0 28px 80px
        rgba(25, 28, 25, 0.10);

    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 24px;

    --content-width: 1160px;

    --transition:
        180ms ease;
}


/* =============================================================================
   Reset
   ============================================================================= */

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
    scroll-behavior: smooth;
}


body {
    margin: 0;
    min-height: 100vh;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    overflow-x: hidden;
}


button,
textarea,
input {
    font: inherit;
}


button {
    color: inherit;
}


a {
    color: inherit;
    text-decoration: none;
}


::selection {
    background:
        var(--accent);

    color:
        white;
}


/* =============================================================================
   Subtle engineering background
   ============================================================================= */

.page-grid {
    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: -2;

    opacity: 0.45;

    background-image:
        linear-gradient(
            rgba(35, 39, 35, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(35, 39, 35, 0.025) 1px,
            transparent 1px
        );

    background-size:
        32px 32px;
}


.page-grid::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(255, 255, 255, 0.85),
            transparent 38%
        );
}


.page-decoration {
    position: fixed;

    pointer-events: none;

    color:
        var(--text-faint);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 9px;

    letter-spacing:
        0.12em;

    opacity:
        0.52;

    z-index:
        -1;
}


.page-decoration-left {
    left:
        8px;

    top:
        150px;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);
}


/* =============================================================================
   Header
   ============================================================================= */

.site-header {
    position:
        sticky;

    top:
        0;

    z-index:
        30;

    border-bottom:
        1px solid
        rgba(190, 190, 184, 0.65);

    background:
        rgba(244, 243, 238, 0.86);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


.header-inner {
    width:
        min(
            var(--content-width),
            calc(100% - 56px)
        );

    height:
        72px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


/* =============================================================================
   Brand
   ============================================================================= */

.brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    font-size:
        18px;

    font-weight:
        700;

    letter-spacing:
        -0.035em;
}


.brand-icon {
    width:
        34px;

    height:
        34px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;
}


.brand-node {
    display:
        block;

    border:
        1.5px solid
        var(--text);

    background:
        var(--bg);
}


.brand-node-start {
    width:
        18px;

    height:
        8px;

    border-radius:
        20px;
}


.brand-node-process {
    width:
        18px;

    height:
        9px;

    border-radius:
        2px;
}


.brand-line {
    width:
        1.5px;

    height:
        6px;

    background:
        var(--text);
}


.brand-name {
    position:
        relative;
}


.brand-name::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -5px;

    height:
        1px;

    background:
        var(--text);

    opacity:
        0;

    transform:
        scaleX(0.7);

    transition:
        var(--transition);
}


.brand:hover
.brand-name::after {
    opacity:
        0.35;

    transform:
        scaleX(1);
}


/* =============================================================================
   Header nav
   ============================================================================= */

.header-nav {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.login-button {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        40px;

    padding:
        0 14px;

    border:
        1px solid
        var(--line-strong);

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-size:
        13px;

    font-weight:
        600;

    transition:
        var(--transition);
}


.login-button:hover {
    background:
        var(--surface);

    border-color:
        var(--text);

    transform:
        translateY(-1px);
}


.telegram-mark {
    font-size:
        15px;

    transform:
        rotate(-8deg);
}


.user-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        42px;

    padding:
        4px 6px 4px 4px;

    border-radius:
        12px;

    transition:
        var(--transition);
}


.user-link:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.55
        );
}


.user-balance {
    display:
        inline-flex;

    align-items:
        baseline;

    gap:
        3px;

    padding:
        8px 10px;

    background:
        var(--accent);

    color:
        white;

    border-radius:
        9px;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:
        12px;
}


.user-balance-label {
    opacity:
        0.68;

    font-size:
        10px;
}


.user-name {
    font-size:
        13px;

    font-weight:
        600;
}


.user-arrow {
    color:
        var(--text-soft);

    font-size:
        13px;
}


/* =============================================================================
   Main
   ============================================================================= */

.site-main {
    min-height:
        calc(100vh - 144px);
}


/* =============================================================================
   Home
   ============================================================================= */

.home {
    padding:
        72px 0 72px;
}


.home-inner {
    width:
        min(
            var(--content-width),
            calc(100% - 56px)
        );

    margin:
        0 auto;
}


/* =============================================================================
   Hero
   ============================================================================= */

.hero {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        280px;

    gap:
        60px;

    align-items:
        end;

    margin-bottom:
        42px;
}


.hero-copy {
    max-width:
        760px;
}


.hero-label {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        20px;

    color:
        var(--text-soft);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        0.035em;
}


.hero-label-node {
    width:
        12px;

    height:
        7px;

    border:
        1.5px solid
        var(--text-soft);

    border-radius:
        10px;
}


.hero-title {
    margin:
        0;

    font-size:
        clamp(
            52px,
            7vw,
            92px
        );

    line-height:
        0.94;

    letter-spacing:
        -0.075em;

    font-weight:
        720;
}


.hero-title span {
    color:
        var(--text-soft);
}


.hero-description {
    max-width:
        600px;

    margin:
        24px 0 0;

    color:
        var(--text-soft);

    font-size:
        18px;

    line-height:
        1.65;
}


/* =============================================================================
   Hero scheme
   ============================================================================= */

.hero-scheme {
    position:
        relative;

    height:
        180px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    opacity:
        0.92;
}


.scheme-node {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        102px;

    min-height:
        36px;

    padding:
        0 14px;

    border:
        1.25px solid
        var(--line-strong);

    background:
        rgba(
            251,
            250,
            247,
            0.82
        );

    color:
        var(--text-soft);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:
        11px;
}


.scheme-start {
    border-radius:
        24px;
}


.scheme-process {
    border-radius:
        5px;
}


.scheme-result {
    border-radius:
        24px;

    background:
        var(--accent);

    color:
        white;

    border-color:
        var(--accent);
}


.scheme-arrow {
    width:
        1px;

    height:
        19px;

    background:
        var(--line-strong);

    position:
        relative;
}


.scheme-arrow::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    width:
        5px;

    height:
        5px;

    border-right:
        1px solid
        var(--line-strong);

    border-bottom:
        1px solid
        var(--line-strong);

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* =============================================================================
   Editor card
   ============================================================================= */

.editor-card {
    border:
        1px solid
        var(--line-strong);

    border-radius:
        var(--radius-large);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-medium);

    overflow:
        hidden;
}


/* =============================================================================
   Editor header
   ============================================================================= */

.editor-header {
    min-height:
        58px;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        var(--line);

    background:
        rgba(
            247,
            247,
            244,
            0.7
        );
}


.language-switch {
    display:
        flex;

    align-items:
        center;

    gap:
        4px;
}


.language-button {
    min-height:
        34px;

    padding:
        0 12px;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        var(--text-soft);

    font-size:
        13px;

    font-weight:
        650;

    cursor:
        pointer;

    transition:
        var(--transition);
}


.language-button:hover {
    color:
        var(--text);
}


.language-button.active {
    background:
        var(--accent-soft);

    color:
        var(--text);
}


.editor-meta {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--text-faint);

    font-size:
        11px;
}


.editor-meta-label {
    text-transform:
        lowercase;
}


.line-counter {
    min-width:
        66px;

    text-align:
        right;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    color:
        var(--text-soft);
}


.line-divider {
    opacity:
        0.35;

    margin:
        0 3px;
}


/* =============================================================================
   Editor body
   ============================================================================= */

.editor-body {
    display:
        grid;

    grid-template-columns:
        42px 1fr;

    background:
        var(--editor-bg);
}


.editor-gutter {
    padding:
        23px 0 0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        8px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

    color:
        rgba(
            255,
            255,
            255,
            0.20
        );

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:
        9px;

    user-select:
        none;
}


.code-input {
    display:
        block;

    width:
        100%;

    min-height:
        430px;

    padding:
        22px 24px 28px;

    resize:
        vertical;

    border:
        0;

    outline:
        0;

    background:
        var(--editor-bg);

    color:
        var(--editor-text);

    caret-color:
        white;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size:
        14px;

    line-height:
        1.68;

    tab-size:
        4;
}


.code-input::placeholder {
    color:
        var(--editor-muted);
}


.code-input:focus {
    background:
        #181a19;
}


/* =============================================================================
   Editor footer
   ============================================================================= */

.editor-footer {
    min-height:
        80px;

    padding:
        14px 16px 14px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px solid
        var(--line);

    background:
        var(--surface);
}


.generation-info {
    min-width:
        0;
}


.generation-status {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--text);

    font-size:
        13px;
}


.status-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--success);

    box-shadow:
        0 0 0 4px
        rgba(
            102,
            119,
            99,
            0.10
        );
}


.line-status {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--text-faint);

    font-size:
        11px;
}


.generate-button {
    min-width:
        192px;

    min-height:
        50px;

    padding:
        0 18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    border:
        1px solid
        var(--accent);

    border-radius:
        12px;

    background:
        var(--accent);

    color:
        white;

    font-weight:
        650;

    font-size:
        13px;

    cursor:
        pointer;

    transition:
        var(--transition);
}


.generate-button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(
            23,
            24,
            23,
            0.12
        );
}


.generate-button:active {
    transform:
        translateY(0);
}


.generate-button:disabled {
    opacity:
        0.60;

    cursor:
        wait;

    transform:
        none;

    box-shadow:
        none;
}


.generate-button-arrow {
    font-size:
        18px;
}


/* =============================================================================
   Quick info
   ============================================================================= */

.quick-info {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        12px;

    margin-top:
        18px;
}


.quick-info-item {
    min-height:
        92px;

    padding:
        16px;

    display:
        flex;

    gap:
        14px;

    border:
        1px solid
        var(--line);

    border-radius:
        var(--radius-medium);

    background:
        rgba(
            251,
            250,
            247,
            0.58
        );
}


.quick-info-index {
    flex:
        0 0 auto;

    color:
        var(--text-faint);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:
        9px;
}


.quick-info-item div {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        4px;
}


.quick-info-item strong {
    font-size:
        13px;

    font-weight:
        650;
}


.quick-info-item div span {
    color:
        var(--text-soft);

    font-size:
        12px;
}


/* =============================================================================
   Telegram note
   ============================================================================= */

.telegram-note {
    margin-top:
        14px;

    min-height:
        74px;

    padding:
        14px 16px;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        16px;

    border:
        1px solid
        var(--line);

    border-radius:
        var(--radius-medium);

    background:
        rgba(
            255,
            255,
            255,
            0.40
        );
}


.telegram-note-icon {
    width:
        42px;

    height:
        42px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.telegram-note-node {
    width:
        18px;

    height:
        12px;

    border:
        1.25px solid
        var(--text-soft);

    border-radius:
        3px;
}


.telegram-note-line {
    width:
        12px;

    height:
        1px;

    background:
        var(--text-soft);
}


.telegram-note-arrow {
    margin-left:
        1px;

    color:
        var(--text-soft);

    font-size:
        14px;
}


.telegram-note-copy {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.telegram-note-copy strong {
    font-size:
        13px;
}


.telegram-note-copy span {
    color:
        var(--text-soft);

    font-size:
        12px;
}


.telegram-note-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px 10px;

    border-radius:
        9px;

    color:
        var(--text-soft);

    font-size:
        12px;

    font-weight:
        600;

    transition:
        var(--transition);
}


.telegram-note-link:hover {
    color:
        var(--text);

    background:
        var(--accent-soft);
}


/* =============================================================================
   Login modal
   ============================================================================= */

.login-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        100;

    display:
        grid;

    place-items:
        center;

    padding:
        20px;
}


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


.login-modal-backdrop {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    border:
        0;

    background:
        rgba(
            18,
            19,
            18,
            0.42
        );

    backdrop-filter:
        blur(5px);

    cursor:
        default;
}


.login-modal-card {
    position:
        relative;

    z-index:
        1;

    width:
        min(
            440px,
            100%
        );

    padding:
        28px;

    border:
        1px solid
        var(--line-strong);

    border-radius:
        var(--radius-large);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-large);
}


.login-modal-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.login-modal-index {
    color:
        var(--text-faint);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:
        9px;
}


.login-modal-close {
    width:
        32px;

    height:
        32px;

    border:
        0;

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--text-soft);

    font-size:
        22px;

    cursor:
        pointer;

    transition:
        var(--transition);
}


.login-modal-close:hover {
    background:
        var(--bg-soft);

    color:
        var(--text);
}


.login-symbol {
    height:
        84px;

    margin:
        18px 0 8px;

    display:
        flex;

    align-items:
        center;
}


.login-symbol-node {
    width:
        50px;

    height:
        30px;

    border:
        1.5px solid
        var(--text);

    border-radius:
        18px;
}


.login-symbol-node-small {
    width:
        30px;

    height:
        30px;

    border-radius:
        50%;
}


.login-symbol-line {
    width:
        52px;

    height:
        1.5px;

    background:
        var(--text);

    position:
        relative;
}


.login-symbol-line::after {
    content:
        "";

    position:
        absolute;

    right:
        0;

    top:
        50%;

    width:
        6px;

    height:
        6px;

    border-top:
        1.5px solid
        var(--text);

    border-right:
        1.5px solid
        var(--text);

    transform:
        translateY(-50%)
        rotate(45deg);
}


.login-modal-card h2 {
    margin:
        0;

    font-size:
        34px;

    line-height:
        1.05;

    letter-spacing:
        -0.045em;
}


.login-modal-card p {
    margin:
        16px 0 0;

    color:
        var(--text-soft);

    font-size:
        14px;

    line-height:
        1.6;
}


.login-modal-button {
    margin-top:
        24px;

    width:
        100%;

    min-height:
        50px;

    padding:
        0 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-radius:
        12px;

    background:
        var(--accent);

    color:
        white;

    font-size:
        13px;

    font-weight:
        650;

    transition:
        var(--transition);
}


.login-modal-button:hover {
    transform:
        translateY(-1px);
}


.login-modal-cancel {
    display:
        block;

    margin:
        12px auto 0;

    border:
        0;

    background:
        transparent;

    color:
        var(--text-faint);

    font-size:
        12px;

    cursor:
        pointer;
}


/* =============================================================================
   Generation overlay
   ============================================================================= */

.generation-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        90;

    display:
        grid;

    place-items:
        center;

    background:
        rgba(
            244,
            243,
            238,
            0.72
        );

    backdrop-filter:
        blur(6px);
}


.generation-overlay[hidden] {
    display:
        none;
}


.generation-loader {
    min-width:
        320px;

    padding:
        22px 24px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    border:
        1px solid
        var(--line);

    border-radius:
        16px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow-medium);
}


.generation-loader > div:last-child {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.generation-loader strong {
    font-size:
        13px;
}


.generation-loader span {
    color:
        var(--text-soft);

    font-size:
        11px;
}


.generation-loader-scheme {
    width:
        70px;

    display:
        flex;

    align-items:
        center;
}


.loader-node {
    display:
        block;

    flex:
        0 0 auto;

    border:
        1.25px solid
        var(--text);
}


.loader-node-1 {
    width:
        20px;

    height:
        14px;

    border-radius:
        10px;

    animation:
        loaderPulse
        1.3s infinite;
}


.loader-node-2 {
    width:
        18px;

    height:
        18px;

    transform:
        rotate(45deg);

    animation:
        loaderPulse
        1.3s 0.32s infinite;
}


.loader-connector {
    width:
        24px;

    height:
        1px;

    background:
        var(--text);

    transform-origin:
        left center;

    animation:
        loaderLine
        1.3s infinite;
}


@keyframes loaderPulse {
    0%,
    100% {
        opacity:
            0.30;
    }

    50% {
        opacity:
            1;
    }
}


@keyframes loaderLine {
    0% {
        transform:
            scaleX(0);

        opacity:
            0.25;
    }

    50% {
        transform:
            scaleX(1);

        opacity:
            1;
    }

    100% {
        transform:
            scaleX(1);

        opacity:
            0.25;
    }
}


/* =============================================================================
   Account
   ============================================================================= */

.account-page {
    padding:
        52px 0 72px;
}


.account-inner {
    width:
        min(
            980px,
            calc(100% - 56px)
        );

    margin:
        0 auto;
}


.account-back {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--text-soft);

    font-size:
        12px;

    transition:
        var(--transition);
}


.account-back:hover {
    color:
        var(--text);
}


.account-header {
    min-height:
        180px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        36px;

    padding:
        36px 0 30px;
}


.account-label {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        12px;

    color:
        var(--text-soft);

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        0.05em;
}


.account-label-node {
    width:
        10px;

    height:
        6px;

    border:
        1px solid
        var(--text-soft);

    border-radius:
        10px;
}


.account-header h1 {
    margin:
        0;

    font-size:
        clamp(
            44px,
            6vw,
            68px
        );

    line-height:
        0.95;

    letter-spacing:
        -0.06em;
}


.account-username {
    display:
        block;

    margin-top:
        9px;

    color:
        var(--text-faint);

    font-size:
        12px;
}


.account-header-scheme {
    width:
        160px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    opacity:
        0.55;
}


.account-scheme-node {
    width:
        34px;

    height:
        22px;

    border:
        1px solid
        var(--text-soft);

    border-radius:
        4px;
}


.account-scheme-node-end {
    border-radius:
        20px;
}


.account-scheme-line {
    width:
        54px;

    height:
        1px;

    background:
        var(--text-soft);
}


/* =============================================================================
   Account cards
   ============================================================================= */

.account-content {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap:
        14px;
}


.balance-card,
.account-status-card {
    padding:
        24px;

    border:
        1px solid
        var(--line);

    border-radius:
        var(--radius-large);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-small);
}


.card-index {
    color:
        var(--text-faint);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:
        9px;

    letter-spacing:
        0.06em;
}


.balance-value {
    margin:
        40px 0 16px;

    display:
        flex;

    align-items:
        baseline;

    gap:
        12px;
}


.balance-value strong {
    font-size:
        80px;

    line-height:
        0.82;

    letter-spacing:
        -0.075em;
}


.balance-value span {
    color:
        var(--text-soft);

    font-size:
        13px;
}


.balance-description {
    max-width:
        340px;

    min-height:
        42px;

    color:
        var(--text-soft);

    font-size:
        13px;

    line-height:
        1.5;
}


.payment-form {
    margin-top:
        26px;
}


.payment-button {
    width:
        100%;

    min-height:
        54px;

    padding:
        0 16px;

    display:
        grid;

    grid-template-columns:
        1fr auto auto;

    align-items:
        center;

    gap:
        16px;

    border:
        1px solid
        var(--accent);

    border-radius:
        12px;

    background:
        var(--accent);

    color:
        white;

    font-size:
        13px;

    font-weight:
        650;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        var(--transition);
}


.payment-button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 9px 22px
        rgba(
            23,
            24,
            23,
            0.12
        );
}


.payment-price {
    white-space:
        nowrap;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;
}


.payment-arrow {
    font-size:
        18px;
}


.payment-caption {
    margin-top:
        9px;

    color:
        var(--text-faint);

    font-size:
        10px;

    text-align:
        center;
}


/* =============================================================================
   Account status
   ============================================================================= */

.account-status-card {
    display:
        flex;

    flex-direction:
        column;
}


.account-status-row {
    min-height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        var(--line);

    font-size:
        12px;
}


.account-status-row:first-of-type {
    margin-top:
        23px;
}


.account-status-row span {
    color:
        var(--text-soft);
}


.account-status-row strong {
    font-size:
        12px;
}


.status-available {
    color:
        var(--success);
}


.status-used {
    color:
        var(--text-faint);
}


.account-status-note {
    margin-top:
        auto;

    padding-top:
        22px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--text-soft);

    font-size:
        11px;
}


.status-note-icon {
    width:
        27px;

    height:
        27px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        var(--line);

    border-radius:
        8px;

    flex:
        0 0 auto;

    font-size:
        12px;
}


.account-status-note a {
    color:
        var(--text);

    border-bottom:
        1px solid
        var(--line-strong);
}


/* =============================================================================
   Account sections
   ============================================================================= */

.account-section {
    margin-top:
        14px;

    padding:
        24px;

    border:
        1px solid
        var(--line);

    border-radius:
        var(--radius-large);

    background:
        rgba(
            251,
            250,
            247,
            0.70
        );
}


.account-section-header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;
}


.account-section-header h2 {
    margin:
        7px 0 0;

    font-size:
        24px;

    letter-spacing:
        -0.035em;
}


/* =============================================================================
   Statistics
   ============================================================================= */

.statistics-grid {
    margin-top:
        24px;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    overflow:
        hidden;
}


.statistic-item {
    min-height:
        92px;

    padding:
        14px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        var(--line);
}


.statistic-item:last-child {
    border-right:
        0;
}


.statistic-item span {
    color:
        var(--text-faint);

    font-size:
        10px;
}


.statistic-item strong {
    font-size:
        28px;

    letter-spacing:
        -0.04em;
}


/* =============================================================================
   Payments
   ============================================================================= */

.payments-table {
    margin-top:
        22px;

    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    overflow:
        hidden;
}


.payment-table-header,
.payment-table-row {
    min-height:
        48px;

    padding:
        0 14px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr 1fr 1fr;

    align-items:
        center;

    gap:
        12px;

    border-bottom:
        1px solid
        var(--line);
}


.payment-table-header {
    min-height:
        38px;

    color:
        var(--text-faint);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:
        9px;

    background:
        var(--bg-soft);
}


.payment-table-row {
    font-size:
        11px;

    background:
        rgba(
            255,
            255,
            255,
            0.45
        );
}


.payment-table-row:last-child {
    border-bottom:
        0;
}


.payment-id {
    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    color:
        var(--text-soft);
}


.payment-status {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        23px;

    padding:
        0 7px;

    border:
        1px solid
        var(--line);

    border-radius:
        8px;

    color:
        var(--text-soft);

    font-size:
        9px;
}


.payment-status-paid {
    border-color:
        rgba(
            102,
            119,
            99,
            0.40
        );

    color:
        var(--success);
}


.payment-status-pending {
    border-color:
        rgba(
            154,
            126,
            82,
            0.40
        );

    color:
        var(--warning);
}


.payment-status-error {
    border-color:
        rgba(
            157,
            95,
            89,
            0.40
        );

    color:
        var(--danger);
}


/* =============================================================================
   Account footer
   ============================================================================= */

.account-footer {
    margin-top:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.logout-button {
    border:
        0;

    background:
        transparent;

    color:
        var(--text-faint);

    font-size:
        11px;

    cursor:
        pointer;

    padding:
        6px 0;

    border-bottom:
        1px solid
        transparent;

    transition:
        var(--transition);
}


.logout-button:hover {
    color:
        var(--text);

    border-color:
        var(--line-strong);
}


.account-footer-id {
    color:
        var(--text-faint);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:
        9px;
}


/* =============================================================================
   Payment results
   ============================================================================= */

.payment-result-page {
    min-height:
        calc(100vh - 145px);

    display:
        flex;

    align-items:
        center;
}


.payment-result-inner {
    width:
        min(
            680px,
            calc(100% - 56px)
        );

    margin:
        0 auto;

    padding:
        60px 0;
}


.payment-result-symbol {
    height:
        60px;

    display:
        flex;

    align-items:
        center;

    margin-bottom:
        28px;
}


.payment-result-node {
    width:
        42px;

    height:
        28px;

    border:
        1.5px solid
        var(--text);

    border-radius:
        18px;
}


.payment-result-line {
    width:
        46px;

    height:
        1.5px;

    background:
        var(--text);
}


.payment-result-check {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1.5px solid
        var(--text);

    border-radius:
        50%;

    font-size:
        18px;
}


.payment-result-symbol-success
.payment-result-check {
    color:
        var(--success);
}


.payment-result-symbol-fail
.payment-result-check {
    color:
        var(--danger);
}


.payment-result-label {
    margin-bottom:
        12px;

    color:
        var(--text-soft);

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        0.07em;
}


.payment-result-inner h1 {
    margin:
        0;

    font-size:
        clamp(
            42px,
            6vw,
            68px
        );

    line-height:
        0.98;

    letter-spacing:
        -0.06em;
}


.payment-result-description {
    max-width:
        560px;

    margin:
        18px 0 0;

    color:
        var(--text-soft);

    font-size:
        15px;

    line-height:
        1.65;
}


.payment-result-balance {
    margin-top:
        28px;

    padding:
        16px;

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    background:
        var(--surface);
}


.payment-result-balance span {
    color:
        var(--text-soft);

    font-size:
        11px;
}


.payment-result-balance strong {
    margin-left:
        auto;

    font-size:
        30px;

    letter-spacing:
        -0.04em;
}


.payment-result-actions {
    margin-top:
        28px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    flex-wrap:
        wrap;
}


.payment-result-primary {
    min-height:
        48px;

    padding:
        0 16px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    border:
        1px solid
        var(--accent);

    border-radius:
        11px;

    background:
        var(--accent);

    color:
        white;

    font-size:
        12px;

    font-weight:
        650;
}


.payment-result-secondary {
    color:
        var(--text-soft);

    font-size:
        12px;

    border-bottom:
        1px solid
        var(--line);
}


.payment-result-note {
    max-width:
        550px;

    margin-top:
        36px;

    padding-top:
        16px;

    display:
        flex;

    gap:
        12px;

    border-top:
        1px solid
        var(--line);

    color:
        var(--text-faint);

    font-size:
        10px;

    line-height:
        1.55;
}


.payment-result-note-index {
    flex:
        0 0 auto;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;
}


/* =============================================================================
   Footer
   ============================================================================= */

.site-footer {
    border-top:
        1px solid
        var(--line);
}


.footer-inner {
    width:
        min(
            var(--content-width),
            calc(100% - 56px)
        );

    min-height:
        72px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    color:
        var(--text-faint);

    font-size:
        10px;
}


.footer-brand {
    display:
        flex;

    gap:
        8px;

    white-space:
        nowrap;
}


.footer-muted {
    opacity:
        0.65;
}


.footer-line {
    height:
        1px;

    flex:
        1;

    background:
        var(--line);
}


.footer-links {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    white-space:
        nowrap;
}


.footer-links a {
    color:
        var(--text-soft);
}


.footer-links a:hover {
    color:
        var(--text);
}


/* =============================================================================
   Toast
   ============================================================================= */

.global-toast {
    position:
        fixed;

    left:
        50%;

    bottom:
        26px;

    z-index:
        120;

    transform:
        translate(
            -50%,
            18px
        );

    min-width:
        180px;

    max-width:
        min(
            460px,
            calc(100% - 30px)
        );

    padding:
        11px 14px;

    border-radius:
        10px;

    background:
        var(--accent);

    color:
        white;

    box-shadow:
        var(--shadow-medium);

    font-size:
        11px;

    text-align:
        center;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        200ms ease;
}


.global-toast.show {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(
            -50%,
            0
        );
}


/* =============================================================================
   Focus
   ============================================================================= */

a:focus-visible,
button:focus-visible,
textarea:focus-visible {
    outline:
        2px solid
        var(--text);

    outline-offset:
        3px;
}


/* =============================================================================
   Responsive — tablet
   ============================================================================= */

@media (
    max-width: 900px
) {

    .hero {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }


    .hero-scheme {
        display:
            none;
    }


    .quick-info {
        grid-template-columns:
            1fr 1fr;
    }


    .quick-info-item:last-child {
        grid-column:
            1 / -1;
    }


    .account-content {
        grid-template-columns:
            1fr;
    }


    .account-header-scheme {
        display:
            none;
    }


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


    .statistic-item:nth-child(2) {
        border-right:
            0;
    }


    .statistic-item:nth-child(-n + 2) {
        border-bottom:
            1px solid
            var(--line);
    }

}


/* =============================================================================
   Responsive — phone
   ============================================================================= */

@media (
    max-width: 640px
) {

    .page-decoration {
        display:
            none;
    }


    .header-inner,
    .home-inner,
    .account-inner,
    .footer-inner {
        width:
            min(
                100% - 28px,
                var(--content-width)
            );
    }


    .header-inner {
        height:
            64px;
    }


    .brand-name {
        font-size:
            16px;
    }


    .brand-icon {
        width:
            29px;

        height:
            29px;
    }


    .login-button {
        min-height:
            36px;

        padding:
            0 10px;

        font-size:
            11px;
    }


    .telegram-mark {
        display:
            none;
    }


    .user-name {
        display:
            none;
    }


    .user-arrow {
        display:
            none;
    }


    .home {
        padding:
            44px 0 48px;
    }


    .hero {
        margin-bottom:
            28px;
    }


    .hero-title {
        font-size:
            clamp(
                48px,
                15vw,
                70px
            );
    }


    .hero-description {
        font-size:
            15px;
    }


    .editor-card {
        border-radius:
            17px;
    }


    .editor-header {
        min-height:
            52px;

        padding:
            0 12px;
    }


    .editor-body {
        grid-template-columns:
            30px 1fr;
    }


    .editor-gutter {
        font-size:
            8px;
    }


    .code-input {
        min-height:
            360px;

        padding:
            18px 16px 22px;

        font-size:
            13px;
    }


    .editor-footer {
        align-items:
            stretch;

        flex-direction:
            column;

        padding:
            14px;
    }


    .generate-button {
        width:
            100%;
    }


    .quick-info {
        grid-template-columns:
            1fr;
    }


    .quick-info-item:last-child {
        grid-column:
            auto;
    }


    .telegram-note {
        grid-template-columns:
            auto 1fr;
    }


    .telegram-note-link {
        grid-column:
            1 / -1;

        justify-self:
            start;

        margin-left:
            58px;
    }


    .login-modal-card {
        padding:
            22px;
    }


    .login-modal-card h2 {
        font-size:
            30px;
    }


    .generation-loader {
        width:
            calc(100% - 30px);

        min-width:
            0;
    }


    .account-page {
        padding:
            34px 0 52px;
    }


    .account-header {
        min-height:
            150px;

        padding-top:
            30px;
    }


    .balance-card,
    .account-status-card,
    .account-section {
        padding:
            19px;

        border-radius:
            17px;
    }


    .balance-value strong {
        font-size:
            68px;
    }


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


    .payment-table-header {
        display:
            none;
    }


    .payment-table-row {
        grid-template-columns:
            1fr 1fr;

        row-gap:
            8px;

        padding:
            12px 14px;
    }


    .account-footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .payment-result-inner {
        width:
            min(
                100% - 28px,
                680px
            );
    }


    .footer-inner {
        min-height:
            82px;

        align-items:
            flex-start;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            6px;
    }


    .footer-line {
        display:
            none;
    }


    .footer-links {
        flex-wrap:
            wrap;

        white-space:
            normal;
    }

}


/* =============================================================================
   Very small screens
   ============================================================================= */

@media (
    max-width: 390px
) {

    .login-button span:last-child {
        font-size:
            0;
    }


    .login-button span:last-child::after {
        content:
            "Войти";

        font-size:
            11px;
    }


    .hero-title {
        font-size:
            47px;
    }


    .language-button {
        padding:
            0 9px;
    }


    .editor-meta-label {
        display:
            none;
    }

}
/* =============================================================================
   Telegram Login — additional states
   ============================================================================= */

.telegram-login-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.telegram-login-icon {
    width: 24px;
    height: 24px;

    display: inline-grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;

    font-size: 12px;
    line-height: 1;
}

.telegram-login-arrow {
    font-size: 18px;
}

.login-modal-button:disabled {
    opacity: 0.62;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

.telegram-login-status {
    min-height: 18px;
    margin-top: 10px;

    color: var(--text-faint);

    font-size: 11px;
    line-height: 1.45;

    text-align: center;

    transition:
        color var(--transition);
}

.telegram-login-status.error {
    color: var(--danger);
}


/* =============================================================================
   Loading state
   ============================================================================= */

.login-modal-button:disabled
.telegram-login-icon {
    animation:
        telegramLoginPulse
        1.15s ease-in-out
        infinite;
}

@keyframes telegramLoginPulse {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}


/* =============================================================================
   Better modal behaviour on mobile
   ============================================================================= */

@media (
    max-width: 640px
) {

    .login-modal {
        align-items: end;
        padding: 12px;
    }

    .login-modal-card {
        width: 100%;
        max-width: 100%;

        padding: 22px;

        border-radius:
            20px 20px 14px 14px;
    }

    .login-modal-button {
        min-height: 52px;
    }

    .telegram-login-status {
        min-height: 20px;
    }

}