/* Autotrader 브랜드 테마 — Postmill 소스는 건드리지 않고, nginx가 이 파일을
   <link> 태그로 응답에 주입하는 방식(sub_filter)으로 적용된다.
   Postmill의 CSS 커스텀 프로퍼티(assets/css/themes/_modern.scss,
   _modern-night.scss)를 오버라이드한다 — 같은 selector 구조를 그대로 따라야
   라이트/다크/자동 모드 전환이 계속 정상 동작한다. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap');

:root {
    /* 사이트 전체를 방문자의 night-mode(라이트/다크/자동) 설정과 무관하게
       항상 다크로 고정한다 — 디자인 스펙(design_handoff_autotrader_community/)
       자체가 다크 전용이라 라이트 버전이 없고, 이 프로젝트는 처음부터
       "다크 테마 통일"이 방향이었다. --primary/--primary-alt/--primary-bright/
       --primary-alpha/--link/--notification 6개만 우리 브랜드 오렌지로
       override하고, 나머지 Postmill 자체 다크 팔레트 변수는 Postmill의
       실제 번들 CSS(themes/postmill-classic.*.css)의
       :root[data-night-mode=dark] 블록 값을 그대로 가져왔다 — 하나라도
       빠지면 그 변수를 쓰는 요소만 흰 배경으로 남는 문제가 반복됐기 때문에
       (--card-bg-rgb 등), 이번엔 전체를 빠짐없이 옮겼다. */
    --primary: oklch(0.62 0.19 45);
    --primary-alt: oklch(0.54 0.19 45);
    --primary-bright: oklch(0.74 0.16 45);
    --primary-alpha: oklch(0.62 0.19 45 / 0.4);
    --primary-fg: #fff;
    --link: oklch(0.74 0.16 45);
    --notification: oklch(0.62 0.19 45);

    --accent: #424242;
    --accent-alt: #525252;
    --accent-fg: #fff;
    --bg-page: #0a0d12;
    --bg-content: oklch(0.2 0.012 255);
    --bg-content-rgb: 10, 13, 18;
    --bg-red: #660000;
    --bg-orange: #663500;
    --bg-yellow: #505000;
    --bg-green: #004200;
    --bg-blue: #003666;
    --bg-grey: #424242;
    --text: oklch(0.95 0.004 250);
    --text-muted: oklch(0.6 0.01 255);
    --fg-red: #f00;
    --fg-orange: #fa4;
    --fg-yellow: #ffff80;
    --fg-green: #8f8;
    --fg-blue: #4af;
    --fg-grey: #777;
    --border: oklch(0.28 0.014 255);
    --border-light: oklch(0.245 0.014 255);
    --card-bg-rgb: 20, 24, 31;
    --card-shadow: none;
    --dropdown-card-bg: oklch(0.2 0.012 255);
    --dropdown-card-shadow: 0 0 2px 1px var(--border-light);
    --sidebar-card-bg-rgb: 0, 17, 0;
    --form-bg: oklch(0.175 0.012 255);
    --submission-link: #fff;
    --submission-link-visited: #ffccff;
    --submission-link-sticky: var(--fg-green);

    --at-bg: #0a0d12;
    --at-panel: oklch(0.2 0.012 255);
    --at-panel2: oklch(0.175 0.012 255);
    --at-panel3: oklch(0.16 0.012 255);
    --at-hover: oklch(0.235 0.014 255);
    --at-chip: oklch(0.28 0.014 255);
    --at-border: oklch(0.28 0.014 255);
    --at-border2: oklch(0.245 0.014 255);
    --at-grid: oklch(0.22 0.012 255);
    --at-text: oklch(0.95 0.004 250);
    --at-text2: oklch(0.75 0.01 255);
    --at-muted: oklch(0.6 0.01 255);
    --at-faint: oklch(0.48 0.01 255);
    --at-brand: oklch(0.62 0.19 45);
    --at-brandText: oklch(0.74 0.16 45);
    --at-on-brand: oklch(0.99 0 0);
    --at-up: oklch(0.68 0.2 25);
    --at-down: oklch(0.72 0.14 250);
    --at-green: oklch(0.72 0.17 145);
    --at-shadow: 0 18px 40px oklch(0 0 0 / 0.5);
    --at-radius: 6px;
    --at-font: "IBM Plex Sans KR", system-ui, sans-serif;
    --at-font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --site-nav-bg: oklch(0.16 0.012 255);
}

