:root {
  --primary: #1e2d37;
  --primary-dark: #162227;
  --primary-rgb: 30, 45, 55;
  --primary-20: rgba(30, 45, 55, 0.74);
  --primary-30: rgba(30, 45, 55, 0.3);
  --primary-40: rgba(30, 45, 55, 0.4);

  --primary-gradient: linear-gradient(135deg, #1e2d37 0%, #162227 100%);
  --primary-color: #1e2d37;
  --sidebar-gradient: linear-gradient(180deg, #1e2d37 0%, #162227 100%);

  --bg-card: rgba(0, 0, 0, 0.463);
  --bg-dark-red: rgba(139, 0, 0, 0.321);
  --bg-black: rgba(0, 0, 0, 0.425);

  --text-light: #ccc;
  --text-muted: #999;
  --text-white-10: rgba(255, 255, 255, 0.1);
  --text-white-15: rgba(255, 255, 255, 0.15);
  --text-white-40: rgba(255, 255, 255, 0.4);

  --gold: #c69e42;
  --gold-light: #e8c96a;
  --gold-dark: #b8941f;
  --cream-from: #f5f1e8;
  --cream-to: #e8dcc8;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.animate-fadeInDown { animation: fadeInDown 1s ease-out; }
.animate-fadeIn { animation: fadeIn 1.5s ease-out; }
.animate-fadeInScale { animation: fadeInScale 0.18s ease-out; }

/* Welcome/landing hero: fluid spacing (vh-based clamps) so the login CTA
   stays on-screen without scrolling on short viewports (e.g. landscape
   mobile), while still looking spacious on tall ones. */
.welcome-hero {
  padding-top: clamp(1rem, 4vh, 2rem);
  padding-bottom: clamp(1rem, 4vh, 2rem);
}
.welcome-logo-wrap {
  width: clamp(140px, 28vh, 240px);
  margin-bottom: clamp(1rem, 5vh, 3rem);
}
.welcome-heading {
  margin-bottom: clamp(1rem, 4vh, 2.5rem);
}
.welcome-login-btn {
  margin-bottom: clamp(0.75rem, 3vh, 1.5rem);
}
.welcome-links {
  margin-bottom: clamp(0.75rem, 3vh, 2rem);
}

.gold-gradient {
  background: linear-gradient(135deg, #c69e42 0%, #c69e42 100%);
}
.gold-gradient:hover {
  background: linear-gradient(135deg, #c69e42 0%, #b8941f 100%);
}
.logo-img:hover { transform: scale(1.05); }

.auth-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 215, 0, 0.12);
  color: #fff;
}
.auth-input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: #c69e42;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
  outline: none;
}
.auth-select {
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.25);
  color: #5a7c99;
}

/* Rendering for rich-text notice content (written with the Quill editor). */
.notice-rich-content p { margin: 0 0 0.5em; }
.notice-rich-content p:last-child { margin-bottom: 0; }
.notice-rich-content ul { list-style: disc; padding-left: 1.5rem; }
.notice-rich-content ol { list-style: decimal; padding-left: 1.5rem; }
.notice-rich-content a { color: var(--primary); text-decoration: underline; }
.notice-rich-content .ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.notice-rich-content .ql-font-monospace { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }