:root {
  --bg: linear-gradient(160deg, #eef7ff, #f5fbff 60%, #ffffff);
  --primary: #0b5d8f;
  --accent: #1d9a6c;
  --text: #102638;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
header { padding: 16px; background: #fff; position: sticky; top: 0; box-shadow: 0 4px 20px rgba(16,38,56,.08); }
h1 { margin: 0 0 10px; font-size: 1.4rem; }
nav { display: flex; gap: 8px; }
button { border: 0; padding: 10px 12px; border-radius: 10px; background: var(--primary); color: #fff; }
main { padding: 16px; display: grid; gap: 16px; }
.card { background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 8px 18px rgba(16,38,56,.06); }
.window { font-weight: 700; }
.check { background: var(--accent); }
@media (min-width: 900px) { main { grid-template-columns: 320px 1fr; } }