/* ============================================================
   Ágil Fiscal — Login
   Estética: Luminous Fiscal Tech (alinhado à og-image)
   ============================================================ */

:root {
    --bg:             #08161A;            /* deep teal-black */
    --bg-grade-1:     #0B1E24;
    --bg-grade-2:     #061113;
    --bg-elev:        #0F2429;            /* card surface */
    --bg-elev-2:      #112D33;
    --ink:            #E6EFF1;            /* primary text */
    --ink-soft:       #B5C5CA;
    --ink-muted:      #7B8E94;
    --muted:          #5B6F76;
    --hairline:       rgba(255, 255, 255, 0.085);
    --hairline-soft:  rgba(255, 255, 255, 0.045);
    --brand:          #05585D;
    --brand-light:    #0A7A7F;
    --accent:         #38E4DE;            /* luminous cyan */
    --accent-bright:  #7BF1EC;
    --accent-soft:    rgba(56, 228, 222, 0.20);
    --accent-glow:    rgba(56, 228, 222, 0.35);
    --accent-faint:   rgba(56, 228, 222, 0.08);
    --error:          #FF8585;
    --error-bg:       rgba(255, 133, 133, 0.10);
    --success:        #5EE6A0;
    --success-bg:     rgba(94, 230, 160, 0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Onest', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
    overflow: hidden;            /* desktop: viewport fixo, sem scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

a { color: inherit; }
input, button, select, textarea { font-family: inherit; }

/* ─── Background atmosphere ──────────────────────────────── */
/* Radial gradients sutis para profundidade — igual à og-image */
.app__atmosphere {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 30%, rgba(10, 122, 127, 0.18), transparent 70%),
        radial-gradient(ellipse 60% 80% at 20% 80%, rgba(56, 228, 222, 0.10), transparent 70%),
        radial-gradient(circle at 50% 50%, var(--bg-grade-1) 0%, var(--bg-grade-2) 100%);
}

.app__grid {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(to right, var(--hairline-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--hairline-soft) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at 60% 40%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 60% 40%, black 0%, transparent 75%);
}

.app__arc {
    position: fixed;
    bottom: -38vw; left: -28vw;
    width: 85vw; height: 85vw;
    border: 1px solid rgba(56, 228, 222, 0.14);
    border-radius: 50%;
    pointer-events: none; z-index: 0;
    box-shadow: 0 0 80px rgba(56, 228, 222, 0.04) inset;
    animation: arc-breathe 24s ease-in-out infinite;
}
.app__arc::after {
    content: '';
    position: absolute; inset: 6%;
    border: 1px solid rgba(56, 228, 222, 0.10);
    border-radius: 50%;
}
.app__arc-2 {
    position: fixed;
    top: -26vw; right: -20vw;
    width: 60vw; height: 60vw;
    border: 1px solid rgba(10, 122, 127, 0.18);
    border-radius: 50%;
    pointer-events: none; z-index: 0;
}
@keyframes arc-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.015); }
}

/* ─── Hero logo (watermark animado de fundo) ─────────────── */
.app__hero-glow {
    position: fixed;
    right: -22vw; top: 50%;
    width: 90vw; height: 90vw;
    max-width: 1100px; max-height: 1100px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle, rgba(56, 228, 222, 0.18) 0%, rgba(56, 228, 222, 0.06) 35%, transparent 65%);
    filter: blur(40px);
    animation: hero-glow-pulse 7s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes hero-glow-pulse {
    0%, 100% { opacity: 0.7; transform: translateY(-50%) scale(1); }
    50%      { opacity: 1.0; transform: translateY(-50%) scale(1.06); }
}

