/* =========================================================
   LAYOUT GLOBAL
   - Estrutura base
   - Containers
   - Cards
   - Espaçamentos gerais
========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-main);
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.55), transparent 30%),
        linear-gradient(135deg, var(--bg-main), var(--bg-secondary));
    transition: background 0.30s ease, color 0.30s ease;
}

/* =========================================================
   ÁREA CENTRAL DAS PÁGINAS
========================================================= */
.page-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 32px 16px;
}

/* =========================================================
   CONTAINER DO LOGIN
========================================================= */
.login-shell {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

/* =========================================================
   CARD PRINCIPAL
========================================================= */
.main-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-main);
    backdrop-filter: blur(10px);
    transition: background 0.30s ease, border-color 0.30s ease, box-shadow 0.30s ease;
}

.card-body-custom {
    padding: 30px 28px 26px;
}

/* =========================================================
   RESPONSIVIDADE GLOBAL
========================================================= */
@media (max-width: 767px) {
    .page-wrap {
        padding: 18px 12px;
        align-items: flex-start;
    }

    .main-card {
        border-radius: 20px;
    }

    .card-body-custom {
        padding: 22px 18px 20px;
    }
}