/* RESET */
*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif}
body{background:#f4f7fa;color:#333}

/* HEADER + NAV */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 18px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;object-fit:contain}
.brand-text h1{font-size:1.05rem;color:#0f172a}
.subtitle{font-size:.85rem;color:#6b7280}

.site-nav{display:flex;align-items:center;gap:18px}
.nav-link{color:#0f172a;text-decoration:none;font-weight:600;opacity:.85}
.nav-link:hover{opacity:1}
.btn-nav{
  padding:8px 14px;border-radius:10px;border:1px solid #0b5ed7;background:#0b5ed7;color:#fff;
  font-weight:700;cursor:pointer;transition:.2s box-shadow,.2s transform;
}
.btn-nav:hover{box-shadow:0 8px 20px rgba(11,94,215,.25);transform:translateY(-1px)}

/* MAIN CARDS */
.card-container{display:flex;justify-content:center;gap:30px;padding:40px 20px;flex-wrap:wrap}
.card{background:#fff;border-radius:14px;box-shadow:0 4px 10px rgba(0,0,0,.08);overflow:hidden;width:320px;text-align:center;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-8px);box-shadow:0 10px 24px rgba(0,0,0,.14)}
.card img{width:100%;height:200px;object-fit:cover}
.card h2{margin:14px 0 8px;color:#0b5ed7}
.card p{padding:0 18px 6px;color:#566372}
.btn{display:inline-block;margin:16px 0 18px;padding:10px 22px;background:#0b5ed7;color:#fff;border-radius:10px;text-decoration:none;font-weight:700;border:none}
.btn:hover{background:#094eb8}
.btn.full{width:100%}

/* FOOTER */
footer{text-align:center;padding:24px;background:#111827;color:#e5e7eb}
footer .social{margin:10px 0}
footer .social img{width:28px;margin:0 8px;transition:transform .3s}
footer .social img:hover{transform:scale(1.15)}
.copy{font-size:.85rem;color:#9ca3af;margin-top:10px}

/* MODAL (formal) */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:1000}
.modal.hidden{display:none}
.auth-card{
  width:min(860px,94vw);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.28);padding:20px;border:1px solid rgba(0,0,0,.05)
}
.auth-close{position:sticky;top:0;float:right;border:0;background:#fff;width:40px;height:40px;border-radius:12px;font-size:20px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.auth-head{margin-top:6px;margin-bottom:8px}
.auth-head h2{color:#0f172a;margin-bottom:2px}
.auth-sub{color:#6b7280}

.auth-tabs{display:flex;gap:8px;margin:10px 0 12px}
.auth-tab{padding:10px 14px;border-radius:10px;border:1px solid #e5e7eb;background:#f8fafc;color:#334155;cursor:pointer;font-weight:600}
.auth-tab.active{background:#eaf2ff;color:#0b5ed7;border-color:#d8e6ff}

.auth-panel{padding:6px 2px}
.auth-panel.hidden{display:none}

.auth-form{display:grid;gap:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;color:#0f172a}
.field input{padding:11px 12px;border:1px solid #d9e0e7;border-radius:10px;outline:0;font-size:15px;transition:border-color .2s}
.field input:focus{border-color:#2b78f6;box-shadow:0 0 0 3px rgba(43,120,246,.15)}

.password-wrap{position:relative}
.password-wrap input{width:100%;padding-right:42px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:4px 8px;cursor:pointer}

.form-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.check{display:flex;align-items:center;gap:8px;cursor:pointer}
.muted{color:#6b7280;text-decoration:none}
.muted:hover{text-decoration:underline}

.form-msg{font-size:.92rem;margin-top:6px}
.form-msg.ok{color:#0e8f4b}
.form-msg.err{color:#b91c1c}

/* Toast */
.toast{position:fixed;bottom:18px;right:18px;background:#1f2937;color:#fff;padding:12px 14px;border-radius:10px;box-shadow:0 12px 26px rgba(0,0,0,.25);z-index:1200;opacity:0;transform:translateY(8px);transition:.25s}
.toast.show{opacity:1;transform:translateY(0)}
.toast.hidden{display:none}