:root {
    color-scheme: dark;
    --mw-bg: #07111d;
    --mw-bg-deep: #050b14;
    --mw-bg-soft: #0d1725;
    --mw-surface: rgba(11, 24, 38, 0.88);
    --mw-surface-strong: #101c2d;
    --mw-surface-soft: rgba(20, 34, 52, 0.78);
    --mw-surface-topbar: rgba(5, 11, 20, 0.72);
    --mw-surface-sidebar: rgba(7, 17, 29, 0.92);
    --mw-surface-card-bg: linear-gradient(180deg, rgba(16, 28, 45, 0.96), rgba(11, 24, 38, 0.92));
    --mw-surface-card-strong-bg: linear-gradient(180deg, rgba(18, 32, 50, 0.98), rgba(12, 26, 40, 0.94));
    --mw-surface-subtle-bg: rgba(255, 255, 255, 0.03);
    --mw-surface-subtle-strong-bg: rgba(255, 255, 255, 0.04);
    --mw-border: rgba(160, 184, 214, 0.16);
    --mw-border-strong: rgba(160, 184, 214, 0.28);
    --mw-text: #f2f6fb;
    --mw-text-muted: #94a7bf;
    --mw-text-soft: #6c7f98;
    --mw-primary: #79c7ff;
    --mw-primary-strong: #4ba9ea;
    --mw-accent: #7df0d4;
    --mw-warm: #ffbe72;
    --mw-danger: #ff7b7b;
    --mw-success: #71efb3;
    --mw-shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
    --mw-shadow-soft: 0 18px 36px rgba(0, 0, 0, 0.22);
    --mw-radius-xl: 28px;
    --mw-radius-lg: 22px;
    --mw-radius-md: 16px;
    --mw-radius-sm: 12px;
    --mw-max-width: 1200px;
    --mw-page-gutter: 32px;
    --mw-page-block-padding: 48px 0 88px;
    --mw-section-gap: 36px;
    --mw-panel-padding: 32px;
    --mw-control-height: 48px;
    --mw-control-height-lg: 52px;
    --mw-control-radius: 16px;
    --mw-button-radius: 999px;
}

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

html {
    scroll-behavior: smooth;
}

body,
.mw-app-body,
.mw-auth-body,
.mw-marketing-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Manrope', sans-serif;
    color: var(--mw-text);
    background: linear-gradient(180deg, var(--mw-bg) 0%, var(--mw-bg-deep) 100%);
}

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

button,
input,
select,
textarea {
    font: inherit;
}

.mw-page-shell,
.mw-marketing-main {
    width: min(var(--mw-max-width), calc(100vw - (var(--mw-page-gutter) * 2)));
    margin: 0 auto;
    padding: var(--mw-page-block-padding);
    flex: 1 0 auto;
}

.mw-page-shell > * + * {
    margin-top: var(--mw-section-gap);
}

.mw-panel-card,
.mw-hero-card,
.mw-state-card,
.mw-cta-panel,
.mw-product-card,
.mw-sidebar-note,
.mw-onboarding-aside-card,
.mw-loading-card,
.mw-auth-card,
.mw-auth-flash,
.mw-auth-locked-email,
.mw-success-container,
.mw-success-icon {
    background: var(--mw-surface-card-bg);
    border: 1px solid var(--mw-border);
    box-shadow: var(--mw-shadow);
}

.mw-panel-card,
.mw-hero-card,
.mw-state-card,
.mw-cta-panel,
.mw-product-card {
    border-radius: var(--mw-radius-xl);
    padding: var(--mw-panel-padding);
}

.mw-status-pill,
.mw-card-label {
    border: 1px solid var(--mw-border);
    background: var(--mw-surface-subtle-bg);
}

.mw-button,
.mw-auth-submit,
.mw-success-btn,
.btn-primary,
.btn-secondary,
.mw-recap-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--mw-control-height-lg);
    padding: 0 20px;
    border-radius: var(--mw-button-radius);
    border: 1px solid transparent;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

.mw-button-primary,
.mw-auth-submit,
.mw-success-btn,
.btn-primary,
.mw-recap-button-primary {
    color: #04111d;
    background: linear-gradient(135deg, #91d4ff, #7df0d4);
    box-shadow: 0 16px 28px rgba(121, 199, 255, 0.24);
}

.mw-button-secondary,
.mw-button-ghost,
.btn-secondary,
.mw-recap-button-secondary {
    color: var(--mw-text);
    background: var(--mw-surface-card-bg);
    border-color: rgba(121, 199, 255, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 22px rgba(0, 0, 0, 0.18);
}

.mw-button-ghost {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(160, 184, 214, 0.16);
}

.mw-button:hover,
.mw-auth-submit:hover,
.mw-success-btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.mw-recap-button:hover {
    transform: none;
}

.mw-field,
.mw-auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mw-field input,
.mw-field select,
.mw-field textarea,
.mw-auth-field input,
.mw-auth-password {
    width: 100%;
    min-height: var(--mw-control-height-lg);
    padding: 0 16px;
    border-radius: var(--mw-control-radius);
    border: 1px solid var(--mw-border);
    background: var(--mw-surface-subtle-bg);
    color: var(--mw-text);
}

.mw-field textarea {
    min-height: 110px;
    padding: 14px 16px;
    resize: vertical;
}

.mw-auth-password input {
    min-height: 0;
    padding: 0 16px;
    border: 0;
    background: transparent;
}

.mw-field input:focus,
.mw-field select:focus,
.mw-field textarea:focus,
.mw-auth-field input:focus,
.mw-auth-password:focus-within {
    outline: none;
    border-color: rgba(138, 212, 255, 0.42);
}

@media (max-width: 720px) {
    :root {
        --mw-page-gutter: 16px;
        --mw-page-block-padding: 28px 0 56px;
        --mw-section-gap: 28px;
        --mw-panel-padding: 24px;
    }
}