:root {
    --font-family: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --page-gutter: 1rem;
    --landing-width: 760px;
    --footer-width: 1280px;
    --header-height: 64px;
    --control-height: 40px;
    --icon-size: 16px;
    --text-sm: 14px;
    --text-sm-line: 20px;
    --text-xs: 12px;
    --text-xs-line: 16px;
    --text-caption: 0.74rem;
    --text-caption-line: 1.35;
    --color-brand: #ffc300;
    --color-brand-hover: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #ffc300;
    --color-brand-pressed: #fab400;
    --color-brand-loading: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), #ffc300;
    --color-brand-strong: #e2ad00;
    --color-text: rgb(10, 10, 10);
    --color-text-muted: rgb(123, 127, 147);
    --color-text-soft: #454a54;
    --color-text-inverse: #ffffff;
    --color-bg: #f3f4f6;
    --color-surface: #ffffff;
    --color-border: #cfd6e2;
    --color-error: #d84c4c;
    --color-error-text: #b42318;
    --color-info-text: #16507f;
    --color-footer-bg: #282828;
    --color-footer-separator: #454545;
    --color-footer-text: #b4b3b3;
    --color-link: #2f9af0;
    --color-success: #7bc47f;
    --color-toast-info: #1aa9f5;
    --color-toast-success: #64c315;
    --color-toast-warning: #ff9f1a;
    --color-toast-error: #ff4d4f;
    --color-toast-loading: #6f6f73;
    --shadow-soft: 0 10px 24px rgba(31, 31, 31, 0.07);
    --shadow-card: 0 12px 28px rgba(16, 24, 40, 0.08);
    --radius-card: 18px;
    --radius-control: 6px;
}

html,
body {
    min-height: 100vh;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-text);
    font-feature-settings: normal;
    font-variation-settings: normal;
    background: #2d2d2f;
}

button,
input {
    font: inherit;
    margin: 0;
}

h1,
h2,
p,
label {
    margin: 0;
}

button {
    border: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

input {
    appearance: none;
    -webkit-appearance: none;
}

.container {
    width: min(1100px, calc(100% - (var(--page-gutter) * 2)));
    margin: 0 auto;
}

.app-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    height: var(--header-height);
    background: var(--color-brand);
    border-bottom: 1px solid rgba(31, 31, 31, 0.08);
}

.app-header__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
    isolation: isolate;
}

.app-header__navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(var(--landing-width), calc(100% - (var(--page-gutter) * 2)));
    height: var(--header-height);
    padding: 0;
    margin: 0 auto;
}

.brand-lockup {
    display: grid;
    align-content: center;
    gap: 2px;
    width: auto;
    min-width: 0;
    height: 100%;
}

.brand-lockup__eyebrow {
    font-size: var(--text-xs);
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-inverse);
    opacity: 1;
}

.brand-lockup__title {
    color: #131416;
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    font-weight: 500;
    letter-spacing: 0;
}

.header-user {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.header-user__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 90px;
    height: 36px;
    padding: 8px 12px;
    border-radius: 6px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #ffc300;
    color: #1d1d1d;
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    font-weight: 500;
}

.header-user__trigger svg {
    width: 18px;
    height: 18px;
}

.header-user__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    padding: 4px 0;
    background: #ffffff;
    border: 1px solid #e4e5e7;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.header-user__menu-item {
    width: 100%;
    padding: 8px 12px;
    color: #1d1d1d;
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    font-weight: 500;
    text-align: left;
}

.header-user__menu-item:hover,
.header-user__menu-item:focus-visible {
    background: #f7f8fa;
}

