/* Auth design (Design/Login.dc.html) — o mesmo cartão no login e no registo. */
/* Auth design (Design/Login.dc.html) */
    body { background: #2a1636 !important; }
    .auth-shell {
        min-height: 100vh;
        background: #2a1636;
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: #2a1636;
        display: flex;
        align-items: stretch;
        justify-content: center;
        padding: clamp(24px, 4vw, 56px);
    }
    .auth-card {
        width: 100%;
        max-width: 1120px;
        background: #fff3fa;
        border-radius: 30px;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
    }
    .auth-aside {
        background: #2a1636;
        color: #fff3fa;
        padding: clamp(32px, 3.4vw, 48px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: clamp(24px, 4vw, 40px);
    }
    .auth-logo { width: clamp(170px, 17vw, 210px); display: block; }
    .auth-aside-copy { display: flex; flex-direction: column; gap: 16px; }
    .auth-aside-copy h1 { margin: 0; font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(28px, 3.4vw, 40px); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
    .auth-aside-copy p { margin: 0; font-size: 16.5px; line-height: 1.7; color: #e2cfef; text-wrap: pretty; }
    .auth-aside-footer { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(201, 139, 240, .25); padding-top: clamp(20px, 3vw, 26px); }
    .auth-aside-footer > span { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #f2b21b; }
    .auth-aside-footer p { margin: 0; font-size: 15px; line-height: 1.7; color: #c8aedb; text-wrap: pretty; }
    .auth-aside-footer a { color: #fff3fa; font-weight: 700; text-decoration: none; border-bottom: 1px solid #f2b21b; }
    .auth-main { padding: clamp(32px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 2.6vw, 28px); }
    .auth-head { display: flex; flex-direction: column; gap: 10px; }
    .auth-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8126cf; }
    .auth-heading { margin: 0; font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(26px, 3.2vw, 34px); font-weight: 900; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
    .auth-blurb { margin: 0; font-size: 15.5px; line-height: 1.7; color: #5b4a68; text-wrap: pretty; }
    .auth-form { display: flex; flex-direction: column; gap: 18px; }
    .auth-label { display: flex; flex-direction: column; gap: 8px; }
    .auth-label > span { font-size: 13px; font-weight: 800; letter-spacing: .05em; color: #2a1636; }
    .auth-input {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 16px; font-weight: 600; color: #2a1636;
        background: #ffffff;
        border: 1.5px solid #f1e2fb;
        border-radius: 14px;
        padding: 16px 18px; min-height: 44px;
        outline: none; width: 100%; box-sizing: border-box;
    }
    .auth-input::placeholder { color: #a992bb; }
    .auth-input:focus { border-color: #8126cf; }
    .auth-notice { background: #ecfdf3; border: 1px solid #bbf7d0; border-radius: 12px; padding: 13px 16px; font-size: 14.5px; font-weight: 700; line-height: 1.6; color: #166534; }
    .auth-error { background: #fdeef2; border: 1px solid #f6cdd7; border-radius: 12px; padding: 13px 16px; font-size: 14.5px; font-weight: 700; line-height: 1.6; color: #a8244a; }
    .auth-submit {
        background: #f2b21b; border: none; color: #2a1636;
        font-family: 'Be Vietnam Pro', sans-serif; font-size: 17px; font-weight: 900;
        padding: 19px 30px; border-radius: 999px; min-height: 44px;
        cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
        width: 100%;
    }
    .auth-submit:hover { background: #ffc23d; }
    .auth-link-btn { background: none; border: none; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 800; color: #8126cf; cursor: pointer; padding: 4px 0; }
    .auth-link-btn:hover { color: #2a1636; }
    /* ── Código por SMS (migration 365) ────────────────────────────────────── */
    /* As duas saídas do "Didn't get it?" num bloco só: o reenvio por email e, por baixo,
       o mesmo código por SMS (que abre o modal). */
    .auth-resend { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .auth-sms-trigger { display: none; align-items: center; gap: 6px; }
    .auth-sms-trigger .material-symbols-outlined { font-size: 18px; }
    /* Com JS (verify-sms-modal.js põe `sms-modal-ready` no <html>) o formulário só se vê
       a pedido; sem JS fica desenhado em linha dentro da página — o caminho por SMS não
       pode depender de script. */
    .sms-modal-ready .auth-sms-trigger { display: inline-flex; }
    .auth-modal:not([open]) {
        display: block; position: static; inset: auto;
        height: auto; max-height: none; overflow: visible;
        max-width: none; min-width: 0;
        border: 0; padding: 0; margin: 16px 0 0; background: transparent;
    }
    /* Em linha não há nada para fechar — o X só faz sentido no modal. */
    .auth-modal:not([open]) .auth-modal-close { display: none; }
    .auth-modal:not([open]) .auth-modal-card {
        box-shadow: none; border: 1.5px solid #f1e2fb;
    }
    .sms-modal-ready .auth-modal:not([open]) { display: none; }
    /* Centrado à mão: o preflight do Tailwind (`*,:after,:before{margin:0}`) apaga o
       `margin: auto` com que o browser centra um <dialog>, e o modal abria no canto. */
    .auth-modal {
        position: fixed; inset: 0; margin: auto; height: fit-content;
        max-height: calc(100vh - 32px); overflow: auto;
        max-width: min(460px, calc(100vw - 32px)); width: 100%;
        border: none; padding: 0; background: transparent; color: #2a1636;
    }
    .auth-modal::backdrop { background: rgba(42, 22, 54, .62); }
    .auth-modal-card {
        display: flex; flex-direction: column; gap: 16px;
        background: #ffffff; border-radius: 20px; padding: 24px;
        box-shadow: 0 24px 60px rgba(42, 22, 54, .28);
    }
    .auth-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .auth-modal-title {
        margin: 0; display: flex; align-items: center; gap: 8px;
        font-family: 'Be Vietnam Pro', sans-serif; font-size: 20px; font-weight: 900;
        line-height: 1.2; letter-spacing: -.01em;
    }
    .auth-modal-title .material-symbols-outlined { font-size: 22px; color: #8126cf; }
    .auth-modal-blurb { font-size: 14px; }
    .auth-modal-close {
        display: inline-flex; align-items: center; justify-content: center;
        background: none; border: none; border-radius: 999px; cursor: pointer;
        color: #8126cf; padding: 4px; min-width: 32px; min-height: 32px;
    }
    .auth-modal-close:hover { color: #2a1636; }
    .auth-modal-close .material-symbols-outlined { font-size: 22px; }
    @media (prefers-reduced-motion: no-preference) {
        .auth-modal[open] { animation: auth-modal-in .18s ease-out; }
        @keyframes auth-modal-in {
            from { opacity: 0; transform: translateY(10px) scale(.98); }
            to { opacity: 1; transform: none; }
        }
    }
    .auth-phone-row { display: flex; align-items: stretch; gap: 10px; }
    .auth-select {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 14px; font-weight: 600; color: #2a1636;
        background: #ffffff;
        border: 1.5px solid #f1e2fb;
        border-radius: 14px;
        padding: 0 12px; min-height: 44px; max-width: 190px; flex: 0 1 190px;
        outline: none; box-sizing: border-box; cursor: pointer;
    }
    .auth-select:focus { border-color: #8126cf; }
    .auth-phone-row .auth-input { flex: 1 1 auto; min-width: 0; }
    /* Num telemóvel o par não cabe numa linha: o select ficava com 190 px e o número
       era cortado a meio ("11 99999-"). Empilhado, cada campo mostra o que tem de mostrar. */
    @media (max-width: 480px) {
        .auth-phone-row { flex-wrap: wrap; }
        .auth-phone-row .auth-select { flex: 1 1 100%; max-width: none; }
        .auth-phone-row .auth-input { flex: 1 1 100%; }
    }
    /* A ação principal do ecrã é "Confirm my email"; esta é a alternativa, por isso é
       contornada a dourado em vez do preenchimento cheio. */
    .auth-submit-secondary { background: #fff3fa; color: #8126cf; border: 1.5px solid #f2b21b; }
    .auth-submit-secondary:hover { background: #ffe8c4; }
    .auth-locked { border-top: 1px solid #f1e2fb; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
    .auth-locked > span { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8126cf; }
    .auth-locked p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #5b4a68; text-wrap: pretty; }
    .auth-locked a { font-weight: 700; text-decoration: none; border-bottom: 1px solid #f2b21b; }
    @media (max-width: 899px) {
        .auth-shell { padding: 0; }
        .auth-card { max-width: 520px; border-radius: 0; grid-template-columns: 1fr; }
        .auth-aside { padding: 32px 24px 26px; }
        .auth-aside-copy, .auth-aside-footer { display: none; }
        .auth-logo { width: 150px; }
        .auth-main { padding: 28px 24px 36px; }
    }
    /* ── Login social (Google / Apple) ─────────────────────────────────────── */
    .auth-social { display: flex; flex-direction: column; gap: 14px; }
    .auth-divider { display: flex; align-items: center; gap: 14px; }
    .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #f1e2fb; }
    .auth-divider > span { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #a992bb; }
    .auth-social-form { display: flex; flex-direction: column; gap: 10px; }
    /* O acordo com os termos é implícito no toque do botão (os termos estão no rodapé). */
    .auth-social-note { margin: 2px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #a992bb; }
    .auth-social-btn {
        display: flex; align-items: center; justify-content: center; gap: 12px;
        width: 100%; min-height: 48px; padding: 13px 22px;
        font-family: 'Be Vietnam Pro', sans-serif; font-size: 15.5px; font-weight: 800; color: #2a1636;
        background: #ffffff; border: 1.5px solid #f1e2fb; border-radius: 999px;
        cursor: pointer; transition: background .15s ease, box-shadow .15s ease;
    }
    .auth-social-btn:hover:not(:disabled) { background: #fdf6ff; box-shadow: 0 10px 24px rgba(42, 22, 54, .10); }
    .auth-social-btn:disabled { opacity: .5; cursor: not-allowed; }
    .auth-social-btn svg { width: 19px; height: 19px; flex: none; }
    .auth-social-btn-apple { background: #2a1636; border-color: #2a1636; color: #fff3fa; }
    .auth-social-btn-apple:hover:not(:disabled) { background: #3b2149; }
    /* ── Ecrã do código de confirmação (migration 364) ─────────────────────── */
    /* Só uma coluna: não há apresentação para mostrar, só um campo e um botão. */
    .auth-card-single { max-width: 560px; grid-template-columns: 1fr; }
    .auth-logo-inline { width: 150px; margin-bottom: 6px; }
    /* O código lê-se em coluna: dígitos espaçados, centrados e grandes. */
    .auth-code {
        font-family: 'Courier New', Courier, monospace;
        font-size: 26px; font-weight: 700;
        letter-spacing: .5em; text-align: center;
        padding: 18px 12px 18px calc(12px + .5em);
    }
    .auth-hint { margin: 0; font-size: 13px; line-height: 1.6; color: #7a6a87; }
    .auth-inline-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
    .auth-switch {
        display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
        border-top: 1px solid #f1e2fb; padding-top: 18px;
        font-size: 14.5px; color: #5b4a68;
    }