:root{
    --bg:#071018;
    --bg-soft:#0b1622;
    --bg-card:rgba(255,255,255,.06);
    --bg-card-2:rgba(255,255,255,.04);
    --stroke:rgba(255,255,255,.10);
    --text:#eef5ff;
    --muted:#99a9c2;
    --primary:#7c5cff;
    --primary-2:#9f88ff;
    --accent:#38d8ff;
    --gold:#f3c96b;
    --danger:#ff6b81;
    --success:#3ddc97;
    --shadow:0 24px 80px rgba(0,0,0,.42);
    --radius:24px;
    --radius-sm:16px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

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

body.auth-body{
    font-family:Inter, Arial, Helvetica, sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 12% 18%, rgba(124,92,255,.18), transparent 24%),
        radial-gradient(circle at 85% 20%, rgba(56,216,255,.12), transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(243,201,107,.08), transparent 28%),
        linear-gradient(180deg, #061018 0%, #09131d 100%);
    overflow-x:hidden;
    position:relative;
}

.auth-body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.05;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.07) 0px,
            rgba(255,255,255,.07) 1px,
            transparent 1px,
            transparent 42px
        );
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.35));
}

.auth-body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1px);
    background-size:28px 28px;
    opacity:.025;
}

.auth-shell{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    position:relative;
}

.auth-glow{
    position:absolute;
    border-radius:999px;
    filter:blur(90px);
    opacity:.34;
    pointer-events:none;
}

.auth-glow.glow-1{
    width:340px;
    height:340px;
    left:-60px;
    top:60px;
    background:rgba(124,92,255,.34);
}

.auth-glow.glow-2{
    width:300px;
    height:300px;
    right:-40px;
    bottom:40px;
    background:rgba(56,216,255,.20);
}

.auth-wrap{
    width:min(1180px, 100%);
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:24px;
    align-items:stretch;
    position:relative;
    z-index:1;
}

.auth-brand,
.auth-card{
    border-radius:32px;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
    overflow:hidden;
    position:relative;
}

.auth-brand{
    padding:42px;
    min-height:680px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.auth-brand::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right, rgba(124,92,255,.18), transparent 34%),
        radial-gradient(circle at bottom left, rgba(243,201,107,.10), transparent 28%);
    pointer-events:none;
}

.brand-top,
.brand-bottom{
    position:relative;
    z-index:1;
}

.brand-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    font-size:12px;
    color:#d7e4f4;
    margin-bottom:20px;
}

.brand-logo{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:26px;
}

.brand-logo-mark{
    width:54px;
    height:54px;
    border-radius:16px;
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:24px;
    color:#fff;
    background:linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow:0 18px 38px rgba(124,92,255,.28);
}

.brand-logo-text strong{
    display:block;
    font-size:22px;
}

.brand-logo-text span{
    display:block;
    font-size:13px;
    color:var(--muted);
    margin-top:3px;
}

.auth-brand h1{
    font-size:clamp(34px, 5vw, 58px);
    line-height:1;
    letter-spacing:-.04em;
    max-width:560px;
}

.auth-brand h1 span{
    background:linear-gradient(135deg, #fff, #d6cbff 55%, #8beaff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.auth-brand p{
    margin-top:18px;
    max-width:560px;
    color:var(--muted);
    font-size:17px;
    line-height:1.75;
}

.book-orbit{
    margin-top:34px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}

.book-chip{
    padding:16px;
    border-radius:20px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    transition:transform .3s ease, border-color .3s ease;
}

.book-chip:hover{
    transform:translateY(-4px);
    border-color:rgba(124,92,255,.35);
}

.book-chip strong{
    display:block;
    font-size:16px;
    margin-bottom:8px;
}

.book-chip span{
    display:block;
    font-size:13px;
    color:var(--muted);
    line-height:1.6;
}

.brand-stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}

.brand-stat{
    padding:18px;
    border-radius:20px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.brand-stat strong{
    display:block;
    font-size:24px;
    margin-bottom:6px;
}

.brand-stat span{
    color:var(--muted);
    font-size:13px;
}

.auth-card{
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:680px;
}

.auth-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left, rgba(56,216,255,.09), transparent 26%);
    pointer-events:none;
}

.auth-card-inner{
    position:relative;
    z-index:1;
    max-width:480px;
    width:100%;
    margin:0 auto;
}

.auth-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(124,92,255,.12);
    border:1px solid rgba(124,92,255,.22);
    color:#d7cfff;
    font-size:12px;
    margin-bottom:16px;
}

.auth-title{
    font-size:36px;
    line-height:1.05;
    letter-spacing:-.03em;
}

