@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

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

:root {
  --bg:           #f8f7f2;
  --bg2:          #f0ede5;
  --card:         #ffffff;
  --border:       #e8e3d9;
  --border2:      #d4cfc4;
  --text:         #1c1917;
  --text2:        #44403c;
  --muted:        #78716c;
  --muted2:       #a8a29e;
  --accent:       #e8714a;
  --accent-light: #fef2ec;
  --accent-hover: #d4623c;
  --success:      #16a34a;
  --success-bg:   #f0fdf4;
  --danger:       #dc2626;
  --danger-bg:    #fef2f2;
  --info-bg:      #eff6ff;
  --info:         #1d4ed8;
  --r:            14px;
  --r-sm:         10px;
  --r-xs:         7px;
  --shadow:       0 1px 2px rgba(28,25,23,.04), 0 4px 16px rgba(28,25,23,.06);
  --shadow-lg:    0 4px 24px rgba(28,25,23,.10), 0 1px 4px rgba(28,25,23,.06);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  background:  var(--bg);
  color:       var(--text);
  line-height: 1.6;
  min-height:  100vh;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; font-size: 14px; }

/* ── Buttons ── */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        8px 18px;
  border-radius:  var(--r-sm);
  border:         none;
  cursor:         pointer;
  font-size:      14px;
  font-weight:    600;
  transition:     all .15s;
  white-space:    nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--text); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #333; }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover:not(:disabled) { background: var(--accent-hover); }

.btn-ghost {
  background:    transparent;
  color:         var(--muted);
  border:        1.5px solid var(--border);
}
.btn-ghost:hover:not(:disabled) { background: var(--bg2); color: var(--text); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(.9); }

.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--r-xs); }

/* ── Inputs ── */
.input {
  width:           100%;
  padding:         10px 14px;
  border:          1.5px solid var(--border);
  border-radius:   var(--r-sm);
  background:      #fff;
  color:           var(--text);
  transition:      border-color .15s, box-shadow .15s;
  outline:         none;
  line-height:     1.5;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,113,74,.12); }
.input::placeholder { color: var(--muted2); }

/* ── Card ── */
.card {
  background:    var(--card);
  border-radius: var(--r);
  border:        1px solid var(--border);
  box-shadow:    var(--shadow);
}

/* ── Badge ── */
.badge { display: inline-block; padding: 3px 9px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: .2px; }
.badge-pending  { background: #fef9c3; color: #a16207; }
.badge-answered { background: #dcfce7; color: #166534; }

/* ── Toast ── */
.toast {
  position:   fixed;
  bottom:     24px;
  right:      24px;
  background: var(--text);
  color:      #fff;
  padding:    12px 20px;
  border-radius: var(--r-sm);
  font-size:  13px;
  font-weight: 500;
  opacity:    0;
  transform:  translateY(8px);
  transition: all .25s;
  z-index:    9999;
  pointer-events: none;
  max-width:  320px;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ── Spinner ── */
.spinner {
  width:         22px;
  height:        22px;
  border:        2.5px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation:     spin .7s linear infinite;
  margin:        48px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 64px 32px; color: var(--muted); }
.empty-state .icon { font-size: 38px; margin-bottom: 14px; opacity: .7; }
.empty-state p { font-size: 15px; }

/* ── Error box ── */
.err {
  background:    var(--danger-bg);
  color:         var(--danger);
  padding:       10px 14px;
  border-radius: var(--r-xs);
  font-size:     13px;
  margin-bottom: 18px;
  border:        1px solid #fecaca;
}