:root {
  color-scheme: light;
  --bg: #f5f2eb;
  --surface: rgba(255, 255, 255, 0.84);
  --surface-solid: #ffffff;
  --ink: #1e1a17;
  --muted: #655f58;
  --accent: #7a5830;
  --accent-strong: #5f4323;
  --accent-soft: #ece2d3;
  --border: rgba(30, 26, 23, 0.14);
  --shadow-lg: 0 24px 70px rgba(30, 26, 23, 0.14);
  --shadow-md: 0 12px 30px rgba(30, 26, 23, 0.09);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(122, 88, 48, 0.17), transparent 32%),
    radial-gradient(circle at top right, rgba(95, 67, 35, 0.12), transparent 26%),
    linear-gradient(180deg, #faf7f2 0%, #f0e8dc 100%);
  color: var(--ink);
}

.app-shell {
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px;
}

.page-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.brand {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(122, 88, 48, 0.12);
  color: var(--accent-strong) !important;
}

.site-main {
  display: grid;
  gap: 18px;
  align-content: center;
}

.site-main--app {
  align-content: start;
}

.home-note {
  margin-top: -4px;
}

.home-note p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.site-footer {
  padding: 28px 0 8px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: bolder;
}

.site-footer p {
  margin: 0;
  text-align: center;
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

main {
  display: block;
}

.hero,
.card {
  background: var(--surface);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.hero {
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72)),
    radial-gradient(circle at top right, rgba(122, 88, 48, 0.18), transparent 40%);
}

.hero--landing {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  min-height: auto;
  margin-bottom: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px 0 10px;
}

.hero--auth {
  padding: 24px;
}

.page-intro h1 {
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}

.metric-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.metric-box {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
}

.metric-box p {
  margin: 0 0 4px;
  font-size: 0.9rem;
}

.metric-box strong {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.list-shell {
  display: grid;
  gap: 10px;
}

.lesson-row,
.progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  color: inherit;
}

.lesson-row h2,
.progress-row h2 {
  margin: 2px 0 4px;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.lesson-row--locked {
  opacity: 0.65;
}

.lesson-day {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.lesson-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill--done {
  background: #d6ead8;
  color: #1d5d2a;
}

.status-pill--ready {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.status-pill--locked {
  background: #ece7de;
  color: #685f53;
}

.lesson-layout {
  display: grid;
  gap: 14px;
}

.lesson-main {
  display: grid;
  gap: 12px;
}

.lesson-side {
  display: grid;
  gap: 12px;
}

.input-area {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font: inherit;
  background: var(--surface-solid);
  resize: vertical;
}

.hero-actions--left {
  justify-content: flex-start;
}

.auth-panel,
.mini-panel {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
}

.auth-panel {
  padding: 24px;
}

.auth-panel {
  display: grid;
  gap: 16px;
}

.auth-page {
  display: grid;
  justify-items: center;
  gap: 0;
  min-height: calc(100dvh - 140px);
  align-content: center;
}

.auth-panel--center {
  width: 100%;
  max-width: 640px;
}

.section {
  display: grid;
  gap: 14px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
}

.section--plain {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 8px 0;
}

.section--split {
  grid-template-columns: minmax(0, 1fr);
}

.section--grid {
  grid-template-columns: minmax(0, 1fr);
}

.section--cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.section-kicker {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-copy {
  max-width: 65ch;
  color: var(--muted);
}

.mini-panel {
  padding: 22px;
}

.mini-panel--accent {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(219, 234, 254, 0.36));
}

.content-block {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
}

.content-block--accent {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(219, 234, 254, 0.32));
}

.hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -40% auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(122, 88, 48, 0.22), transparent 70%);
  pointer-events: none;
}

.hero--landing::after {
  display: none;
}

.hero-copy-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--accent-strong);
  font-weight: 700;
}

.hero h1,
.card h1,
.card h2 {
  margin-top: 0;
  letter-spacing: -0.03em;
}

.hero h1 {
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  line-height: 0.98;
  max-width: 11ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-copy {
  max-width: 52ch;
  font-size: 1.02rem;
  margin: 0 auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.hero-actions--footer {
  margin-top: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.button--primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 10px 20px rgba(95, 67, 35, 0.24);
}

.button--secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--ink);
}

.button:hover {
  transform: translateY(-1px);
}

.button--primary:hover {
  background: var(--accent-strong);
}

.button--secondary:hover {
  background: rgba(255, 255, 255, 0.7);
}

.button:focus,
input:focus {
  outline: 3px solid rgba(31, 111, 120, 0.18);
  outline-offset: 2px;
}

.clean-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list--stacked {
  padding-left: 0;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
}

.feature-list li::before {
  content: '•';
  color: var(--accent);
  font-weight: 900;
  line-height: 1;
}

.meta-strip {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(122, 88, 48, 0.08);
  border: 1px solid rgba(122, 88, 48, 0.16);
}

.meta-strip span {
  font-size: 0.92rem;
  color: var(--muted);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
}

.auth-tag-row {
  margin-top: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.9rem;
  font-weight: 700;
}

.stack {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 600;
}