/* front 페이지에 임베드된 Autotrader 대시보드 iframe — 반드시 클래스로 스타일을
   지정한다. Postmill CSP의 style-src에 sha256 해시가 있어서 inline style
   속성은 hash/nonce 존재 시 unsafe-inline이 무시되어 전부 차단된다. */
.autotrader-embed-frame {
    width: 100%;
    height: calc(100vh - 60px);
    min-height: 600px;
    border: 0;
    border-radius: 0;
    background: var(--bg-content);
    display: block;
}

/* 로그인 상태 front 페이지 — 사이드바 없이 화면 전체 폭으로 iframe을 채운다.
   Postmill 기본 .content-container(max-width:1100px)와 .site-content__body의
   카드 패딩/그림자를 이 컨테이너 안에서만 무효화한다. */
.autotrader-embed-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.autotrader-embed-container .site-content__body {
    padding: 0;
    margin-top: 0;
    background-color: transparent;
    box-shadow: none;
}

/* 상단바 안 드롭다운(관리자 메뉴/알림/사용자 메뉴)의 호버·펼침 배경 —
   전역 --primary-alt(주황)를 바꾸면 다른 페이지 버튼 색까지 영향을 받으므로
   상단바 스코프로만 한정한다. */
.site-nav .dropdown__toggle,
.site-nav .site-nav__mobile-toggle {
    background-color: var(--at-hover);
}

.site-nav__mobile-brand-icon {
    display: none;
}

.site-nav .dropdown-card {
    background: var(--at-panel2);
    border: 1px solid var(--at-border);
}

/* 로그인 상태에서만 보이는 2행 — 트레이딩 데스크 탭(업비트/주식/ML모델/전략관리/설정).
   1행(.site-nav)과 마찬가지로 --at-panel(1행보다 한 단계 밝은 톤)을 배경으로 쓴다. */
.site-nav-trading {
    background: var(--at-panel);
    border-bottom: 1px solid var(--at-border);
}

.site-nav-trading__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 54px;
    padding: 0 1rem;
}

.site-nav-trading__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--at-panel3);
    border: 1px solid var(--at-border);
    border-radius: var(--at-radius);
    padding: 3px;
    font-family: var(--at-font);
}

.site-nav-trading__tab {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 4px;
    color: var(--at-text2);
    cursor: pointer;
}

.site-nav-trading__tab:hover:not(.site-nav-trading__tab--disabled):not(.site-nav-trading__tab--active) {
    background: var(--at-hover);
    color: var(--at-text);
}

.site-nav-trading__tab--active {
    background: var(--at-brand);
    color: var(--at-on-brand);
}

.site-nav-trading__tab--disabled {
    color: var(--at-faint);
    cursor: default;
    font-weight: 400;
}

.site-nav-trading__divider {
    width: 1px;
    height: 18px;
    background: var(--at-border);
    margin: 0 5px;
}

.site-nav-trading__status {
    font-family: var(--at-font-mono);
    font-size: 11.5px;
    color: var(--at-text2);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.site-nav--auth .site-nav__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-nav__auth-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-nav__auth-link {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--at-text2);
    border: 1px solid var(--at-border);
    text-decoration: none;
}

.site-nav__auth-link--primary {
    background: var(--at-brand);
    color: var(--at-on-brand);
    border-color: var(--at-brand);
}

@media (max-width: 900px) {
    .site-nav-trading__container {
        overflow-x: auto;
    }
}

/* 모바일 커뮤니티 셸 — 데스크톱 상단바와 트레이딩 탭은 그대로 둔다. */
.site-nav-mini,
.site-nav-bottombar,
.site-nav-drawer,
.site-nav__mobile-drawer-toggle {
    display: none;
}

.site-nav-mini__track {
    scrollbar-width: none;
}

.site-nav-mini__track::-webkit-scrollbar {
    display: none;
}

