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

html, body {
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
  height: 100%;
  overflow-y: auto;
}

/* -----------------------------------------------------
   GLOBAL CONTENT OFFSET (FIX FOR FIXED TOPBAR)
------------------------------------------------------ */
#main-content {
  padding-top: 50px; /* matches fixed topbar height */
}

/* -----------------------------------------------------
   SMOOTH THEME TRANSITIONS
------------------------------------------------------ */
body, 
.topbar, 
.nav-links a,
.login-btn,
.theme-toggle-btn,
.placeholder-card {
  transition: background 0.3s linear, 
              color 0.3s linear, 
              border-color 0.3s linear,
              fill 0.3s linear;
}

/* -----------------------------------------------------
   PLACEHOLDER PAGE LAYOUT
------------------------------------------------------ */
.placeholder-page {
  padding-top: 120px; /* so content doesn't hide behind fixed topbar */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.placeholder-card {
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  width: 90%;
  max-width: 450px;
  background: var(--surface, #fff);
  color: var(--text-primary, #111);
  box-shadow: var(--shadow, 0 4px 15px rgba(0,0,0,0.08));
}

.placeholder-card h1 {
  margin-bottom: 10px;
  font-size: 1.8rem;
}

.placeholder-card p {
  font-size: 1rem;
  opacity: 0.8;
}