.auth-subtitle{
    margin-top:12px;
    color:var(--muted);
    line-height:1.75;
    font-size:15px;
}

.auth-form{
    margin-top:26px;
}

.form-grid{
    display:grid;
    gap:16px;
}

.field{
    display:grid;
    gap:8px;
}

.field label{
    font-size:13px;
    color:#dce7f6;
}

.field-wrap{
    position:relative;
}

.input{
    width:100%;
    height:56px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    color:var(--text);
    padding:0 16px;
    outline:none;
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.input:focus{
    border-color:rgba(124,92,255,.45);
    box-shadow:0 0 0 4px rgba(124,92,255,.12);
    background:rgba(255,255,255,.06);
}

.input::placeholder{
    color:#89a0bd;
}

.password-toggle{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent;
    color:#c7d6eb;
    cursor:pointer;
    padding:8px 10px;
    border-radius:12px;
}

.password-toggle:hover{
    background:rgba(255,255,255,.06);
}

.auth-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}

.check{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:var(--muted);
}

.check input{
    accent-color:var(--primary);
}

.auth-link{
    color:#d8e8ff;
    font-size:14px;
    transition:.25s ease;
}

.auth-link:hover{
    color:#fff;
}

.auth-submit{
    width:100%;
    height:58px;
    margin-top:6px;
    border:none;
    border-radius:18px;
    color:#fff;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow:0 20px 40px rgba(124,92,255,.26);
    transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.auth-submit:hover{
    transform:translateY(-1px);
}

.auth-divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:22px 0;
    color:#90a3be;
    font-size:13px;
}

.auth-divider::before,
.auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(255,255,255,.08);
}

.auth-social{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.social-btn{
    height:54px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    color:#eef5ff;
    font-weight:600;
    cursor:pointer;
    transition:.25s ease;
}

.social-btn:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.16);
}

.auth-foot{
    margin-top:22px;
    text-align:center;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}

.auth-foot a{
    color:#fff;
    text-decoration:none;
}

.auth-mini-note{
    margin-top:16px;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(243,201,107,.08);
    border:1px solid rgba(243,201,107,.18);
    color:#f3dfae;
    font-size:13px;
    line-height:1.6;
}

.fade-up{
    opacity:0;
    transform:translateY(18px);
    animation:fadeUp .7s ease forwards;
}

.fade-up.delay-1{ animation-delay:.08s; }
.fade-up.delay-2{ animation-delay:.16s; }
.fade-up.delay-3{ animation-delay:.24s; }
.fade-up.delay-4{ animation-delay:.32s; }

@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.float-book{
    animation:floatBook 5s ease-in-out infinite;
}

@keyframes floatBook{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
}

@media (max-width: 1080px){
    .auth-wrap{
        grid-template-columns:1fr;
    }

    .auth-brand,
    .auth-card{
        min-height:auto;
    }

    .auth-brand{
        padding:30px;
    }

    .auth-card{
        padding:28px;
    }
}

@media (max-width: 720px){
    .auth-shell{
        padding:16px;
    }

    .auth-brand,
    .auth-card{
        border-radius:24px;
    }

    .auth-brand h1{
        font-size:34px;
    }

    .auth-title{
        font-size:30px;
    }

    .book-orbit,
    .brand-stats,
    .auth-social{
        grid-template-columns:1fr;
    }
}

@media (max-width: 480px){
    .auth-brand,
    .auth-card{
        padding:20px;
    }

    .auth-title{
        font-size:26px;
    }

    .input,
    .auth-submit{
        height:52px;
    }
}
.auth-error-box{
    margin-bottom:16px;
    color:#ffd3d8;
    border-color:rgba(255,107,129,.22);
    background:rgba(255,107,129,.08);
}

.literary-showcase{
    margin-top:32px;
    display:grid;
    gap:22px;
}

.book-stack{
    position:relative;
    height:170px;
    display:flex;
    align-items:flex-end;
    gap:0;
    padding-left:14px;
}

.book{
    position:relative;
    width:86px;
    border-radius:10px 10px 6px 6px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 22px 40px rgba(0,0,0,.28);
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding-bottom:14px;
    transition:transform .25s ease;
}

.book:hover{
    transform:translateY(-4px);
}

.book::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
    pointer-events:none;
}

.book::after{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    top:14px;
    height:1px;
    background:rgba(255,255,255,.18);
    box-shadow:
        0 12px 0 rgba(255,255,255,.06),
        0 24px 0 rgba(255,255,255,.06),
        0 36px 0 rgba(255,255,255,.06);
}

.book-1{
    height:122px;
    background:linear-gradient(180deg, #6f52ff, #3b2c7d);
    transform:rotate(-6deg);
    z-index:1;
}

.book-2{
    height:152px;
    margin-left:-10px;
    background:linear-gradient(180deg, #2e9fff, #173c77);
    transform:rotate(2deg);
    z-index:2;
}

.book-3{
    height:136px;
    margin-left:-10px;
    background:linear-gradient(180deg, #f0c86b, #7d5f1e);
    transform:rotate(6deg);
    z-index:3;
}

.book-spine{
    position:relative;
    z-index:2;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    color:#fff;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.92;
}

.mini-books-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
}

.mini-book-card{
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.mini-cover{
    width:42px;
    height:58px;
    border-radius:8px;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 10px 20px rgba(0,0,0,.20);
}

.cover-purple{
    background:linear-gradient(180deg, #8a6cff, #4530a2);
}

.cover-blue{
    background:linear-gradient(180deg, #48d0ff, #185f87);
}

.cover-gold{
    background:linear-gradient(180deg, #ffd978, #8d6a20);
}

.mini-book-info{
    min-width:0;
}

.mini-book-info strong{
    display:block;
    font-size:14px;
    margin-bottom:4px;
    color:#eef5ff;
}

.mini-book-info span{
    display:block;
    font-size:12px;
    color:var(--muted);
    line-height:1.5;
}

.auth-feature-line{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:8px;
}

.auth-feature-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:#dce7f6;
    font-size:13px;
}

.dot{
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
}

.dot-purple{
    background:#8a6cff;
    box-shadow:0 0 12px rgba(138,108,255,.55);
}

.dot-blue{
    background:#48d0ff;
    box-shadow:0 0 12px rgba(72,208,255,.55);
}

.dot-gold{
    background:#f0c86b;
    box-shadow:0 0 12px rgba(240,200,107,.55);
}

/* lombadas decorativas suaves no fundo */
.auth-brand{
    position:relative;
}

.auth-brand::after{
    content:"";
    position:absolute;
    right:18px;
    bottom:18px;
    width:180px;
    height:220px;
    opacity:.08;
    pointer-events:none;
    background:
        linear-gradient(90deg,
            rgba(255,255,255,.14) 0px, rgba(255,255,255,.14) 12px,
            transparent 12px, transparent 22px,
            rgba(255,255,255,.10) 22px, rgba(255,255,255,.10) 34px,
            transparent 34px, transparent 46px,
            rgba(255,255,255,.12) 46px, rgba(255,255,255,.12) 60px,
            transparent 60px, transparent 72px,
            rgba(255,255,255,.09) 72px, rgba(255,255,255,.09) 86px,
            transparent 86px, transparent 98px,
            rgba(255,255,255,.11) 98px, rgba(255,255,255,.11) 114px,
            transparent 114px, transparent 126px
        );
    border-radius:18px;
}

@media (max-width: 720px){
    .mini-books-grid{
        grid-template-columns:1fr;
    }

    .book-stack{
        height:145px;
    }

    .book{
        width:72px;
    }

    .book-1{ height:108px; }
    .book-2{ height:132px; }
    .book-3{ height:118px; }

    .auth-feature-line{
        flex-direction:column;
        align-items:stretch;
    }
}
/* FUNDO LITERÁRIO */
body.auth-body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.06;

    background:
        linear-gradient(90deg,
            rgba(255,255,255,.12) 0px, rgba(255,255,255,.12) 14px,
            transparent 14px, transparent 28px,

            rgba(255,255,255,.08) 28px, rgba(255,255,255,.08) 40px,
            transparent 40px, transparent 56px,

            rgba(255,255,255,.10) 56px, rgba(255,255,255,.10) 70px,
            transparent 70px, transparent 90px,

            rgba(255,255,255,.07) 90px, rgba(255,255,255,.07) 104px,
            transparent 104px, transparent 120px
        );

    mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.2));
}
body.auth-body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;

    background-image:
        radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);

    background-size:28px 28px;
    opacity:.025;
}
body{
    font-family: 'Inter', sans-serif;
}

/* TÍTULO PRINCIPAL */
.auth-brand h1{
    font-family: 'Playfair Display', serif;
    font-weight:700;
    letter-spacing:-0.02em;
}

/* SUBTÍTULOS */
.auth-title{
    font-family: 'Playfair Display', serif;
    font-weight:600;
}

/* TEXTOS */
.auth-subtitle,
.auth-brand p{
    font-weight:300;
}
.auth-brand h1 span{
    background:linear-gradient(135deg, #ffffff, #cbbdff 40%, #7de3ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.auth-card{
    box-shadow:
        0 0 80px rgba(124,92,255,.12),
        0 24px 80px rgba(0,0,0,.45);
}