/* ── Reset & Custom Properties ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --clr-primary:    #3b82f6;
  --clr-primary-d:  #2563eb;
  --clr-secondary:  #6366f1;
  --clr-success:    #22c55e;
  --clr-warning:    #f59e0b;
  --clr-danger:     #ef4444;
  --clr-bg:         #f8fafc;
  --clr-surface:    #ffffff;
  --clr-border:     #e2e8f0;
  --clr-text:       #1e293b;
  --clr-text-muted: #64748b;
  --clr-ai:         #f1f5f9;
  --clr-user:       #eff6ff;

  --radius:    0.5rem;
  --radius-lg: 1rem;
  --shadow:    0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);

  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

html { font-size: 16px; }
body {
  font-family: var(--font);
  background:  var(--clr-bg);
  color:       var(--clr-text);
  line-height: 1.5;
  min-height:  100vh;
}

a { color: var(--clr-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  padding:         0.5rem 1.1rem;
  border:          none;
  border-radius:   var(--radius);
  font-size:       0.95rem;
  font-weight:     500;
  cursor:          pointer;
  transition:      background 0.15s, opacity 0.15s, transform 0.1s;
  line-height:     1.4;
}
.btn:active    { transform: scale(0.97); }
.btn:disabled  { opacity: 0.5; cursor: not-allowed; }

.btn-primary   { background: var(--clr-primary);   color: #fff; }
.btn-primary:hover   { background: var(--clr-primary-d); }
.btn-secondary { background: var(--clr-border);    color: var(--clr-text); }
.btn-secondary:hover { background: #cbd5e1; }
.btn-danger    { background: var(--clr-danger);    color: #fff; }
.btn-danger:hover    { background: #dc2626; }
.btn-warning   { background: var(--clr-warning);   color: #fff; }
.btn-warning:hover   { background: #d97706; }
.btn-icon {
  padding:       0.5rem;
  border-radius: 50%;
  background:    var(--clr-border);
  color:         var(--clr-text);
}
.btn-icon:hover { background: #cbd5e1; }

/* ── Form elements ─────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.form-group label { font-size: 0.875rem; font-weight: 600; color: var(--clr-text); }
input, textarea, select {
  padding:       0.55rem 0.8rem;
  border:        1.5px solid var(--clr-border);
  border-radius: var(--radius);
  font-size:     0.95rem;
  font-family:   var(--font);
  background:    var(--clr-surface);
  color:         var(--clr-text);
  width:         100%;
  transition:    border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus, select:focus {
  outline:      none;
  border-color: var(--clr-primary);
  box-shadow:   0 0 0 3px rgba(59,130,246,.15);
}
textarea { resize: vertical; min-height: 80px; }

/* ── Card ──────────────────────────────────────────────────── */
.card {
  background:    var(--clr-surface);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding:       1.5rem;
  box-shadow:    var(--shadow);
}

/* ── Badge ─────────────────────────────────────────────────── */
.badge {
  display:       inline-block;
  padding:       0.2rem 0.6rem;
  border-radius: 999px;
  font-size:     0.75rem;
  font-weight:   600;
}
.badge-easy    { background: #dcfce7; color: #166534; }
.badge-medium  { background: #fef9c3; color: #854d0e; }
.badge-hard    { background: #fee2e2; color: #991b1b; }
.badge-blue    { background: #dbeafe; color: #1e40af; }

/* ── Toasts ────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  z-index: 9999;
}
.toast {
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  color: #fff;
  font-size: 0.9rem;
  max-width: 320px;
  animation: slideIn 0.25s ease;
  box-shadow: var(--shadow-md);
}
.toast-success { background: var(--clr-success); }
.toast-error   { background: var(--clr-danger); }
.toast-warning { background: var(--clr-warning); }
@keyframes slideIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

/* ── Utility ───────────────────────────────────────────────── */
.hidden       { display: none !important; }
.text-muted   { color: var(--clr-text-muted); }
.text-center  { text-align: center; }
.mt-1  { margin-top: 0.5rem; }
.mt-2  { margin-top: 1rem; }
.mb-1  { margin-bottom: 0.5rem; }
.mb-2  { margin-bottom: 1rem; }
.flex  { display: flex; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.wrap  { flex-wrap: wrap; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Responsive helpers ────────────────────────────────────── */
@media (max-width: 640px) {
  .card { padding: 1rem; }
  .btn  { font-size: 0.875rem; }
}