:root{
  --ink:#0C1F2F;
  --cyan:#00AEEF;
  --green:#26A69A;
  --amber:#FFB300;
  --light:#F5F7FA;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Arial,Helvetica,sans-serif;}
body{background:var(--light);color:var(--ink);line-height:1.6;}
.navbar{background:var(--ink);color:white;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;}
.navbar a{color:white;text-decoration:none;margin-left:1rem;font-weight:600;}
.navbar img{height:40px;}
header{padding:4rem 1rem;text-align:center;background:linear-gradient(135deg,var(--cyan),var(--green));color:white;}
header h1{font-size:2.5rem;margin-bottom:.5rem;}
header p{font-size:1.2rem;}
main{padding:2rem 1rem;}
footer{background:var(--ink);color:white;text-align:center;padding:1rem;margin-top:3rem;font-size:.9rem;}


/* === NAVBAR ENHANCEMENTS === */
.navbar {
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  flex-wrap: wrap;             /* allow wrapping on small screens */
}

.navbar a {color:#fff;text-decoration:none;margin-left:1rem;font-weight:600;}

.navbar img {height:40px;width:auto;}

.navbar .nav-links {          /* wrapper for right links */
  display: flex;
  gap:1rem;
}

@media screen and (max-width: 640px){
  .navbar .nav-links{
    flex-basis:100%;
    justify-content: center;
    margin-top:.5rem;
  }
}
.hero {
  background: linear-gradient(to right, #06beb6, #48b1bf);
  color: white;
  text-align: center;
  padding: 40px 20px;
  margin-bottom: 40px;
  border-radius: 8px;
}

/* ===== MODERN CARD ROW ===== */
.quick-links {
  padding: 3rem 1rem;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.quick-links h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--ink);
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;              /* space between cards */
}

.card {
  flex: 1 1 240px;          /* grow, shrink, basis */
  max-width: 260px;
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .25s, box-shadow .25s;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.card-icon {
  font-size: 2.2rem;
  margin-bottom: .75rem;
}

.card-title {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
}

/* optional dark-hover accent */
@media (prefers-color-scheme: dark) {
  .card { background: #1e293b; color: #f1f5f9; }
  .card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.4); }
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.markdown-content p,
.markdown-content li {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
  color: var(--ink);
}

.markdown-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.card.shadow-sm {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: none;
}

@media screen and (max-width: 768px) {
  .hero h1 {
    font-size: 1.75rem;
  }

  .markdown-content {
    font-size: 0.95rem;
  }
}
.login-container {
  max-width: 400px;
  margin: 5rem auto;
  padding: 2rem;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 10px;
  text-align: center;
}

.login-container input {
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.login-container button {
  padding: 0.5rem 1rem;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.flash-msg {
  color: red;
  margin-bottom: 1rem;
}

.flash-msg.success {
  color: green;
}

.admin-links li {
  margin: 1rem 0;
}