.app__hero-logo {
    position: fixed;
    right: -6vw; top: 50%;
    width: min(62vw, 78vh);
    height: min(62vw, 78vh);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
    background-image: url('/assets/images/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.085;
    filter:
        drop-shadow(0 0 60px rgba(56, 228, 222, 0.45))
        drop-shadow(0 0 140px rgba(56, 228, 222, 0.25));
    animation: hero-breathe 7s ease-in-out infinite;
    will-change: transform, opacity, filter;
}
@keyframes hero-breathe {
    0%, 100% {
        opacity: 0.075;
        transform: translateY(-50%) scale(1);
        filter:
            drop-shadow(0 0 60px rgba(56, 228, 222, 0.40))
            drop-shadow(0 0 140px rgba(56, 228, 222, 0.22));
    }
    50% {
        opacity: 0.115;
        transform: translateY(-50%) scale(1.045);
        filter:
            drop-shadow(0 0 100px rgba(56, 228, 222, 0.65))
            drop-shadow(0 0 220px rgba(56, 228, 222, 0.38));
    }
}
/* Rays sweep effect — raios sutis girando bem devagar atrás do logo */
.app__hero-logo::after {
    content: '';
    position: absolute;
    inset: -10%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(56, 228, 222, 0.08) 25deg, transparent 50deg,
        transparent 90deg, rgba(56, 228, 222, 0.06) 115deg, transparent 140deg,
        transparent 180deg, rgba(56, 228, 222, 0.08) 205deg, transparent 230deg,
        transparent 270deg, rgba(56, 228, 222, 0.05) 295deg, transparent 320deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: hero-rays-rotate 60s linear infinite;
    pointer-events: none;
    z-index: -1;
    filter: blur(20px);
}
@keyframes hero-rays-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Soft grain — quase imperceptível pra dar textura */
body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.55;
    mix-blend-mode: overlay;
}

/* ─── Shell ──────────────────────────────────────────────── */
.app {
    position: relative; z-index: 2;
    height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
}

/* ─── Top bar ────────────────────────────────────────────── */
.app__topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.15rem 3rem;
    border-bottom: 1px solid var(--hairline-soft);
}
.app__brand {
    display: flex; align-items: center; gap: 1rem;
}
.app__brand-logo-wrap {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 8px;
}
.app__brand-logo-wrap::before {
    content: '';
    position: absolute; inset: -18px -24px;
    background: radial-gradient(ellipse, rgba(56, 228, 222, 0.55) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
    filter: blur(14px);
    animation: brand-glow-pulse 3.4s ease-in-out infinite;
}
@keyframes brand-glow-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.1); }
}
.app__brand-logo {
    height: 42px; width: auto; display: block;
    filter:
        drop-shadow(0 0 16px rgba(56, 228, 222, 0.45))
        drop-shadow(0 0 32px rgba(56, 228, 222, 0.18));
    animation: brand-logo-pulse 3.4s ease-in-out infinite;
}
@keyframes brand-logo-pulse {
    0%, 100% { filter: drop-shadow(0 0 16px rgba(56, 228, 222, 0.45)) drop-shadow(0 0 32px rgba(56, 228, 222, 0.18)); }
    50%      { filter: drop-shadow(0 0 22px rgba(56, 228, 222, 0.65)) drop-shadow(0 0 48px rgba(56, 228, 222, 0.30)); }
}
.app__brand-wordmark {
    font-family: 'Newsreader', Georgia, serif;
    font-variation-settings: "opsz" 36;
    font-style: italic;
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1;
}

.app__status {
    display: flex; align-items: center; gap: 0.65rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-muted);
}
.app__status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow), 0 0 0 4px var(--accent-faint);
    animation: status-pulse 2.4s ease-in-out infinite;
}
@keyframes status-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 12px var(--accent-glow), 0 0 0 4px var(--accent-faint); }
    50%      { opacity: 0.6; box-shadow: 0 0 4px var(--accent-soft),  0 0 0 2px var(--accent-faint); }
}

/* ─── Main grid ──────────────────────────────────────────── */
.app__main {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
    gap: 4.5rem;
    max-width: 1320px;
    margin: 0 auto;
    padding: 2rem 3rem;
    width: 100%;
    align-items: center;
    min-height: 0;
    overflow-y: auto;        /* scroll só nessa área se conteúdo passar (ex.: cadastro manual) */
    overscroll-behavior: contain;
}
.app__main::-webkit-scrollbar { width: 6px; }
.app__main::-webkit-scrollbar-track { background: transparent; }
.app__main::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }

/* ─── Manifesto (left) ───────────────────────────────────── */
.manifest {
    position: relative;
    padding-top: 0;
}
.manifest__eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent);
    margin-bottom: 1.25rem;
    display: flex; align-items: center; gap: 1rem;
}
.manifest__eyebrow::before {
    content: '';
    width: 36px; height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

.manifest__headline {
    font-family: 'Newsreader', Georgia, serif;
    font-variation-settings: "opsz" 144;
    font-weight: 400;
    font-size: clamp(2.2rem, 4.6vw, 3.8rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--ink);
}
.manifest__headline em {
    font-style: italic;
    color: var(--accent);
    font-weight: 500;
    text-shadow:
        0 0 24px var(--accent-glow),
        0 0 48px rgba(56, 228, 222, 0.15);
}
.manifest__headline .line {
    display: block;
    overflow: hidden;
}
.manifest__headline .line span {
    display: inline-block;
    transform: translateY(110%);
    animation: line-reveal 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) both;
}
.manifest__headline .line:nth-child(1) span { animation-delay: 0.15s; }
.manifest__headline .line:nth-child(2) span { animation-delay: 0.35s; }
@keyframes line-reveal {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
}

.manifest__bullets {
    margin-top: 2rem;
    list-style: none;
    padding: 0;
    max-width: 540px;
    border-top: 1px solid var(--hairline);
}
.manifest__bullets li {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink-soft);
    font-size: 0.95rem;
    opacity: 0;
    animation: fade-up 0.7s cubic-bezier(0.2, 0.7, 0.1, 1) both;
}
.manifest__bullets li:nth-child(1) { animation-delay: 0.6s; }
.manifest__bullets li:nth-child(2) { animation-delay: 0.72s; }
.manifest__bullets li:nth-child(3) { animation-delay: 0.84s; }
.manifest__bullets li:nth-child(4) { animation-delay: 0.96s; }
.manifest__bullets-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--accent);
    letter-spacing: 0.18em;
    font-feature-settings: "tnum" 1;
}
.manifest__bullets-label {
    font-weight: 500;
    color: var(--ink);
}
.manifest__bullets-text {
    color: var(--ink-muted);
    font-size: 0.88rem;
    margin-top: 0.1rem;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.manifest__signature {
    margin-top: 1.75rem;
    display: flex; align-items: center; gap: 0.75rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted);
    opacity: 0;
    animation: fade-up 0.8s cubic-bezier(0.2, 0.7, 0.1, 1) both;
    animation-delay: 1.15s;
}
.manifest__signature::before {
    content: '※';
    color: var(--accent);
    font-size: 0.95rem;
    letter-spacing: 0;
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

/* ─── Auth card (right) ──────────────────────────────────── */
.auth {
    position: relative;
    background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
    padding: 2.25rem 2.5rem 2rem;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--hairline-soft) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    opacity: 0;
    animation: fade-up 0.8s cubic-bezier(0.2, 0.7, 0.1, 1) both;
    animation-delay: 0.4s;
    overflow: hidden;
}
/* Acento luminoso passando pelo topo do card */
.auth::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}
/* Cantos diagonais decorativos */
.auth::after {
    content: '';
    position: absolute;
    top: 14px; right: 14px;
    width: 22px; height: 22px;
    border-top: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    pointer-events: none;
    opacity: 0.7;
}

.auth__header {
    margin-bottom: 1.5rem;
}
.auth__title {
    font-family: 'Newsreader', serif;
    font-variation-settings: "opsz" 36;
    font-style: italic;
    font-weight: 500;
    font-size: 1.55rem;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.01em;
}
.auth__token {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    display: flex; align-items: center; gap: 0.5rem;
}
.auth__token-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-faint), 0 0 12px var(--accent-glow);
    animation: status-pulse 2.4s ease-in-out infinite;
}

/* Tabs (radio inputs antes do .auth) */
.tabs-state { position: absolute; opacity: 0; pointer-events: none; }
.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1.5rem;
    background: transparent;
    border-bottom: 1px solid var(--hairline);
    position: relative;
}
.tabs__btn {
    text-align: center;
    padding: 0.7rem 0.5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-muted);
    cursor: pointer;
    transition: color 0.25s ease;
    user-select: none;
    position: relative;
    z-index: 1;
    display: block;
}
.tabs__btn:hover { color: var(--ink); }
.tabs__indicator {
    position: absolute;
    bottom: -1px; left: 0;
    width: 50%;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow), 0 0 4px var(--accent);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* === IMPORTANTE: seletores precisam atravessar até dentro do .auth === */
