/* ===== Sleep — Calm Blue Theme (separate CSS) ===== */
* { box-sizing: border-box; }
html, body { margin: 0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f8f9fa; color:#1f2937; line-height:1.65;
}

/* Header */
.site-header{
  position: sticky; top:0; z-index:10;
  background:#0597b1; border-bottom:1px solid #e5e7eb; padding:1rem;
}
h1{ margin:.25rem 0 .5rem; font-size:1.8rem; }
.tagline{ color:#64748b; margin:.25rem 0 .75rem; }

/* Nav pills */
.menu{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; }
.menu a{
  text-decoration:none; background:#01bdcf; border:1px solid #e7eaf1;
  padding:.42rem .62rem; border-radius:10px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.menu a:hover{ transform:translateY(-1px); border-color:#6ea8fe; box-shadow:0 8px 20px rgba(30,64,175,.12); }

/* Layout */
#content{ max-width: 900px; margin:0 auto; padding:1rem; }

/* Cards */
section{
  background:#06e039; border:1px solid #e5e7eb; border-radius:16px;
  padding:1rem 1.1rem; margin:1rem 0; box-shadow:0 10px 26px rgba(17,24,39,.07);
}
h2{ font-size:1.25rem; margin:.35rem 0 .6rem; color:#3651a7; letter-spacing:.2px; }
section h2 + hr{ border:0; height:1px; background:rgba(30,41,59,.15); margin:.25rem 0 .8rem; }

/* Accents */
#overview   { border-left:8px solid #7aa2ff; }
#stages     { border-left:8px solid #9aa5ff; }
#habits     { border-left:8px solid #67c3f3; }
#table      { border-left:8px solid #5dc1b9; }
#figure     { border-left:8px solid #c08fff; }
#upload     { border-left:8px solid #7aa2ff; }

/* Lists & table */
ul, ol { margin:.35rem 0 0; padding-left:1.1rem; }
li { margin:.3rem 0; }
table{ width:100%; border-collapse:collapse; margin:.5rem 0; }
th, td{ border:1px solid #e5e7eb; padding:.6rem; text-align:left; }
thead th{ background:#f1f5f9; }
caption{ text-align:left; font-weight:600; margin:.3rem 0; }

/* Figure block */
pre{
  background:#0f172a; color:#e2e8f0; padding:.75rem; border-radius:10px; overflow:auto;
}
.note{ background:#eef6ff; border:1px solid #d7e6ff; color:#3651a7; padding:.55rem .7rem; border-radius:10px; }
.backtotop a{ color:#3651a7; text-decoration:none; }

/* Footer */
.site-footer{
  text-align:center; color:#64748b; border-top:1px solid #e5e7eb;
  background:#fff; padding:1rem; margin-top:1rem;
}

/* Small screens */
@media (max-width:640px){
  h1{ font-size:1.5rem; }
  section{ padding:.9rem .95rem; border-radius:14px; }
}