:root { --brand:#00008B; --ink:#111; --bg:#fff; --muted:#6b7280; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--ink); }
.container { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
h1,h2,h3 { margin: 0 0 12px; }
p { line-height: 1.65; margin: 0 0 12px; }
.btn { display:inline-block; padding:12px 18px; border-radius:8px; text-decoration:none; background:var(--brand); color:#fff; font-weight:600; }
.input { width:100%; padding:12px; border:1px solid #d1d5db; border-radius:8px; }
.row { display:flex; gap:12px; flex-wrap: wrap; }
.col { flex:1; min-width: 220px; }
.nav { position: sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #eee; padding:10px 16px; }
.nav a { margin-right: 10px; text-decoration: none; color: var(--ink); }
.progress { height:10px; background:#f3f4f6; border-radius:8px; overflow:hidden; margin: 10px 0 20px; }
.progress > div { height:100%; background: var(--brand); width: 0%; transition: width .3s; }
.week-grid { display:grid; grid-template-columns: repeat(1, 1fr); gap:8px; }
.day { border:1px solid #e5e7eb; border-radius:8px; padding:10px; min-height:120px; }
.day h4 { margin:0 0 6px; font-size: 14px; }
.notice { background:#f8fafc; border:1px solid #e5e7eb; padding:10px; border-radius:8px; }
label { display:block; font-weight:600; margin:8px 0 4px; }
small.muted { color: var(--muted); }
.table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
  font-size: 14px;
}
.table th, .table td {
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  vertical-align: top;
}
.table th {
  text-align: left;
  background: #f8fafc;
  font-weight: 600;
}
.day details {
  margin-top: 8px;
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 12px;
  margin-left: 6px;
}

/* Mobile-first improvements */
@media (max-width: 720px) {
  .week-grid {
    display: grid;
    grid-template-columns: 1fr;   /* stack days */
    gap: 12px;
  }
  .day {
    min-height: auto;
    padding: 12px;
  }
  .day h4 {
    margin-bottom: 8px;
    font-size: 15px;
  }
  .day form .btn {
    width: 100%;                  /* easy tap target */
    margin-top: 8px;
  }
  .table {                        /* denser tables on mobile */
    font-size: 13px;
  }
  .badge {
    display: inline-block;
    margin-top: 2px;
  }
}

/* Optional: highlight today */
.day.today {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(0,0,139,0.08);
}