* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 16px; color: #111; background: #f4f6f8; }
#unlock { max-width: 420px; margin: 18vh auto 0; padding: 0 20px; }
#unlock h1 { margin: 0 0 6px; }
#unlock input { width: 100%; font-size: 18px; padding: 12px; margin: 8px 0 12px; border: 1px solid #889; border-radius: 8px; }
button { font-size: 16px; padding: 10px 16px; border: 0; border-radius: 8px; background: #1f2d3d; color: #fff; }
header { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top)); background: #1f2d3d; color: #fff; }
header .brand { font-weight: bold; }
header #date { flex: 1; opacity: 0.85; }
header button { background: #3c5068; padding: 6px 12px; }
nav { display: flex; overflow-x: auto; background: #fff; border-bottom: 1px solid #ccd; }
nav a { flex: 1; text-align: center; padding: 12px 8px; color: #1f2d3d; text-decoration: none; white-space: nowrap; font-size: 14px; }
nav a.active { border-bottom: 3px solid #1f2d3d; font-weight: bold; }
main { padding: 12px 14px 40px; max-width: 760px; margin: 0 auto; }
h2 { font-size: 20px; margin: 8px 0; }
h3 { font-size: 15px; margin: 16px 0 6px; color: #333; text-transform: uppercase; letter-spacing: 0.03em; }
.items { list-style: none; margin: 0; padding: 0; }
.items li { background: #fff; border: 1px solid #dde; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.items li strong { display: block; }
.items li .sub { display: block; color: #445; font-size: 14px; margin-top: 2px; }
.items li.empty { color: #667; }
.banner { padding: 12px; border-radius: 10px; margin: 8px 0 12px; font-weight: bold; }
.banner.red { background: #fdecee; border: 2px solid #b00020; color: #7a0016; }
.banner.grey { background: #eceff3; border: 2px solid #8a94a3; color: #333; }
.note { color: #556; font-size: 14px; }
.footer { margin-top: 24px; font-size: 12px; color: #667; border-top: 1px solid #ccd; padding-top: 8px; }