:root{
  --primary:#1E3A8A; --primary-dark:#162d6e; --accent:#F97316;
  --success:#16a34a; --error:#ef476f;
  --bg:#f0f3f8; --surface:#fff; --border:#e2e8f0;
  --text:#0f172a; --muted:#64748b;
  --radius:12px;
  --shadow-sm:0 2px 8px rgba(15,23,42,.06);
  --shadow:0 8px 28px rgba(15,23,42,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Poppins',-apple-system,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  font-size:15px; overflow-x:hidden;
}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#f0f3f8}
::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}
a{color:var(--primary); text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1280px; margin:0 auto; padding:0 24px; width:100%}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:10px; font-weight:600; font-size:14.5px;
  border:none; cursor:pointer; text-decoration:none; transition:all .2s ease;
  font-family:inherit; white-space:nowrap;
}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(30,58,138,.25)}
.btn-primary:hover{background:var(--primary-dark); transform:translateY(-1px)}
.btn-ghost{background:#fff; color:var(--text); border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary)}
.btn-accent{background:var(--accent); color:#fff}
.btn-accent:hover{filter:brightness(.94); transform:translateY(-1px)}
.btn-block{width:100%; justify-content:center}
.btn-sm{padding:8px 15px; font-size:13px; border-radius:8px}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none!important}

/* Forms */
.form-group{margin-bottom:16px}
.form-group label{
  display:block; font-size:13px; font-weight:600; color:var(--text);
  margin-bottom:6px;
}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:12px 15px; border:1.5px solid var(--border);
  border-radius:10px; font-family:inherit; font-size:14.5px;
  background:#fff; outline:none; transition:border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(30,58,138,.08);
}
.form-group textarea{resize:vertical; min-height:100px}
.form-error{color:var(--error); font-size:12.5px; margin-top:5px; display:none}
.form-error.show{display:block}

/* Toast */
.toast{
  position:fixed; top:80px; right:24px; z-index:11000;
  background:#fff; padding:14px 18px; border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.15);
  display:flex; align-items:center; gap:10px; font-size:13.5px;
  border-left:4px solid var(--primary); max-width:340px;
  transform:translateX(400px); transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.toast.show{transform:translateX(0)}
.toast.ok{border-left-color:var(--success)}
.toast.ok i{color:var(--success)}
.toast.err{border-left-color:var(--error)}
.toast.err i{color:var(--error)}

/* Loading overlay */
.loading-overlay{
  position:fixed; inset:0; background:#fff; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .3s;
}
.loading-overlay.hidden{opacity:0; pointer-events:none}
.spinner{
  width:44px; height:44px; border:3px solid var(--border);
  border-top-color:var(--primary); border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Fade in on scroll */
.fade-in{opacity:0; transform:translateY(24px);
  transition:opacity .7s, transform .7s;}
.fade-in.visible{opacity:1; transform:none}

/* Responsive */
@media(max-width:480px){
  body{font-size:14px}
  .container{padding:0 16px}
}