.site-nav-drawer {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.site-nav-drawer__panel {
    transform: translateX(100%);
}

@keyframes site-nav-mini-pulse {
    0%, 100% { box-shadow: 0 0 0 0 oklch(0.72 0.17 145 / 0.45); }
    50% { box-shadow: 0 0 0 4px oklch(0.72 0.17 145 / 0); }
}

@media (max-width: 768px) {
    body.overflow {
        overflow: hidden;
    }

    .autotrader-embed-frame {
        height: calc(100vh - 162px);
    }

    .site-nav {
        height: 54px;
    }

    .site-nav__search .site-nav__mobile-toggle {
        background-color: transparent;
    }

    .site-nav__mobile-brand-icon {
        display: inline-block;
        border-radius: 6px;
        margin-right: 4px;
        vertical-align: middle;
    }

    .site-nav__header .site-nav__link svg {
        display: none;
    }

    .site-nav__mobile-drawer-toggle {
        order: 5;
    }

    .site-nav__header .no-mobile {
        display: inline;
        margin-left: 8px;
    }

    .site-nav__container {
        height: 54px;
        min-height: 54px;
        padding: 0 8px 0 12px;
    }

    .site-nav__header,
    .site-nav__header .site-nav__link {
        min-width: 0;
    }

    .site-nav__header .site-nav__link {
        display: flex;
        align-items: center;
        height: 54px;
    }

    .site-nav__header .site-nav__link svg {
        width: 24px;
        height: 24px;
    }

    .site-nav__main-menu-container {
        display: none;
    }

    .site-nav__search {
        margin-left: auto;
        width: 44px;
        flex: 0 0 auto;
    }

    .site-nav__search .site-nav__mobile-toggle,
    .site-nav__user-menu > li:first-child > .site-nav__link,
    .site-nav__mobile-drawer-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .site-nav__user-menu {
        display: flex;
        align-items: center;
        margin: 0;
        flex: 0 0 auto;
        height: 44px;
    }

    .site-nav__user-menu > li:nth-child(2),
    .site-nav__user-menu > li:nth-child(3) {
        display: none;
    }

    .site-nav__user-menu > li:first-child {
        display: block;
    }

    .site-nav__user-menu small {
        position: absolute;
        top: 4px;
        right: 1px;
        min-width: 15px;
        height: 15px;
        padding: 0 3px;
        border-radius: 9px;
        background: var(--at-brand);
        color: var(--at-on-brand);
        font: 10px/15px var(--at-font-mono);
        text-align: center;
    }

    .site-nav__user-menu > li:first-child {
        position: relative;
    }

    .site-nav__mobile-drawer-toggle {
        flex: 0 0 auto;
        border: 0;
        background: transparent;
        color: var(--at-text2);
        cursor: pointer;
    }

    .site-nav__mobile-drawer-toggle svg {
        width: 22px;
        height: 22px;
    }

    .site-nav-trading {
        display: none;
    }

    .site-nav-mini {
        display: flex;
        align-items: center;
        height: 34px;
        gap: 10px;
        padding: 0 12px;
        background: var(--at-panel2);
        border-top: 1px solid var(--at-border);
        color: var(--at-muted);
        font: 10px var(--at-font-mono);
        letter-spacing: .08em;
    }

    .site-nav-mini__live {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
    }

    .site-nav-mini__dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--at-green);
        animation: site-nav-mini-pulse 1.8s ease-in-out infinite;
    }

    .site-nav-mini__track {
        display: flex;
        align-items: center;
        gap: 18px;
        min-width: 0;
        overflow-x: auto;
        mask-image: linear-gradient(90deg, #000 84%, transparent);
        -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent);
    }

    .site-nav-mini__item {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .site-nav-mini__symbol {
        color: var(--at-text2);
        font-weight: 600;
    }

    .site-nav-mini__change--up { color: var(--at-up); }
    .site-nav-mini__change--down { color: var(--at-down); }

    .site-nav-bottombar {
        position: fixed;
        z-index: 30;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        height: 74px;
        padding: 0 8px env(safe-area-inset-bottom);
        background: var(--at-panel3);
        border-top: 1px solid var(--at-border);
    }

    .site-nav-bottombar__tab {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 62px;
        border: 0;
        background: transparent;
        color: var(--at-muted);
        font: 600 11px var(--at-font);
        text-decoration: none;
    }

    .site-nav-bottombar__tab .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        font-size: 18px;
        border: 1.5px solid var(--at-border);
        border-radius: 12px;
        box-sizing: border-box;
        transition: border-color .15s ease, background-color .15s ease;
    }

    .site-nav-bottombar__label {
        line-height: 1;
    }

    .site-nav-bottombar__tab--active,
    .site-nav-bottombar__tab.site-nav-trading__tab--active {
        color: var(--at-brandText);
    }

    .site-nav-bottombar__tab--active .icon,
    .site-nav-bottombar__tab.site-nav-trading__tab--active .icon {
        border-color: var(--at-brand);
        background-color: color-mix(in srgb, var(--at-brand) 14%, transparent);
    }

    .site-content,
    .site-content__body {
        padding-bottom: 74px;
    }

    .site-nav-drawer {
        position: fixed;
        z-index: 50;
        inset: 0;
        display: block;
        transition: opacity .2s ease, visibility .2s ease;
    }

    .site-nav-drawer.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .site-nav-drawer__overlay {
        position: absolute;
        inset: 0;
        background: oklch(0.05 0.01 255 / 0.62);
    }

    .site-nav-drawer__panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(306px, 86vw);
        overflow-y: auto;
        padding: 56px 12px 20px;
        background: var(--at-panel);
        box-shadow: var(--at-shadow);
        transition: transform .2s ease;
    }

    .site-nav-drawer.is-open .site-nav-drawer__panel {
        transform: translateX(0);
    }

    .site-nav-drawer__close {
        position: absolute;
        top: 8px;
        right: 10px;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        color: var(--at-text2);
        font-size: 28px;
        cursor: pointer;
    }

    .site-nav-drawer__user {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 10px 18px;
        color: var(--at-text);
    }

    .site-nav-drawer__avatar {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border-radius: 50%;
        background: var(--at-panel3);
        color: var(--at-brandText);
    }

    .site-nav-drawer__user strong,
    .site-nav-drawer__user small {
        display: block;
    }

    .site-nav-drawer__user small {
        margin-top: 3px;
        color: var(--at-muted);
        font: 11px var(--at-font-mono);
    }

    .site-nav-drawer__group {
        margin: 0 0 18px;
    }

    .site-nav-drawer__group h2 {
        margin: 0 10px 4px;
        color: var(--at-faint);
        font: 10px var(--at-font-mono);
        letter-spacing: .16em;
    }

    .site-nav-drawer__item {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 46px;
        padding: 0 10px;
        border: 0;
        border-radius: var(--at-radius);
        background: transparent;
        color: var(--at-text2);
        font: 500 13px var(--at-font);
        text-align: left;
        text-decoration: none;
    }

    .site-nav-drawer__item:hover,
    .site-nav-drawer__item.site-nav-trading__tab--active {
        background: color-mix(in srgb, var(--at-brand) 12%, transparent);
        color: var(--at-brandText);
    }

    .site-nav-drawer__account {
        margin: 6px 0 0;
        border-top: 1px solid var(--at-border);
        padding-top: 8px;
    }

    .site-nav-drawer__account .menu-item {
        display: flex;
        align-items: center;
        min-height: 42px;
        color: var(--at-text2);
    }

    .site-nav-drawer__auth-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .site-nav-drawer__auth-actions .site-nav__auth-link {
        justify-content: center;
        height: 46px;
    }
}

