:root { --navy:#1b2a4a; --gold:#c8a04f; --bg:#f4f6fb; --line:#e2e6ee; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:#1f2733; }
a { color:var(--navy); }

.brand { font-size:2rem; font-weight:800; color:var(--navy); letter-spacing:-1px; margin:0; }
.brand span { color:var(--gold); }
.brand.small { font-size:1.25rem; }
.tagline { color:#5a6573; margin:.25rem 0 1.25rem; }

.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:0 6px 24px rgba(20,30,60,.05); }

/* Auth */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { width:100%; max-width:420px; text-align:center; }
.tabs { display:flex; gap:8px; margin:16px 0; }
.tab { flex:1; padding:10px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; font-weight:600; color:#5a6573; }
.tab.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.auth-form { display:flex; flex-direction:column; gap:12px; text-align:left; }

label { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:.9rem; color:#3a4150; }
input, select, textarea { padding:11px 12px; border:1px solid #ccd2de; border-radius:8px; font-size:1rem; font-family:inherit; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--navy); border-color:var(--navy); }

.btn { background:var(--navy); color:#fff; border:none; padding:12px 18px; border-radius:8px; font-weight:600; font-size:1rem; cursor:pointer; }
.btn:hover { filter:brightness(1.1); }
.btn.ghost { background:#eef1f6; color:var(--navy); }
.btn.sm { padding:6px 12px; font-size:.85rem; }

.error { background:#fdecea; color:#c0392b; border-radius:8px; padding:10px 12px; margin-bottom:12px; font-size:.9rem; }
.muted { color:#7a8493; font-size:.9rem; }

/* App */
.topbar { display:flex; align-items:center; gap:12px; padding:14px 24px; background:#fff; border-bottom:1px solid var(--line); }
.spacer { flex:1; }
.layout { display:grid; grid-template-columns: 1fr 360px; gap:20px; padding:20px; align-items:start; }
.side { display:flex; flex-direction:column; gap:20px; }
.layout h2 { margin-top:0; color:var(--navy); }

.challenge { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); }
.challenge:last-child { border-bottom:none; }
.pill { padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; text-transform:capitalize; }
.pill.pending { background:#fff4d6; color:#8a6d1a; }
.pill.accepted { background:#e3f6e8; color:#1d7a3a; }
.pill.declined { background:#fdecea; color:#c0392b; }
.pill.cancelled { background:#eee; color:#666; }

/* Levels checkboxes */
.levels { border:1px solid #ccd2de; border-radius:8px; padding:6px 12px 10px; margin:0; }
.levels legend { font-weight:600; font-size:.85rem; color:#3a4150; padding:0 6px; }
.levels .chk { flex-direction:row; align-items:center; gap:6px; display:inline-flex; margin-right:14px; font-weight:500; }
.levels .chk input { width:auto; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(20,30,60,.5); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50; }
.modal-overlay[hidden] { display:none; }
.modal-card { max-width:420px; width:100%; }

@media (max-width:820px){ .layout { grid-template-columns:1fr; } }