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

:root {
    --navy:   #1A2952;
    --indigo: #2D45A0;
    --sky:    #C8E8F5;
    --mist:   #EAF4FB;
    --gold:   #D4A843;
    --white:  #FFFFFF;
    --ink:    #1A2952;
    --muted:  #6B7A99;
    --line:   #D9E6F0;
}

html, body {
    height: 100%;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.login-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.bg-shape { position: fixed; border-radius: 50%; filter: blur(80px); z-index: 0; pointer-events: none; }
.bg-shape-1 { width:520px;height:520px;background:radial-gradient(circle,#2D45A020 0%,transparent 70%);top:-140px;right:-100px; }
.bg-shape-2 { width:400px;height:400px;background:radial-gradient(circle,#D4A84318 0%,transparent 70%);bottom:-100px;left:-120px; }
.bg-shape-3 { width:300px;height:300px;background:radial-gradient(circle,#C8E8F540 0%,transparent 70%);top:40%;left:10%; }

.login-page-wrap {
    position: relative;
    z-index: 1;
    padding: 40px 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── CARD ── */
.lc-card {
    width: 440px;
    max-width: 100%;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(26,41,82,0.06), 0 12px 40px rgba(26,41,82,0.10);
    overflow: hidden;
}

/* ── HEADER ── */
.lc-card-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--indigo) 100%);
    padding: 32px 40px 44px;
    text-align: center;
    position: relative;
}
.lc-card-header::after {
    content:''; position:absolute; bottom:-1px; left:0; right:0;
    height:24px; background:var(--white); border-radius:20px 20px 0 0;
}
.lc-logo-badge {
    display:inline-flex; align-items:center; justify-content:center;
    width:72px; height:72px;
    background:rgba(255,255,255,0.12); border:2px solid rgba(255,255,255,0.25);
    border-radius:50%; margin-bottom:14px; backdrop-filter:blur(4px);
    overflow: hidden;
}
.lc-logo-badge img {
    width: 100%; height: 100%; object-fit: contain;
    border-radius: 50%;
}
.lc-card-header h1 {
    font-family:'DM Serif Display',serif; font-size:1.5rem; font-weight:400;
    color:var(--white); letter-spacing:-0.01em; line-height:1.2;
}
.lc-card-header p {
    margin-top:5px; font-size:0.75rem; color:rgba(255,255,255,0.60);
    letter-spacing:0.06em; text-transform:uppercase; font-weight:500;
}

/* ── BODY ── */
.lc-card-body { padding: 24px 40px 30px; }

/* ── FIELD ── */
.lc-field { margin-bottom: 16px; }
.lc-field label {
    display:block; font-size:0.70rem; font-weight:600;
    letter-spacing:0.07em; text-transform:uppercase;
    color:var(--muted); margin-bottom:6px;
}
.lc-input-wrap { position:relative; display:flex; align-items:center; }
.lc-input-wrap .lc-icon {
    position:absolute; left:13px; color:var(--muted); display:flex; pointer-events:none;
}
.lc-input-wrap .lc-icon i { font-size: 14px; }
.lc-input-wrap input {
    width:100%; padding:11px 13px 11px 38px;
    border:1.5px solid var(--line); border-radius:10px;
    font-size:0.91rem; font-family:'Inter',sans-serif;
    color:var(--ink); background:var(--mist); outline:none;
    transition:border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.lc-input-wrap input::placeholder { color:#AABBC8; }
.lc-input-wrap input:focus {
    border-color:var(--indigo); background:var(--white);
    box-shadow:0 0 0 3px rgba(45,69,160,0.10);
}
.lc-toggle-pw {
    position:absolute; right:11px; background:none; border:none;
    cursor:pointer; color:var(--muted); display:flex; padding:4px;
    transition:color 0.15s;
}
.lc-toggle-pw:hover { color:var(--indigo); }
.lc-toggle-pw i { font-size: 14px; }

.lc-error {
    display: block;
    font-size: 0.78rem;
    color: #dc3545;
    margin-top: -10px;
    margin-bottom: 12px;
}

/* ── ROW META ── */
.lc-row-meta {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px;
}
.lc-check-label {
    display:flex; align-items:center; gap:7px; cursor:pointer;
    font-size:0.80rem; color:var(--muted); user-select:none;
}
.lc-check-label input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.lc-checkbox-box {
    display: inline-flex; align-items: center; justify-content: center;
    width:16px; height:16px; border:1.5px solid var(--line);
    border-radius:4px; background:var(--mist); flex-shrink:0;
    transition:background 0.15s, border-color 0.15s;
    position: relative;
}
.lc-checkbox-box::after {
    content:''; display:none;
    position:absolute; top:2px; left:4px;
    width:5px; height:8px; border:2px solid #fff;
    border-top:none; border-left:none; transform:rotate(45deg);
}
.lc-check-label input[type="checkbox"]:checked + .lc-checkbox-box {
    background:var(--indigo); border-color:var(--indigo);
}
.lc-check-label input[type="checkbox"]:checked + .lc-checkbox-box::after {
    display: block;
}
.lc-forgot { font-size:0.80rem;font-weight:500;color:var(--indigo);text-decoration:none;transition:opacity 0.15s; }
.lc-forgot:hover { opacity:0.75; }

/* ── BUTTON ── */
.lc-btn {
    width:100%; padding:13px;
    background:linear-gradient(135deg, var(--indigo) 0%, #3D5BC0 100%);
    color:var(--white); border:none; border-radius:10px;
    font-size:0.86rem; font-weight:600; letter-spacing:0.08em;
    text-transform:uppercase; cursor:pointer; position:relative; overflow:hidden;
    transition:transform 0.15s, box-shadow 0.15s;
    box-shadow:0 4px 16px rgba(45,69,160,0.30);
}
.lc-btn::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,0.12),transparent);
    border-radius:inherit;
}
.lc-btn:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(45,69,160,0.38); }
.lc-btn:active { transform:translateY(0); opacity:0.9; }

/* ── ACCENT ── */
.lc-accent-bar {
    height:3px;
    background:linear-gradient(90deg,transparent,var(--gold) 40%,var(--gold) 60%,transparent);
    margin: 20px 0 0; border-radius:2px; opacity:0.6;
}

/* ── APP SYNC QUICK LOGIN ── */
.lc-quick-login { margin-top: 20px; }
.lc-quick-login-title {
    font-size: 0.70rem; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--muted);
    text-align: center; margin-bottom: 10px;
}
.lc-quick-grid {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.lc-quick-grid .lc-btn-quick {
    flex: 1; min-width: 80px; max-width: 140px;
    padding: 9px 10px;
    background: var(--mist); border: 1.5px solid var(--line);
    border-radius: 8px; font-size: 0.78rem; font-weight: 600;
    color: var(--indigo); cursor: pointer; text-align: center;
    transition: border-color 0.2s, background 0.2s;
}
.lc-quick-grid .lc-btn-quick:hover { border-color: var(--indigo); background: var(--white); }

/* ── SCHOOL LINKS ── */
.lc-schools { margin-top: 20px; }
.lc-schools-title {
    font-size: 0.70rem; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--muted);
    text-align: center; margin-bottom: 10px;
}
.lc-school-grid {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.lc-school-link {
    display: inline-block;
    padding: 8px 12px;
    background: var(--mist); border: 1.5px solid var(--line);
    border-radius: 8px; font-size: 0.78rem; font-weight: 500;
    color: var(--indigo); text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.lc-school-link:hover { border-color: var(--indigo); background: var(--white); }

/* ── FOOTER ── */
.lc-card-footer {
    text-align:center; padding: 14px 40px 22px;
    font-size:0.72rem; color:var(--muted);
    border-top: 1px solid var(--line);
}
.lc-card-footer a { color:var(--indigo); text-decoration:none; font-weight:500; }

.lc-motto {
    margin-top: 18px; text-align:center; font-size:0.68rem;
    letter-spacing:0.10em; color:#AABBC8; text-transform:uppercase;
}

@media (max-width: 480px) {
    .lc-card-header { padding: 24px 24px 38px; }
    .lc-card-body { padding: 20px 24px 24px; }
    .lc-card-footer { padding: 12px 24px 18px; }
    .lc-quick-grid .lc-btn-quick { max-width: 100%; }
}