/* 로그인 화면 2단 레이아웃(design_handoff_autotrader_community/03-login.html 참조).
   좌: 브랜드 패널(배경사진+실시간 시세), 우: 로그인 폼 카드. */
.at-auth {
    display: grid;
    grid-template-columns: 1fr 470px;
    min-height: 560px;
    background: var(--at-bg);
    border: 1px solid var(--at-border);
    border-radius: var(--at-radius);
    overflow: hidden;
    box-shadow: var(--at-shadow);
    margin: 24px auto;
    max-width: 1100px;
    font-family: var(--at-font);
}

.at-auth__mobile-header {
    display: none;
}

.at-auth__brand {
    position: relative;
    padding: 56px 52px;
    background-color: var(--at-panel3);
    background-image:
        linear-gradient(100deg, oklch(0.1 0.02 255 / 0.95) 0 34%, oklch(0.1 0.02 255 / 0.7) 62%, oklch(0.1 0.02 255 / 0.42)),
        image-set(url('/static/img/auth-desk-1600.webp') type('image/webp'),
                  url('/static/img/auth-desk.jpg') type('image/jpeg'));
    background-size: cover, cover;
    background-position: center, center;
    color: var(--at-text);
}

.at-auth__eyebrow {
    font-family: var(--at-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    color: var(--at-brandText);
    margin-bottom: 22px;
}

.at-auth__headline {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    margin: 0 0 14px;
}

.at-auth__lead {
    font-size: 13.5px;
    color: var(--at-text2);
    line-height: 1.8;
    max-width: 380px;
    margin: 0 0 34px;
}

.at-auth__tickers {
    display: grid;
    gap: 10px;
    max-width: 400px;
}

.at-auth__ticker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: var(--at-panel);
    border: 1px solid var(--at-border);
    border-radius: 7px;
    font-family: var(--at-font-mono);
    font-size: 12.5px;
}

.at-auth__ticker-name {
    color: var(--at-text2);
}

.at-auth__ticker-price {
    color: var(--at-text);
}

.at-auth__ticker-change {
    font-size: 11.5px;
    margin-left: 8px;
}

.at-auth__ticker-change--up {
    color: var(--at-up);
}

.at-auth__ticker-change--down {
    color: var(--at-down);
}

