/* =====================================================================
   SuperSafe-AI — Common Styles
   Shared across landing page and dashboard
   ===================================================================== */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: #38bdf8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Brand colors */
.safe { color: #4ade80; }
.brand { font-weight: 700; font-size: 18px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: all 0.2s;
}
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 14px 32px; font-size: 16px; }
.btn-cta {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
}
.btn-cta:hover { opacity: 0.9; transform: translateY(-1px); text-decoration: none; }
.btn-ghost {
  background: transparent; border: 1px solid #475569; color: #cbd5e1;
}
.btn-ghost:hover { border-color: #94a3b8; color: #f1f5f9; text-decoration: none; }

/* Avatar */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #334155;
}

/* Spinner */
.spinner {
  display: inline-block; width: 24px; height: 24px;
  border: 3px solid #334155; border-top-color: #38bdf8;
  border-radius: 50%; animation: spin 0.8s linear infinite;
  margin-bottom: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Loading state */
.loading {
  text-align: center; padding: 60px; color: #64748b;
}