.page-shell {
    flex: 1 0 auto;
    display: flex;
    align-items: flex-start;
    padding: calc(var(--header-height) + 24px) 0 32px;
    background: radial-gradient(circle at top right, rgba(245, 181, 33, 0.28), transparent 30%),
    linear-gradient(180deg, #fbfbfd 0%, var(--color-bg) 42%, #eef1f5 100%);
}

.landing-shell {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 48px;
}

.flow-shell {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

#reservation-screen.flow-shell {
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.flow-stage {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    width: min(var(--landing-width), 100%);
    margin-top: 16px;
}

.flow-stage.flow-stage--no-progress {
    grid-template-columns: 1fr;
}

.flow-stage__content {
    min-width: 0;
}

.flow-layout {
    display: grid;
    gap: 16px;
    width: 100%;
}

#draft-installations-shell {
    width: min(var(--landing-width), 100%);
}

.registration-progress {
    position: sticky;
    top: calc(var(--header-height) + 20px);
    align-self: start;
}

.registration-progress__list {
    display: grid;
    gap: 12px;
}

.registration-progress__item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 36px;
}

.registration-progress__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 78px;
    min-height: 36px;
    padding: 8px 12px 8px 8px;
    border: 1px solid #64c315;
    border-radius: 24px;
    background: #ffffff;
    isolation: isolate;
}

.registration-progress__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 24px;
    background: #64c315;
    color: #ffffff;
    flex-shrink: 0;
}

.registration-progress__number,
.registration-progress__icon {
    width: 12px;
    height: 12px;
    font-size: 12px;
    line-height: 16px;
}

.registration-progress__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    text-align: center;
}

.registration-progress__icon {
    display: none;
    stroke-width: 2.25;
}

.registration-progress__text {
    color: #18181b;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.registration-progress__connector {
    position: absolute;
    left: 39px;
    width: 1px;
    height: 12px;
    background: #64c315;
}

.registration-progress__connector--top {
    top: -12px;
}

.registration-progress__connector--bottom {
    bottom: -12px;
}

.registration-progress__item:first-child .registration-progress__connector--top,
.registration-progress__item:last-child .registration-progress__connector--bottom {
    display: none;
}

.registration-progress__item[data-progress-state="active"] .registration-progress__pill,
.registration-progress__item[data-progress-state="waiting"] .registration-progress__pill {
    background: #ffffff;
    border-color: #64c315;
}

.registration-progress__item[data-progress-state="active"] .registration-progress__badge,
.registration-progress__item[data-progress-state="waiting"] .registration-progress__badge {
    background: #64c315;
    color: #ffffff;
}

.registration-progress__item[data-progress-state="checking"] .registration-progress__pill,
.registration-progress__item[data-progress-state="done"] .registration-progress__pill {
    background: rgba(100, 195, 21, 0.08);
    border-color: #64c315;
}

.registration-progress__item[data-progress-state="checking"] .registration-progress__badge,
.registration-progress__item[data-progress-state="done"] .registration-progress__badge {
    background: #64c315;
    color: #ffffff;
}

.registration-progress__item[data-progress-state="checking"] .registration-progress__number,
.registration-progress__item[data-progress-state="done"] .registration-progress__number {
    display: none;
}

.registration-progress__item[data-progress-state="checking"] .registration-progress__icon,
.registration-progress__item[data-progress-state="done"] .registration-progress__icon {
    display: block;
}

.registration-progress__item[data-progress-state="next"] .registration-progress__pill {
    background: #ffffff;
    border-color: #c7cedb;
}

.registration-progress__item[data-progress-state="next"] .registration-progress__badge {
    background: #ffffff;
    color: #737b8c;
    border: 1px solid #c7cedb;
}

.registration-progress__item[data-progress-state="next"] .registration-progress__text {
    color: #737b8c;
    font-weight: 400;
}

.registration-progress__item[data-progress-state="next"] .registration-progress__connector {
    background: #c7cedb;
}

.landing-card {
    width: min(var(--landing-width), 100%);
    background: var(--color-surface);
    border: 1px solid rgba(217, 222, 231, 0.9);
    box-shadow: var(--shadow-card);
    padding: 0.9rem 1rem;
    border-radius: 16px;
}

.flow-card {
    display: grid;
    gap: 20px;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid rgba(217, 222, 231, 0.9);
    box-shadow: var(--shadow-card);
    padding: 24px;
    border-radius: 16px;
}

.flow-card h1 {
    color: #1d1d1d;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.flow-card h2 {
    color: #1d1d1d;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
}

.flow-card h3 {
    color: #1d1d1d;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.flow-card__lead {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
}