input {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(18, 33, 43, 0.14);
  border-radius: 12px;
  font: inherit;
  background: var(--surface-solid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.auth-note {
  margin-top: 16px;
}

.auth-note-text {
  margin: 0;
  color: var(--muted);
}

.auth-note-text a {
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 700;
}

.auth-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.auth-status.status--error {
  color: #a32f2f;
}

.status--error {
  color: #a32f2f;
  font-weight: 600;
}

@media (min-width: 720px) {
  .app-shell {
    padding: 28px;
  }

  .page-shell {
    padding: 24px;
  }

  .hero--landing {
    min-height: calc(100dvh - 190px);
    padding: 8px 0;
  }

  .hero--auth {
    padding: 32px;
  }

  .section--split,
  .section--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .section--cta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }

  .auth-panel,
  .mini-panel {
    padding: 28px;
  }

  .content-block {
    padding: 24px;
  }

  .lesson-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    gap: 16px;
    align-items: start;
  }
}

@media (min-width: 960px) {
  .app-shell {
    padding: 36px;
  }

  .page-shell {
    padding: 32px;
  }

  .hero--landing {
    min-height: calc(100dvh - 210px);
    padding: 10px 0;
  }

  .hero--landing .hero-copy {
    font-size: 1.08rem;
  }

  .hero,
  .card {
    border-radius: 24px;
  }

  .hero {
    min-height: 320px;
    display: grid;
    align-items: center;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer {
    padding-top: 32px;
  }

  .site-main {
    gap: 22px;
  }

  .auth-page {
    padding-top: 16px;
    min-height: calc(100dvh - 170px);
  }
}

.hero h1,
.card h1,
.card h2 {
  margin-top: 0;
}

.card + .card {
  margin-top: 16px;
}

.card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37, 99, 235, 0.18);
}

p {
  line-height: 1.6;
  color: var(--muted);
}

.auth-note p:last-child {
  margin-bottom: 0;
}

/* Lesson Tabs Layout */
.lesson-header {
  margin-bottom: 20px;
}

.lesson-tabs-container {
  display: grid;
  gap: 20px;
}

.lesson-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  /* Hide scrollbar for cleaner mobile look */
  scrollbar-width: none; 
}
.lesson-tabs::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  white-space: nowrap;
  flex: 1;
}

.tab-btn:hover {
  background: var(--surface-solid);
  color: var(--ink);
}

.tab-btn.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent-strong);
}

.lesson-tab-content {
  display: grid;
}

.tab-pane {
  display: grid;
  gap: 16px;
}

/* Desktop layout for Tabs matching the mini sidebar intent */
@media (min-width: 768px) {
  .lesson-tabs-container {
    grid-template-columns: 180px 1fr;
    align-items: start;
    gap: 32px;
  }
  
  .lesson-tabs {
    flex-direction: column;
    padding-bottom: 0;
  }
  
  .tab-btn {
    text-align: left;
    flex: none;
  }
}

/* Lesson Tabs Layout */
.lesson-header {
  margin-bottom: 20px;
}

.lesson-tabs-container {
  display: grid;
  gap: 20px;
}

.lesson-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  /* Hide scrollbar for cleaner mobile look */
  scrollbar-width: none; 
}
.lesson-tabs::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  white-space: nowrap;
  flex: 1;
}

.tab-btn:hover {
  background: var(--surface-solid);
  color: var(--ink);
}

.tab-btn.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent-strong);
}

.lesson-tab-content {
  display: grid;
}

.tab-pane {
  display: grid;
  gap: 16px;
}

.tab-pane[hidden] {
  display: none !important;
}

/* Desktop layout for Tabs matching the mini sidebar intent */
@media (min-width: 768px) {
  .lesson-tabs-container {
    grid-template-columns: 180px 1fr;
    align-items: start;
    gap: 32px;
  }
  
  .lesson-tabs {
    flex-direction: column;
    padding-bottom: 0;
  }
  
  .tab-btn {
    text-align: left;
    flex: none;
  }
}

/* Utility class to hide on mobile */
@media (max-width: 767px) {
  .desktop-only {
    display: none !important;
  }
}

/* Intelligently place cards side-by-side on larger screens to reduce vertical scrolling */
.tab-pane {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start; /* Prevents short cards from stretching vertically to match tall cards */
}

/* Ensure the bottom Next buttons always span the full width below the cards */
.tab-pane > .hero-actions {
  grid-column: 1 / -1;
}

/* Allow the Reflection typing area to span the full width for better typing experience */
#tab-reflect .content-block:nth-of-type(2) {
  grid-column: 1 / -1;
}

@media (min-width: 960px) {
  .tab-pane {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  
  .tab-pane > .hero-actions,
  .tab-pane > #customResourcesBlock,
  #tab-reflect .content-block:nth-of-type(2) {
    grid-column: 1 / -1;
  }
}

