/* ── Empty State ────────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--muted);
}
.empty-state .empty-icon,
.empty-state > span:first-child {
  font-size: 3rem;
  display: block;
  margin-bottom: .75rem;
}
.empty-state h3 { color: var(--text); margin-bottom: .4rem }

/* ── Auth Gate ──────────────────────────────────────────────────────────────── */
.auth-gate { text-align: center; padding: 4rem 1.5rem }
.auth-gate > span { font-size: 2.5rem; display: block; margin-bottom: .75rem }
.auth-gate h2  { font-size: 1.4rem; margin-bottom: .5rem }
.auth-gate p   { color: var(--muted); font-size: .88rem; margin-bottom: 1.5rem }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #111;
  font-weight: 700;
  padding: .65rem 1.75rem;
  border-radius: 8px;
  font-size: .92rem;
  text-decoration: none;
  transition: background .2s;
}
.btn-primary:hover { background: var(--teal) }

.load-more-btn {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  padding: .7rem;
  border-radius: 8px;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.load-more-btn:hover    { border-color: var(--accent); color: var(--accent) }
.load-more-btn:disabled { opacity: .5; cursor: default }

/* ── Spinner ────────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* ── Toast ──────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #111;
  padding: .6rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .9rem;
  z-index: 9999;
  transition: opacity .3s;
  white-space: nowrap;
}
.toast.hidden { opacity: 0; pointer-events: none }

/* ── Notifications bell ─────────────────────────────────────────────────────── */
.notif-wrap { position: relative }
.notif-btn {
  background: none; border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: .35rem .6rem; cursor: pointer; font-size: .95rem;
  position: relative; transition: border-color .2s;
}
.notif-btn:hover { border-color: var(--accent) }
.notif-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--danger, #e05); color: #fff;
  font-size: .62rem; font-weight: 700; font-family: sans-serif;
  border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center;
  pointer-events: none;
}
.notif-badge.hidden { display: none }
.notif-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); z-index: 200;
  width: 300px; max-height: 360px; overflow-y: auto;
}
.notif-dropdown.hidden { display: none }
@media (max-width: 640px) {
  .notif-dropdown { position: fixed; left: 1rem; right: 1rem; top: 60px; width: auto; }
}
.notif-empty { padding: 1.2rem; text-align: center; font-size: .82rem; color: var(--muted) }
.notif-item { display: block; padding: .75rem 1rem; border-bottom: 1px solid var(--border); font-size: .82rem; line-height: 1.4; color: inherit; text-decoration: none; transition: background .15s }
.notif-item:last-child { border-bottom: none }
.notif-item.unread { background: rgba(200,169,110,.07) }
a.notif-item { cursor: pointer }
a.notif-item:hover { background: rgba(200,169,110,.12); text-decoration: none }
.notif-item-msg { color: var(--text) }
.notif-item-time { color: var(--muted); font-size: .72rem; margin-top: .2rem }
.notif-item a { color: var(--accent); text-decoration: none }
.notif-item a:hover { text-decoration: underline }

/* ── Skeleton loading shimmer ───────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 25%,
    var(--surface2) 50%,
    var(--surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}