/* IntelQuiz · app.css — design tokens (05-DESIGN-SYSTEM) + base + components M0 */
:root{
  --bg:#f7f8fa; --surface:#ffffff; --surface-2:#eef1f5;
  --text:#1f2430; --text-muted:#5b6472; --border:#dfe3ea;
  --primary:#2f6f6a; --primary-600:#265b57; --primary-tint:#e6f0ef;
  --success:#2e7d4f; --success-tint:#e7f3ec;
  --warn:#b8860b; --warn-tint:#fbf2dc;
  --danger:#b3382f; --danger-tint:#fbe9e7;
  --info:#2c5d8a; --info-tint:#e8f0f8;
  --band-yeu:#b3382f; --band-tb:#b8860b; --band-kha:#2c5d8a; --band-vung:#2e7d4f;
  --font:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --radius:10px; --radius-sm:6px; --shadow:0 1px 3px rgba(20,30,50,.08);
  --container:880px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font); font-size:16px; line-height:1.55; color:var(--text); background:var(--bg)}
.muted{color:var(--text-muted)}

.btn{font:inherit; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); padding:10px 16px; border-radius:var(--radius-sm); transition:.12s}
.btn:hover{background:var(--surface-2)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-danger{background:var(--danger); border-color:var(--danger); color:#fff}

label{display:block; margin:0 0 14px; font-size:14px; color:var(--text-muted)}
input,select,textarea{display:block; width:100%; margin-top:5px; font:inherit; color:var(--text); padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-tint); border-color:var(--primary)}

.auth-page{display:flex; min-height:100vh; align-items:center; justify-content:center; padding:24px}
.auth-card{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px}
.auth-card h1{margin:0 0 4px; font-size:24px; color:var(--primary)}
.auth-card p{margin:0 0 22px}
.auth-card .btn-primary{width:100%; margin-top:6px}
.auth-row{display:flex; align-items:center; justify-content:space-between; gap:12px}

#toast-wrap{position:fixed; top:18px; right:18px; display:flex; flex-direction:column; gap:8px; z-index:9999}
.toast{padding:11px 15px; border-radius:var(--radius-sm); box-shadow:var(--shadow); font-size:14px; color:var(--text); background:var(--surface); border-left:4px solid var(--text-muted); max-width:340px; animation:toast-in .15s ease-out}
.toast.success{border-color:var(--success); background:var(--success-tint)}
.toast.error{border-color:var(--danger); background:var(--danger-tint)}
.toast.warn{border-color:var(--warn); background:var(--warn-tint)}
.toast.info{border-color:var(--info); background:var(--info-tint)}
@keyframes toast-in{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}