/* Clean up desktop layout: Single full-width pane, stacked cards, quick tools on left */
/* Clean up desktop layout: Single full-width pane, stacked cards, quick tools on left */
/* Clean up desktop layout: Single full-width pane, stacked cards, quick tools on left */
@media (min-width: 768px) {
  .lesson-layout {
    grid-template-columns: 1fr !important;
  }
  .lesson-tabs-container {
    grid-template-columns: 220px 1fr !important;
  }
}
/* Force ALL tab panes to single column (100% width row), no side-by-side grid */
.tab-pane {
  grid-template-columns: 1fr !important;
}
@media (min-width: 960px) {
  .tab-pane {
    grid-template-columns: 1fr !important;
  }
}

/* Remove "card" appearances from lesson content blocks to let it sit plainly on the background */
.lesson-tab-content .content-block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 16px 0 !important;
  border-radius: 0 !important;
}

/* Add subtle dividers between these plain sections if they are stacked */
.lesson-tab-content .content-block + .content-block {
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  padding-top: 16px !important;
}

/* Make sidebar nav and quick actions sticky on desktop */
@media (min-width: 768px) {
  .sidebar-nav {
    position: sticky;
    top: 32px; /* Leaves a nice margin at the top while scrolling */
    align-self: start; /* Prevents the sidebar from dragging out to the height of the whole container so it can stick */
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    /* Hide scrollbar for the sticky container */
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }
}

/* Upgraded Nav Styles */
.nav-links {
  background: var(--surface);
  padding: 6px 6px;
  border-radius: 100px;
  border: 1px solid var(--border);
}

.nav-links a {
  padding: 8px 16px;
  border-radius: 100px;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.nav-links a:hover {
  background: var(--surface-solid);
  color: var(--ink);
}

.nav-links a[aria-current="page"] {
  background: var(--ink);
  color: white;
}
/* Light-Themed Rain Animation for Landing Page (From Uiverse.io by SelfMadeSystem) */
.landing-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  
  /* Use the app's soft accent color for the rain */
  --c: rgba(122, 88, 48, 0.4); 

  background-image: radial-gradient(4px 100px at 0px 235px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 235px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 252px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 252px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 150px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 150px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 253px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 253px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 204px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 204px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 134px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 134px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 179px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 179px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 299px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 299px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 215px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 215px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 281px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 281px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 158px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 158px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 210px, var(--c), transparent),
    radial-gradient(4px 100px at 300px 210px, var(--c), transparent),
    radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, transparent 150%);
  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;
  animation: rainAnim 150s linear infinite;

  /* Using -webkit-mask-image to punch out the "gaps" in the rain 
     so we don't block the beautiful parent body gradient colors.
     The mask makes it visible where black, and transparent at the edges. */
  -webkit-mask-image: radial-gradient(
    ellipse 1.5px 2px at 1.5px 50%,
    #000 0%,
    #000 90%,
    transparent 100%
  );
  -webkit-mask-size: 25px 8px;
  mask-image: radial-gradient(
    ellipse 1.5px 2px at 1.5px 50%,
    #000 0%,
    #000 90%,
    transparent 100%
  );
  mask-size: 25px 8px;
}

@keyframes rainAnim {
  0% {
    background-position:
      0px 220px, 3px 220px, 151.5px 337.5px,
      25px 24px, 28px 24px, 176.5px 150px,
      50px 16px, 53px 16px, 201.5px 91px,
      75px 224px, 78px 224px, 226.5px 350.5px,
      100px 19px, 103px 19px, 251.5px 121px,
      125px 120px, 128px 120px, 276.5px 187px,
      150px 31px, 153px 31px, 301.5px 120.5px,
      175px 235px, 178px 235px, 326.5px 384.5px,
      200px 121px, 203px 121px, 351.5px 228.5px,
      225px 224px, 228px 224px, 376.5px 364.5px,
      250px 26px, 253px 26px, 401.5px 105px,
      275px 75px, 278px 75px, 426.5px 180px;
  }
  to {
    background-position:
      0px 6800px, 3px 6800px, 151.5px 6917.5px,
      25px 13632px, 28px 13632px, 176.5px 13758px,
      50px 5416px, 53px 5416px, 201.5px 5491px,
      75px 17175px, 78px 17175px, 226.5px 17301.5px,
      100px 5119px, 103px 5119px, 251.5px 5221px,
      125px 8428px, 128px 8428px, 276.5px 8495px,
      150px 9876px, 153px 9876px, 301.5px 9965.5px,
      175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px,
      225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px, 253px 5082px, 401.5px 5161px,
      275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}


/* Responsive Video Container for Day 1 Resources */
.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  margin-top: 1.5rem;
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.1));
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile Back Link */
.mobile-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  padding: 8px 14px;
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-solid, #fff);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.05));
  transition: all 0.2s ease;
}

.mobile-back-link:hover {
  background: var(--accent-soft);
  color: var(--ink);
}

@media (min-width: 768px) {
  .mobile-back-link {
    display: none; /* Hide on larger screens since they have the main nav */
  }
}

/* Password Visibility Toggle */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  width: 100%;
  padding-right: 48px; /* space for icon */
}

.toggle-password {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.2s ease;
}

.toggle-password:hover {
  color: var(--ink);
}

.toggle-password svg {
  width: 20px;
  height: 20px;
}