.flow-section {
    display: grid;
    gap: 16px;
}

.flow-section + .flow-section {
    padding-top: 20px;
    border-top: 1px solid rgba(217, 222, 231, 0.9);
}

.flow-section__header {
    display: grid;
    gap: 8px;
}

.flow-actions {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
}

.flow-actions--end {
    justify-content: flex-end;
}

.setup-callout,
.process-status-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(217, 222, 231, 0.9);
    border-radius: 12px;
    background: #ffffff;
}

.setup-callout--error {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    padding: 16px 20px;
    border-color: rgba(216, 76, 76, 0.26);
    background: rgba(216, 76, 76, 0.05);
}

.setup-callout--error .setup-callout__body,
.setup-callout--error .flow-actions {
    align-self: center;
}

.setup-callout__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #d84c4c;
    flex-shrink: 0;
}

.setup-callout__icon svg {
    width: 24px;
    height: 24px;
}

.completion-note {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid rgba(100, 195, 21, 0.26);
    border-radius: 12px;
    background: rgba(100, 195, 21, 0.06);
}

.completion-note__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #64c315;
    flex-shrink: 0;
}

.completion-note__icon svg {
    width: 24px;
    height: 24px;
}

.completion-note__copy {
    display: grid;
    gap: 4px;
}

.setup-callout__body h3,
.completion-note__copy h3,
.process-status-card__copy h3 {
    margin-top: 0;
    margin-bottom: 0;
}

.setup-callout__body .flow-card__lead,
.completion-note__copy .flow-card__lead,
.process-status-card__copy .flow-card__lead {
    margin: 0;
}

.setup-callout__body,
.process-status-card__copy {
    display: grid;
    gap: 4px;
}

.process-status-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

.process-status-card__progress {
    display: grid;
    gap: 12px;
}

.progress-meter {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

.progress-meter__fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #1aa9f5;
    transition: width 220ms ease, background-color 220ms ease;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 10px;
    border-radius: 9999px;
    color: #ffffff;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge[data-tone="secondary"] {
    background: #171717;
}

.status-badge[data-tone="info"] {
    background: #1aa9f5;
}

.status-badge[data-tone="positive"] {
    background: #64c315;
}

.status-badge[data-tone="destructive"] {
    background: #d84c4c;
}

.store-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.store-qr {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 20px;
    border: 1px solid rgba(217, 222, 231, 0.9);
    border-radius: 12px;
    background: #ffffff;
    color: #1d1d1d;
    text-decoration: none;
}

.store-qr__code {
    display: block;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff url("./img/qr.png") center / contain no-repeat;
    box-shadow: inset 0 0 0 1px rgba(29, 29, 29, 0.12);
}

.store-qr__label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
}

