:root {
  --bs-primary: #1D5FD6;
  --bs-primary-rgb: 29, 95, 214;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #12377A;
  --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --bs-border-radius: .6rem;
  --bs-border-radius-lg: .9rem;
  --brand-deep: #12377A;
  --icon-tint: rgba(29, 95, 214, .08);
}
h1, h2, h3, h4, h5, .navbar-brand { font-family: "Zilla Slab", Georgia, serif; }

@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg: #101826;
    --bs-body-color: #E9EDF4;
    --bs-border-color: #2B3750;
    --bs-primary: #7AA6FF;
    --bs-primary-rgb: 122, 166, 255;
    --brand-deep: #0B1730;
    --icon-tint: rgba(122, 166, 255, .16);
  }
  .card, .day-card { background-color: #182234 !important; border-color: #2B3750 !important; }
}

html, body { height: 100%; }
body {
  display: flex; flex-direction: column; min-height: 100vh;
  padding-top: 4.5rem; /* clears the fixed navbar */
}
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

.navbar-brand::before {
  content: ''; display: inline-block; width: .6rem; height: .6rem;
  background: #fff; border-radius: 2px; margin-right: .5rem; vertical-align: middle;
}

.hero {
  background: linear-gradient(135deg, var(--bs-primary) 0%, var(--brand-deep) 100%);
  color: #fff; border-radius: var(--bs-border-radius-lg); position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.15) 0, transparent 45%),
    radial-gradient(circle at 8% 95%, rgba(255,255,255,.10) 0, transparent 40%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero .lead { color: rgba(255,255,255,.9); }

.icon-panel { background: var(--icon-tint); border-radius: var(--bs-border-radius-lg); color: var(--bs-primary); }
.icon-panel i { font-size: 2rem; }

.feature-card { transition: transform .15s ease, box-shadow .15s ease; }
.feature-card:hover { transform: translateY(-4px); }

/* timetable visualization */
.days-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.day-card {
  background: #fff; border: 1px solid var(--bs-border-color, #dee2e6); border-top: 3px solid var(--bs-primary);
  border-radius: var(--bs-border-radius); padding: 1rem 1.1rem; overflow-x: auto;
}
.day-card h3 {
  font-size: 1.05rem; margin: 0 0 .6rem; padding-bottom: .5rem;
  border-bottom: 1px dashed var(--bs-border-color, #dee2e6);
}
.block { display: flex; flex-direction: column; gap: .1rem; padding: .55rem 0; border-bottom: 1px dashed var(--bs-border-color, #dee2e6); }
.block:last-child { border-bottom: none; }
.block-top { display: flex; align-items: baseline; gap: .5rem; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; margin-bottom: .15rem; background: var(--bs-primary); }
.dot.break { background: var(--bs-warning, #ffc107); }
.subject { font-weight: 600; }
.time { color: var(--bs-secondary-color, #6c757d); font-size: .85rem; margin-left: auto; white-space: nowrap; }
.detail { color: var(--bs-secondary-color, #6c757d); font-size: .85rem; margin-left: 1rem; }