/* ============================================
   Auth Login — Safari Vents Compact
   Prefix: lg-
   ============================================ */

.lg-page {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 1.5rem;
    width: 100%;
}

/* ── Back link ── */
.lg-back {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.6875rem; font-weight: 500; color: #9E8B63;
    text-decoration: none; margin-bottom: 1rem; transition: color 0.15s ease;
}
.lg-back:hover { color: #C87941; }
.lg-back i { font-size: 0.625rem; }

/* ── Card ── */
.lg-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(158,139,99,0.15);
    border-radius: 20px; 
    box-shadow: 0 16px 48px rgba(42,42,42,0.1);
    max-width: 420px; width: 100%; overflow: hidden;
}

/* ── Header ── */
.lg-header {
    text-align: center; 
    padding: 2.5rem 1.5rem 1rem;
}
.lg-logo {
    width: 64px; height: 64px; margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, #aa8f66 0%, #C87941 100%);
    border-radius: 18px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.75rem; box-shadow: 0 8px 24px rgba(200,121,65,0.25);
}
.lg-title { font-size: 1.5rem; font-weight: 800; color: #2A2A2A; margin: 0 0 0.5rem 0; letter-spacing: -0.02em; }
.lg-subtitle { font-size: 0.875rem; color: #8a8177; margin: 0; }

/* ── Body ── */
.lg-body { padding: 1.5rem; }

/* ── Form ── */
.lg-field { margin-bottom: 0.875rem; }
.lg-label { display: block; font-size: 0.625rem; font-weight: 600; color: #5a5450; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.lg-input {
    width: 100%; padding: 0.5rem 0.625rem; font-size: 0.75rem; font-family: inherit;
    border: 1px solid rgba(158,139,99,0.2); border-radius: 8px;
    background: #faf9f7; color: #2A2A2A; outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.lg-input::placeholder { color: #b5a98a; }
.lg-input:focus { border-color: #C87941; box-shadow: 0 0 0 2px rgba(200,121,65,0.1); background: #fff; }

/* ── Options row ── */
.lg-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.lg-check { display: flex; align-items: center; gap: 0.35rem; }
.lg-check input[type="checkbox"] {
    width: 14px; height: 14px; accent-color: #C87941; cursor: pointer; margin: 0;
}
.lg-check-label { font-size: 0.625rem; color: #5a5450; cursor: pointer; }
.lg-forgot { font-size: 0.625rem; font-weight: 600; color: #C87941; text-decoration: none; transition: color 0.15s ease; }
.lg-forgot:hover { color: #a86535; }

/* ── Buttons ── */
.lg-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    width: 100%; font-size: 0.75rem; font-weight: 700; font-family: inherit;
    padding: 0.55rem 1rem; border-radius: 10px; border: none; cursor: pointer;
    transition: all 0.15s ease; text-decoration: none;
}
.lg-btn-primary { background: linear-gradient(135deg, #C87941 0%, #9E8B63 100%); color: #fff; box-shadow: 0 4px 12px rgba(200,121,65,0.2); }
.lg-btn-primary:hover { box-shadow: 0 6px 18px rgba(200,121,65,0.3); transform: translateY(-1px); }
.lg-btn-primary:active { transform: translateY(0); }
.lg-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Spinner ── */
.lg-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: lg-spin 0.6s linear infinite; }
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ── Divider ── */
.lg-divider { display: flex; align-items: center; gap: 0.625rem; margin: 1rem 0; }
.lg-divider::before, .lg-divider::after { content: ''; flex: 1; height: 1px; background: rgba(158,139,99,0.15); }
.lg-divider-text { font-size: 0.5625rem; color: #8a8177; white-space: nowrap; }

/* ── Social ── */
.lg-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.25rem; }
.lg-btn-social {
    display: flex; align-items: center; justify-content: center; gap: 0.375rem;
    padding: 0.45rem 0.625rem; font-size: 0.6875rem; font-weight: 600; font-family: inherit;
    border: 1px solid rgba(158,139,99,0.18); border-radius: 8px;
    background: #faf9f7; color: #5a5450; cursor: pointer;
    transition: all 0.15s ease;
}
.lg-btn-social:hover { background: #fff; border-color: rgba(158,139,99,0.3); color: #2A2A2A; }
.lg-btn-social i { font-size: 0.75rem; }

/* ── Footer link ── */
.lg-footer { text-align: center; font-size: 0.6875rem; color: #8a8177; }
.lg-footer a { color: #C87941; font-weight: 700; text-decoration: none; transition: color 0.15s ease; }
.lg-footer a:hover { color: #a86535; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .lg-page { padding: 1rem; }
    .lg-card { border-radius: 12px; }
    .lg-header { padding: 1.5rem 1rem 1rem; }
    .lg-body { padding: 1rem; }
}