#tab-state-register:checked ~ .auth .tabs .tabs__indicator { transform: translateX(100%); }
#tab-state-login:checked    ~ .auth .tabs .tabs__btn[for="tab-state-login"]    { color: var(--accent); font-weight: 600; }
#tab-state-register:checked ~ .auth .tabs .tabs__btn[for="tab-state-register"] { color: var(--accent); font-weight: 600; }

/* Panels */
.panels { position: relative; }
.panel { display: none; }
#tab-state-login:checked    ~ .auth .panels .panel--login    { display: block; animation: panel-in 0.45s ease-out both; }
#tab-state-register:checked ~ .auth .panels .panel--register { display: block; animation: panel-in 0.45s ease-out both; }
@keyframes panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Alerts ────────────────────────────────────────────── */
.alert {
    position: relative;
    padding: 0.95rem 1.1rem;
    margin-bottom: 1.5rem;
    border-left: 3px solid;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    animation: fade-up 0.4s ease-out both;
}
.alert--error   { border-left-color: var(--error);   color: var(--error);   background: var(--error-bg); }
.alert--success { border-left-color: var(--success); color: var(--success); background: var(--success-bg); }

/* ─── Form fields ───────────────────────────────────────── */
.field { margin-bottom: 1.1rem; position: relative; }
.field__label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-muted);
    margin-bottom: 0.4rem;
}
.field__label .req { color: var(--accent); margin-left: 0.25em; }
.field__input-wrap { position: relative; }

.field__input {
    width: 100%;
    padding: 0.55rem 0 0.5rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--hairline);
    font-family: 'Onest', sans-serif;
    font-size: 1rem;
    color: var(--ink);
    transition: border-color 0.2s ease, color 0.2s ease;
    border-radius: 0;
    outline: none;
}
.field__input::placeholder { color: var(--muted); }
.field__input:hover { border-bottom-color: var(--ink-muted); }
.field__input:focus { border-bottom-color: rgba(56, 228, 222, 0.3); }

.field__input-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow), 0 0 4px var(--accent);
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.field__input-wrap:focus-within::after { width: 100%; }

.field__toggle {
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer;
    color: var(--ink-muted);
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.2s;
}
.field__toggle:hover { color: var(--accent); }
.field__input-wrap--password .field__input { padding-right: 2.5rem; }

