:root { --accent:#2563eb; --bg:#f8fafc; --card:#fff; --text:#1f2937; --muted:#6b7280; --line:#e5e7eb; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin:0; background:var(--bg); color:var(--text); }
header { background:linear-gradient(90deg,#1e40af,var(--accent)); color:#fff; padding:2rem 1rem; text-align:center; }
header h1 { margin:0; font-size:2rem; }
header p { margin:.5rem 0 0; opacity:.9; }
main { max-width:960px; margin:0 auto; padding:1.5rem 1rem; }
.grid { display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.card { background:var(--card); border-radius:.75rem; padding:1.25rem; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.card h2 { margin:0 0 1rem; font-size:1.1rem; color:var(--accent); }
.big { font-size:2.5rem; font-weight:700; letter-spacing:-.02em; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.muted { color:var(--muted); font-size:.9rem; }
table { width:100%; border-collapse:collapse; }
th, td { padding:.35rem; text-align:center; }
th { color:var(--muted); font-size:.8rem; }
td { border-radius:.35rem; }
td.today { background:var(--accent); color:#fff; font-weight:700; }
footer { text-align:center; color:var(--muted); padding:2rem 1rem; font-size:.85rem; }
.clock { display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--line); }
.clock:last-child { border-bottom:none; }