/* ============================================================
   base.css — Global base styles
   ============================================================ */

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

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height:  100vh;
  margin:      0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0 18px;
}

/* Skeleton loading */
.skel {
  background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skel-anim 1.4s infinite;
  border-radius: 6px;
  height: 13px;
  margin-bottom: 8px;
}
@keyframes skel-anim {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* Spinner */
.drx-spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .65s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Alerts */
.drx-alert {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .85rem;
  margin-top: 10px;
  display: none;
}
.drx-alert.show  { display: block; }
.drx-alert-danger  { background: rgba(239,68,68,.12);  border: 1px solid rgba(239,68,68,.25);  color: #fca5a5; }
.drx-alert-success { background: rgba(34,197,94,.12);  border: 1px solid rgba(34,197,94,.25);  color: #86efac; }
.drx-alert-info    { background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.25); color: #7dd3fc; }

/* Empty state */
.empty-state         { text-align: center; padding: 52px 20px; color: var(--muted); }
.empty-state .ei     { font-size: 2.2rem; opacity: .3; display: block; margin-bottom: 14px; }
.empty-state h6      { color: var(--text); margin-bottom: 6px; }
.empty-state p       { font-size: .85rem; margin-bottom: 16px; }