.at-auth__panel {
    padding: 56px 48px;
    background: radial-gradient(520px 300px at 100% 0%, oklch(0.62 0.19 45 / 0.06), transparent 70%), var(--at-panel);
    border-left: 1px solid var(--at-border);
    color: var(--at-text);
}

.at-auth__title {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.at-auth__subtitle {
    font-size: 12.5px;
    color: var(--at-muted);
    margin: 0 0 32px;
}

.at-auth__form .form__row {
    position: relative;
}

.at-auth__form .form-control {
    height: 44px;
    background: var(--at-panel2);
    border: 1px solid var(--at-border);
    color: var(--at-text);
    font-family: var(--at-font-mono);
    font-size: 13.5px;
}

.at-auth__submit {
    height: 46px;
    background: var(--at-brand) !important;
    color: var(--at-on-brand) !important;
    font-weight: 600;
    border-radius: var(--at-radius);
}

.at-auth__pw-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--at-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
}

.at-username-field {
    position: relative;
}

.at-username-ok {
    position: absolute;
    right: 12px;
    bottom: 13px;
    font-family: var(--at-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--at-green);
    pointer-events: none;
}

.at-auth__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 30px 0 22px;
    font-family: var(--at-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--at-faint);
}

.at-auth__divider::before,
.at-auth__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--at-border);
}

.at-auth__signup-link {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .at-auth {
        grid-template-columns: 1fr;
        margin: 0;
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }

    .at-auth__brand {
        display: none;
    }

    .at-auth__mobile-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 32px 24px 8px;
        text-align: center;
    }

    .at-auth__mobile-logo {
        border-radius: 12px;
    }

    .at-auth__mobile-tagline {
        margin: 0;
        font-size: 13px;
        color: var(--at-muted);
        max-width: 280px;
    }

    .at-auth__panel {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: calc(100dvh - 140px);
        border-left: 0;
        padding: 24px 20px 32px;
    }

    .at-auth__form .form-control {
        height: 48px;
        font-size: 16px;
    }

    .at-auth__submit {
        height: 52px;
    }
}

/* 가입 화면(design_handoff_autotrader_community/04-registration.html 참조).
   배경 사진+오버레이 위에 카드 하나. 폼 내부(user/_form.html.twig)는 전혀
   건드리지 않고 이 카드 스코프 안에서 Postmill 기본 클래스만 재정의한다. */
.at-signup {
    display: flex;
    justify-content: center;
    padding: 48px 24px 60px;
    margin: -24px -1rem 0;
    background-color: var(--at-bg);
    background-image:
        linear-gradient(180deg, oklch(0.1 0.02 255 / 0.82) 0 45%, oklch(0.1 0.02 255 / 0.94)),
        image-set(url('/static/img/auth-desk-1600.webp') type('image/webp'),
                  url('/static/img/auth-desk.jpg') type('image/jpeg'));
    background-size: cover, cover;
    background-position: center, center top;
}

.at-signup__card {
    width: 100%;
    max-width: 560px;
    background: radial-gradient(460px 260px at 50% 0%, oklch(0.62 0.19 45 / 0.05), transparent 70%), var(--at-panel);
    border: 1px solid var(--at-border);
    border-radius: var(--at-radius);
    padding: 40px 44px 44px;
    box-shadow: var(--at-shadow);
    font-family: var(--at-font);
    color: var(--at-text);
}

.at-signup__back {
    display: none;
}

.at-signup__title {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.at-signup__subtitle {
    font-size: 12.5px;
    color: var(--at-muted);
    margin: 0 0 30px;
}

.at-signup__card .form-control {
    height: 44px;
    background: var(--at-panel2);
    border: 1px solid var(--at-border);
    color: var(--at-text);
    font-family: var(--at-font-mono);
    font-size: 13.5px;
}

.at-signup__card .button {
    height: 46px;
    background: var(--at-brand);
    color: var(--at-on-brand);
    font-weight: 600;
    border-radius: var(--at-radius);
}

@media (max-width: 768px) {
    .at-signup {
        margin: 0;
        padding: 24px 16px;
        background-image: none;
    }

    .at-signup__card {
        border-radius: 0;
        border: 0;
        box-shadow: none;
        padding: 28px 20px;
    }

    .at-signup__back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-bottom: 12px;
        border-radius: 8px;
        color: var(--at-text2);
        font-size: 18px;
        text-decoration: none;
    }

    .at-signup__card .form-control {
        font-size: 16px;
    }

    .at-signup__card .button {
        position: sticky;
        bottom: 0;
        width: 100%;
    }
}