*{box-sizing:border-box}
body{font-family:system-ui,Segoe UI, Roboto,sans-serif;margin:0;background: #f7f7fb;color:#222;}
.app-header{background:#1e3a8a;color: #fff;padding: 24px;text-align: center}
.card{background: #fff;margin:16px auto;padding: 16px;max-width: 10o0px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.hidden{display:none}
.row{display:flex;flex-direction:column;gap: 6px;margin-bottom:12px}
.cols{display: flex;gap: 12px;flex-wrap:wrap}
label{font-size: .9rem;color:#333}
input,select{padding:8px 10px; border:1px solid #d0d5dd; border-radius:8px;font-size: 1rem;}
.btn{padding:8px 12px; border:1px solid #1e3a8a; background: #fff;color: #1e3a8a;border-radius:8px; cursor:pointer}
.btn.primary{background: #1e3a8a;color:#fff}
.striped{width: 100%;border-collapse:collapse;margin-top: 12px;}
.striped th, .striped td{border-bottom: 1px solid #e5e7eb;padding: 8px;text-align: left}
.topbar{display: flex;justify-content: space-between;align-items: center;max-width: 1000px;margin:0 auto;padding: 12px;}
.tabs{display: flex;gap:8px;max-width: 1000px;margin: 0 auto;padding:0 16px}
.tab-btn{padding: 8px 12px; border: none;background: #e2e8f0;color:#1e203b;border-radius:8px;cursor: pointer}
.calendar-controls{display: flex;align-items: center;justify-content: center;gap: 12px}
.calendar-grid{display: grid;grid-template-columns: repeat(7,1fr);gap: 6px;margin-top: 12px}
.calendar-cell{background: #fff;border: 1px solid #e5e7eb;border-radius: 8px;padding: 8px;min-height: 90px}
.event-pill{background: block;margin-top: 6px;padding: 4px 6px;background: #e0f2de;color:#0c4a6e;border-radius: 6px;font-size:.85rem;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
.footer{text-align:center;padding:24px;color: #555}