/* ─── Submit (luminous stamp) ───────────────────────────── */
.btn-submit {
    width: 100%;
    background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand) 100%);
    color: var(--ink);
    border: 1px solid rgba(56, 228, 222, 0.35);
    padding: 0.9rem 1.5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow:
        0 0 0 1px rgba(56, 228, 222, 0.05),
        0 12px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    display: flex; align-items: center; justify-content: center; gap: 0.85rem;
    margin-top: 0.5rem;
    border-radius: 2px;
}
.btn-submit::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(56, 228, 222, 0.25), transparent);
    transform: translateX(-100%);
    transition: transform 0.7s ease;
}
.btn-submit:hover::before { transform: translateX(100%); }
.btn-submit:hover {
    border-color: var(--accent);
    box-shadow:
        0 0 0 1px var(--accent-glow),
        0 12px 40px rgba(56, 228, 222, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}
.btn-submit:active {
    transform: translateY(0);
    box-shadow:
        0 0 0 1px var(--accent-glow),
        0 6px 18px rgba(56, 228, 222, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-submit.is-loading {
    color: transparent;
    pointer-events: none;
}
.btn-submit.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(230, 239, 241, 0.25);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-arrow {
    font-family: 'Newsreader', serif;
    font-size: 1.1rem;
    line-height: 1;
}

/* ─── Divider ─────────────────────────────────────────── */
.divider {
    display: flex; align-items: center; gap: 1rem;
    margin: 1.25rem 0 1rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted);
}
.divider::before, .divider::after {
    content: ''; flex: 1; height: 1px;
    background: var(--hairline);
}

/* ─── Google button ─────────────────────────────────────── */
.btn-google {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    border: 1px solid var(--hairline);
    text-decoration: none;
    font-family: 'Onest', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    border-radius: 2px;
}
.btn-google:hover {
    border-color: rgba(56, 228, 222, 0.4);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.btn-google:active { transform: translateY(0); }
.btn-google__logo { width: 18px; height: 18px; flex-shrink: 0; }

.btn-google--primary {
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgba(56, 228, 222, 0.12), rgba(56, 228, 222, 0.04));
    border-color: rgba(56, 228, 222, 0.35);
    color: var(--ink);
    font-weight: 600;
    box-shadow:
        0 0 0 1px rgba(56, 228, 222, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.4);
}
.btn-google--primary:hover {
    background: linear-gradient(180deg, rgba(56, 228, 222, 0.18), rgba(56, 228, 222, 0.06));
    border-color: var(--accent);
    box-shadow:
        0 0 0 1px var(--accent-glow),
        0 12px 32px rgba(56, 228, 222, 0.22);
}

/* ─── Register hero ─────────────────────────────────────── */
.register-hero {
    text-align: left;
    margin-bottom: 1.5rem;
}
.register-hero__title {
    font-family: 'Newsreader', serif;
    font-variation-settings: "opsz" 36;
    font-style: italic;
    font-weight: 500;
    font-size: 1.35rem;
    color: var(--ink);
    margin-bottom: 0.45rem;
}
.register-hero__sub {
    font-size: 0.92rem;
    color: var(--ink-muted);
}

.toggle-manual {
    text-align: center;
    margin-top: 1.5rem;
}
.toggle-manual button {
    background: none; border: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.toggle-manual button:hover {
    color: var(--accent);
    border-bottom-color: rgba(56, 228, 222, 0.4);
}

.manual-form { margin-top: 1.5rem; }
.manual-form[hidden] { display: none !important; }

/* ─── Legal microcopy ───────────────────────────────────── */
.legal-microcopy {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--ink-muted);
    line-height: 1.5;
}
.legal-microcopy a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(56, 228, 222, 0.3);
    transition: border-color 0.2s ease;
}
.legal-microcopy a:hover { border-bottom-color: var(--accent); }

/* ─── Marquee ────────────────────────────────────────────── */
.marquee {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    background: rgba(0, 0, 0, 0.25);
    padding: 0.7rem 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    z-index: 2;
}
.marquee__track {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 80s linear infinite;
    gap: 3rem;
    padding-left: 3rem;
}
.marquee__item {
    display: inline-flex; align-items: center; gap: 0.6rem;
}
.marquee__item::after {
    content: '·';
    color: var(--accent);
    opacity: 0.6;
    margin-left: 0.6rem;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ─── Page footer ────────────────────────────────────────── */
.app__footer {
    padding: 0.9rem 3rem;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    z-index: 2;
    position: relative;
}
.app__footer a {
    color: var(--ink-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.app__footer a:hover { color: var(--accent); }
.app__footer-links { display: flex; gap: 2rem; }

/* ─── Autofill fix para fundo escuro ─────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-elev) inset;
    box-shadow: 0 0 0px 1000px var(--bg-elev) inset;
    caret-color: var(--ink);
    transition: background-color 9999s ease-in-out 0s;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
    .app__topbar { padding: 1.5rem 2rem; }
    .app__main { padding: 3.5rem 2rem 5rem; gap: 4rem; grid-template-columns: 1fr 380px; }
    .app__footer { padding: 1.25rem 2rem; }
    .manifest__bullets { max-width: 100%; }
}

@media (max-width: 880px) {
    body { overflow: auto; }    /* mobile: permite scroll */
    .app { height: auto; min-height: 100vh; }
    .app__hero-logo  { width: 100vw; height: 100vw; right: -25vw; opacity: 0.05; }
    .app__hero-glow  { width: 110vw; height: 110vw; right: -30vw; }
    .app__brand-logo { height: 36px; }
    .app__main {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem 3rem;
        gap: 2.5rem;
        align-items: start;
    }
    .manifest { order: 2; padding-top: 0; }
    .manifest__bullets { margin-top: 1.5rem; }
    .manifest__signature { margin-top: 1.5rem; }
    .auth { order: 1; padding: 2rem 1.75rem 1.75rem; }
    .app__footer { flex-direction: column; gap: 0.75rem; padding: 1.25rem; }
}

@media (max-width: 480px) {
    body { font-size: 15px; }
    .app__topbar { padding: 1.25rem 1.25rem; }
    .app__brand-wordmark { display: none; }
    .auth { padding: 2rem 1.5rem; }
    .manifest__headline { font-size: 2.2rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}