* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, system-ui, sans-serif; background: #101418; color: #e8ecf0; }
header { padding: 12px 16px 0; position: sticky; top: 0; background: #101418; }
h1 { font-size: 1.2rem; margin: 0 0 8px; }
nav { display: flex; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #2a3138; }
nav button { background: none; border: none; color: #8a94a0; padding: 6px 10px; font-size: 1rem; border-radius: 8px; }
nav button.active { color: #fff; background: #223041; }
main { padding: 16px 16px 48px; max-width: 560px; margin: 0 auto; }
.card { background: #1a2027; border: 1px solid #2a3138; border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.card.done { opacity: .5; padding: 10px 16px; }
.card h2 { font-size: 1rem; margin: 0 0 8px; line-height: 1.35; }
.lvl { font-size: .75rem; color: #7ec8a5; background: #1c2e26; border-radius: 6px; padding: 2px 6px; margin-left: 6px; }
.how { color: #a8b2bd; font-size: .9rem; line-height: 1.5; }
.fig { color: #7ec8a5; max-width: 160px; margin: 8px 0; }
.row { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.unit { color: #a8b2bd; font-size: .9rem; }
input, textarea { background: #10161c; color: #e8ecf0; border: 1px solid #2a3138; border-radius: 8px; padding: 10px; font-size: 1rem; }
input.count { width: 80px; text-align: center; font-size: 1.2rem; }
textarea { width: 100%; }
button.log, #addmed, #saveprof { background: #2b6cb0; color: #fff; border: none; border-radius: 8px; padding: 11px 18px; font-size: 1rem; min-height: 44px; cursor: pointer; }
button.skip { background: none; border: none; color: #5a6470; margin-top: 10px; font-size: .85rem; padding: 8px 4px; min-height: 36px; cursor: pointer; }
.meta, .alldone { color: #8a94a0; }
.meta { margin-bottom: 14px; }
.alldone { font-size: 1.1rem; }
.hist { margin: 4px 0; font-size: .9rem; color: #c0c8d0; }
p { margin: 6px 0; }

/* Focused (current) mission — emphasized */
.focused .card {
  padding: 20px;
  border-color: #3a4a5c;
  background: #1d242d;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.focused .card h2 { font-size: 1.1rem; }

/* Next up — collapsible, visually secondary */
.nextup { margin: 8px 0 14px; border-top: 1px solid #2a3138; }
.nextup-header {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: none; color: #8a94a0;
  font-size: .95rem; padding: 14px 2px; min-height: 44px;
  cursor: pointer; text-align: left;
}
.nextup .chevron { display: inline-block; transition: transform .15s ease; font-size: .8rem; }
.nextup.open .chevron { transform: rotate(90deg); }
.nextup-count {
  margin-left: auto; font-size: .75rem; color: #8a94a0;
  background: #223041; border-radius: 10px; padding: 2px 9px;
}
.nextup-body { display: none; }
.nextup.open .nextup-body { display: block; }
.nextup-body .card {
  opacity: .72; background: #171d24; padding: 14px;
}
.nextup-body .card h2 { font-size: .95rem; }
.nextup-body .fig { max-width: 120px; }

.done-list { margin-top: 8px; }