.draft-installations-table {
    border: 1px solid rgba(217, 222, 231, 0.9);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.draft-installations-table__empty {
    margin: 0;
    padding: 20px 16px;
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
}

.draft-installations-table__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.draft-installations-table__table thead tr {
    background: #fafbfc;
}

.draft-installations-table__table th,
.draft-installations-table__table td {
    padding: 14px 16px;
    vertical-align: middle;
}

.draft-installations-table__table th {
    text-align: left;
    color: var(--color-text-soft);
    font-size: var(--text-xs);
    line-height: var(--text-xs-line);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.draft-installations-table__table thead th {
    border-top: 1px solid rgba(217, 222, 231, 0.9);
    border-bottom: 1px solid rgba(217, 222, 231, 0.9);
}

.draft-installations-table__table tbody tr + tr td {
    border-top: 1px solid rgba(217, 222, 231, 0.9);
}

.draft-installations-table__table td {
    color: #1d1d1d;
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    font-weight: 400;
}

.draft-installations-table__action-cell {
    display: flex;
    justify-content: flex-end;
}

.draft-installation-card__action {
    width: auto;
    height: 40px;
    padding: 8px 16px;
    flex-shrink: 0;
}

.reservation-form {
    display: grid;
    gap: 12px;
}

.reservation-form label {
    display: grid;
    gap: 8px;
}

.reservation-form label span {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    line-height: 1;
    font-weight: 500;
}

.reservation-form input,
.register-form input,
.search-select__trigger,
.search-select__search {
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: var(--control-height);
    min-height: var(--control-height);
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    font-weight: 400;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.reservation-form input::placeholder,
.register-form input::placeholder,
.search-select__search::placeholder {
    color: var(--color-text-muted);
}

.reservation-form input:focus,
.register-form input:focus,
.search-select__search:focus,
.search-select__trigger:focus,
.search-select__trigger:focus-visible {
    border-color: var(--color-link);
    box-shadow: 0 0 0 1px rgba(47, 154, 240, 0.22);
}

.reservation-form input.is-invalid,
.reservation-form input[aria-invalid="true"],
.register-form input.is-invalid,
.register-form input[aria-invalid="true"],
#timezone.is-invalid + .search-select__trigger,
#timezone[aria-invalid="true"] + .search-select__trigger,
.search-select__search.is-invalid,
.search-select__search[aria-invalid="true"] {
    border-color: #ff2b20;
    box-shadow: 0 0 0 1px rgba(255, 43, 32, 0.16);
}

.reservation-form input.is-invalid:focus,
.reservation-form input[aria-invalid="true"]:focus,
.register-form input.is-invalid:focus,
.register-form input[aria-invalid="true"]:focus,
#timezone.is-invalid + .search-select__trigger:focus,
#timezone.is-invalid + .search-select__trigger:focus-visible,
#timezone[aria-invalid="true"] + .search-select__trigger:focus-visible,
#timezone[aria-invalid="true"] + .search-select__trigger:focus,
.search-select__search.is-invalid:focus,
.search-select__search[aria-invalid="true"]:focus {
    border-color: #ff2b20;
    box-shadow: 0 0 0 1px rgba(255, 43, 32, 0.2);
}

.reservation-form input:disabled,
.reservation-form input[readonly],
.register-form input:disabled,
.search-select__trigger:disabled,
.search-select__search:disabled {
    background: #f9f9f9;
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.search-select {
    position: relative;
}

.search-select__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--color-text);
}

.search-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-select__trigger svg {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
}

.search-select__popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 8px;
    border: 1px solid #e4e5e7;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.search-select__options {
    display: grid;
    max-height: 220px;
    overflow-y: auto;
}

.search-select__option {
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    text-align: left;
}

.search-select__option:hover,
.search-select__option:focus-visible {
    background: #f7f8fa;
}

.search-select__empty {
    margin: 0;
    color: var(--color-text-soft);
    font-size: var(--text-xs);
    line-height: var(--text-xs-line);
}

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: start;
    gap: 0.92rem;
}

.auth-split__divider {
    align-self: stretch;
    background: rgba(207, 214, 226, 0.95);
}

.auth-panel {
    display: grid;
    gap: 0.3rem;
}

.auth-panel--login {
    align-content: center;
    justify-items: start;
    padding-right: 0.2rem;
}

.auth-panel--register {
    padding-left: 0.2rem;
}

.auth-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: #f3f4f7;
    color: var(--color-text);
}

.auth-panel__icon svg {
    width: 1.08rem;
    height: 1.08rem;
}

.auth-panel h2 {
    margin: 0.16rem 0 0.18rem;
    color: var(--color-text);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    font-weight: 600;
}

.auth-panel__meta {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    font-weight: 400;
    letter-spacing: 0;
}

.section-copy,
.register-form label span,
.form-message {
    color: var(--color-text-muted);
    line-height: var(--text-caption-line);
    font-size: var(--text-caption);
    font-weight: 400;
}

.register-form {
    display: grid;
    gap: 12px;
}

.register-form label {
    display: grid;
    gap: 8px;
}

.register-form label span {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    line-height: 1;
    font-weight: 500;
}

.required-mark {
    color: var(--color-brand-strong);
    font-weight: 700;
}

.landing-button {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: var(--control-height);
    min-height: var(--control-height);
    border-radius: var(--radius-control);
}

.field-error {
    margin: 0;
    color: var(--color-error-text);
    font-size: var(--text-caption);
    line-height: var(--text-caption-line);
}

