body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin: 0; color: #222; background: #f7f9fc; }
.container { max-width: 920px; margin: 0 auto; padding: 24px; }
.hero { background: linear-gradient(90deg,#0ea5a4,#6366f1); color:#fff; padding: 36px 0; margin-bottom: 24px; }
.hero h1 { margin: 0 0 8px; font-size: 28px; }
.cards { display: flex; gap: 20px; flex-wrap: wrap; }
.card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 6px 20px rgba(16,24,40,0.08); flex: 1; min-width: 260px; }
.btn { display: inline-block; margin-top: 12px; padding: 10px 16px; background: #2563eb; color:#fff; text-decoration:none; border-radius:6px; }
.btn.disabled { background: #94a3b8; cursor: not-allowed; pointer-events: none; }
.notes { margin-top: 20px; }
.footer { text-align: center; padding: 20px 0; color: #64748b; font-size: 14px; }