:root { --ink:#1a202c; --muted:#5b6472; --line:#e2e8f0; --bg:#f7fafc; --card:#fff; --brand:#1a56db; --brand-dark:#123f9e; --green:#047857; --amber:#92400e; --red:#b91c1c; --chip:#edf2f7; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.topbar { background:#fff; border-bottom:1px solid var(--line); position: sticky; top:0; z-index:10; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap; }
.brand { font-weight:700; color:var(--ink); text-decoration:none; font-size:1.05rem; }
.topbar nav { display:flex; gap:14px; flex-wrap:wrap; }
.topbar nav a { color:var(--muted); text-decoration:none; font-size:.95rem; }
.topbar nav a:hover { color:var(--brand); }
.hero { padding: 48px 16px 24px; text-align:center; }
.badge { display:inline-block; background:#e0f2fe; color:#075985; border-radius:999px; padding:4px 14px; font-size:.85rem; font-weight:600; }
.hero h1 { font-size:2.4rem; line-height:1.15; margin:16px 0 12px; }
.lede { font-size:1.1rem; color:var(--muted); max-width:720px; margin:0 auto 20px; }
.cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.fine { color:var(--muted); font-size:.88rem; }
.section { padding: 28px 16px; }
.section h2 { font-size:1.6rem; margin:0 0 6px; }
.sub { color:var(--muted); margin:0 0 18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:16px; }
.btn { display:inline-block; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px; padding:9px 16px; font-size:.95rem; cursor:pointer; text-decoration:none; }
.btn:hover { border-color:var(--brand); color:var(--brand); }
.btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.primary:hover { background:var(--brand-dark); color:#fff; }
.btn.danger { border-color:#fecaca; color:var(--red); }
.btn.danger:hover { border-color:var(--red); }
.btn.small { padding:3px 10px; font-size:.85rem; margin-left:8px; vertical-align:middle; }
.btn.armed { background:var(--red); border-color:var(--red); color:#fff; }
.stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin: 16px 0 6px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; }
.stat .num { display:block; font-size:1.7rem; font-weight:700; }
.stat .lbl { color:var(--muted); font-size:.85rem; }
.notice { background:#fef3c7; border:1px solid #fcd34d; color:#78350f; border-radius:8px; padding:10px 14px; margin:12px 0; }
.form-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.form-grid .full { grid-column: 1 / -1; }
label { display:block; font-size:.9rem; font-weight:600; }
label input, label select, label textarea { display:block; width:100%; margin-top:4px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font: inherit; font-weight:400; background:#fff; }
label textarea { resize: vertical; }
.form-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.filters { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin: 16px 0; }
.filter-group { display:flex; gap:6px; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 12px; cursor:pointer; font-size:.88rem; }
.chip.active { background:var(--brand); border-color:var(--brand); color:#fff; }
#searchBox { flex:1; min-width:200px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font: inherit; }
.sort-label { font-size:.88rem; color:var(--muted); display:flex; gap:6px; align-items:center; }
.sort-label select { padding:7px 8px; border:1px solid var(--line); border-radius:8px; font: inherit; }
.app-list { display:grid; gap:12px; }
.app-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
.app-card h3 { margin:0 0 2px; font-size:1.1rem; }
.app-card .meta { color:var(--muted); font-size:.9rem; margin:0 0 8px; }
.app-card .notes { margin:6px 0; white-space:pre-wrap; }
.status-tag { display:inline-block; border-radius:999px; padding:2px 10px; font-size:.8rem; font-weight:600; margin-left:8px; vertical-align:middle; }
.status-Wishlist { background:#e0e7ff; color:#3730a3; }
.status-Applied { background:#dbeafe; color:#1e40af; }
.status-Interview { background:#fef3c7; color:#92400e; }
.status-Offer { background:#d1fae5; color:#065f46; }
.status-Rejected { background:#fee2e2; color:#991b1b; }
.app-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.app-actions .btn { padding:5px 12px; font-size:.88rem; }
.empty { color:var(--muted); text-align:center; padding: 24px 0; }
.tailor-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.tailor-grid .full { grid-column: 1 / -1; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin: 8px 0 16px; }
.kw { background:var(--chip); border-radius:999px; padding:3px 10px; font-size:.85rem; }
.kw.miss { background:#fee2e2; color:#991b1b; }
.kw.hit { background:#d1fae5; color:#065f46; }
.output { background:#f8fafc; border:1px solid var(--line); border-radius:8px; padding:14px; white-space:pre-wrap; font-family: inherit; font-size:.95rem; }
.steps { padding-left:20px; }
.steps li { margin-bottom:10px; }
.faq h3 { margin:20px 0 4px; font-size:1.05rem; }
.faq p { margin:0 0 8px; color:var(--muted); }
.donate-card { text-align:center; }
.donate-card .btn { margin: 8px 0; }
.retention-label { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-weight:600; }
.retention-label select { width:auto; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font: inherit; }
footer { border-top:1px solid var(--line); background:#fff; padding:24px 0; margin-top:32px; color:var(--muted); font-size:.9rem; }
footer a { color:var(--brand); }
@media (max-width: 640px) {
  .hero h1 { font-size:1.8rem; }
  .form-grid, .tailor-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}