.landing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    font-weight: 500;
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    color: #1d1d1d;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease,
    box-shadow 120ms ease;
}

.landing-button--primary {
    padding: 8px 16px;
}

.landing-button.contrast {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #1d1d1d;
}

.landing-button.contrast:hover,
.landing-button.contrast:focus-visible {
    background: var(--color-brand-hover);
    border-color: var(--color-brand);
}

.landing-button.contrast:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 195, 0, 0.24);
}

.landing-button.contrast:active,
.landing-button.contrast.is-pressed,
.landing-button.contrast[aria-pressed="true"] {
    background: var(--color-brand-pressed);
    border-color: var(--color-brand-pressed);
}

.landing-button.contrast.is-loading,
.landing-button.contrast[aria-busy="true"] {
    background: var(--color-brand-loading);
    border-color: var(--color-brand);
    color: transparent;
    pointer-events: none;
}

.landing-button.contrast.is-loading > *,
.landing-button.contrast[aria-busy="true"] > * {
    opacity: 0;
}

.landing-button.contrast.is-loading::after,
.landing-button.contrast[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    border: 1.33px solid #1d1d1d;
    border-right-color: transparent;
    border-radius: 999px;
    animation: button-spin 0.8s linear infinite;
}

.landing-button.contrast:disabled,
.landing-button.contrast[disabled],
.landing-button.contrast[aria-disabled="true"] {
    background: var(--color-brand);
    border-color: var(--color-brand);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.landing-button.secondary {
    background: #ffffff;
    border-color: var(--color-border);
    color: var(--color-text);
}

.landing-button.secondary:hover,
.landing-button.secondary:focus-visible {
    background: #f7f8fa;
    border-color: #b9c2d0;
}

.landing-button svg {
    width: var(--icon-size);
    height: var(--icon-size);
}

@keyframes button-spin {
    to {
        transform: rotate(360deg);
    }
}

.form-message {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
}

.form-message[data-state="error"] {
    border-color: rgba(216, 76, 76, 0.28);
    background: rgba(216, 76, 76, 0.08);
    color: var(--color-error-text);
}

.form-message[data-state="info"] {
    border-color: rgba(26, 169, 245, 0.2);
    background: rgba(26, 169, 245, 0.08);
    color: var(--color-info-text);
}

.toast-viewport {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 60;
    display: grid;
    gap: 12px;
    pointer-events: none;
}

.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: min(388px, calc(100vw - 48px));
    min-height: 92px;
    padding: 24px 32px 24px 24px;
    border: 1px solid var(--toast-accent, var(--color-toast-info));
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    pointer-events: auto;
}

.toast__icon-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 16px;
    min-height: 44px;
    flex-shrink: 0;
}

.toast__icon,
.toast__spinner {
    width: 16px;
    height: 16px;
    color: var(--toast-accent, var(--color-toast-info));
    flex-shrink: 0;
}

.toast__spinner {
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: button-spin 0.8s linear infinite;
}

.toast__body {
    display: grid;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.toast__title {
    color: #1d1d1d;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.toast__description {
    color: rgba(29, 29, 29, 0.9);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.toast__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.toast__action {
    width: auto;
    height: 40px;
    padding: 8px 16px;
    border: 1px solid #1d1d1d;
    border-radius: 6px;
    background: transparent;
    color: #1d1d1d;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.toast__close {
    position: absolute;
    top: 16px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: rgba(29, 29, 29, 0.45);
    opacity: 0;
    transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.toast__close svg {
    width: 16px;
    height: 16px;
}

.toast:hover .toast__close,
.toast:focus-within .toast__close {
    opacity: 1;
}

.toast__close:hover,
.toast__close:focus-visible {
    background: #f7f8fa;
    color: rgba(29, 29, 29, 0.72);
}

.toast[data-toast-type="neutral-info"] {
    --toast-accent: var(--color-toast-info);
}

.toast[data-toast-type="success"] {
    --toast-accent: var(--color-toast-success);
}

.toast[data-toast-type="warning"] {
    --toast-accent: var(--color-toast-warning);
}

.toast[data-toast-type="error"] {
    --toast-accent: var(--color-toast-error);
}

.toast[data-toast-type="loading"] {
    --toast-accent: var(--color-toast-loading);
}

.crypto-tool {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 55;
}

.crypto-tool__panel {
    width: min(360px, calc(100vw - 40px));
    padding: 18px;
    border: 1px solid rgba(255, 195, 0, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 42px rgba(16, 24, 40, 0.18);
}

.crypto-tool__header {
    margin-bottom: 14px;
}

.crypto-tool__title {
    color: #171717;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.crypto-tool__form {
    display: grid;
    gap: 14px;
}

.crypto-tool__form label span {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    line-height: 1;
    font-weight: 500;
}

.crypto-tool__result-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.crypto-tool__result-row input {
    min-width: 0;
}

.crypto-tool__copy {
    min-width: 104px;
    width: auto;
}

.app-footer {
    flex-shrink: 0;
    background: var(--color-footer-bg);
}

.app-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: min(var(--footer-width), calc(100% - (var(--page-gutter) * 2)));
    margin: 0 auto;
    padding: 40px 0;
}

.app-footer__top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 30px;
}

.app-footer__brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-footer__brand svg {
    width: 165px;
    height: auto;
}

.app-footer__divider {
    width: 100%;
    height: 1px;
    background: var(--color-footer-separator);
}

.app-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.app-footer__session {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-footer-text);
    font-size: var(--text-xs);
    line-height: var(--text-xs-line);
}

.app-footer__session-label {
    opacity: 0.78;
}

.app-footer__session-value {
    color: #ffffff;
    font-weight: 600;
}

.app-footer__links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-footer__link {
    color: var(--color-footer-text);
    font-size: var(--text-xs);
    line-height: var(--text-xs-line);
    font-weight: 400;
    text-decoration: none;
}

.app-footer__link:hover,
.app-footer__link:focus-visible {
    color: #ffffff;
}

.app-footer__separator {
    width: 1px;
    height: 9px;
    background: var(--color-footer-text);
}

@media (max-width: 960px) {
    .auth-split {
        gap: 0.92rem;
    }
}

@media (max-width: 640px) {
    .flow-stage {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .registration-progress {
        position: static;
    }

    .registration-progress__list {
        gap: 10px;
    }

    .store-links {
        grid-template-columns: 1fr;
    }

    .toast-viewport {
        top: 16px;
        right: 16px;
        left: 16px;
    }

    .toast {
        width: 100%;
        min-height: 0;
        padding: 20px 24px 20px 20px;
    }

    .crypto-tool {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .crypto-tool__panel {
        width: min(360px, calc(100vw - 32px));
    }

    .app-header__navbar {
        width: 100%;
        padding: 0 calc(var(--page-gutter) * 2);
    }

    .brand-lockup {
        gap: 1px;
    }

    .brand-lockup__eyebrow {
        font-size: 11px;
    }

    .brand-lockup__title {
        font-size: 13px;
    }

    .page-shell {
        padding: calc(var(--header-height) + 16px) 0 20px;
    }

    .landing-shell {
        padding-top: 32px;
    }

    .landing-card,
    .flow-card {
        width: 100%;
        padding: 0.78rem;
        border-radius: 12px;
    }

    .header-user {
        margin-left: 12px;
    }

    .header-user__trigger {
        min-width: 0;
        padding: 8px 10px;
        font-size: 13px;
    }

    .auth-split {
        grid-template-columns: 1fr;
        gap: 0.68rem;
    }

    .auth-split__divider {
        width: 100%;
        height: 1px;
    }

    .auth-panel--login,
    .auth-panel--register {
        padding-left: 0;
        padding-right: 0;
    }

    .draft-installations-table {
        overflow-x: auto;
    }

    .draft-installations-table__table {
        min-width: 640px;
    }

    .app-footer__brand svg {
        width: 132px;
    }

    .app-footer__inner {
        gap: 18px;
        width: calc(100% - (var(--page-gutter) * 2));
        padding: 28px 0;
    }

    .app-footer__links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .app-footer__session {
        text-align: center;
    }
}