* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f3f4f6; color: #1f2937; line-height: 1.6; padding: 12px; }
.container { max-width: 1000px; margin: 0 auto; background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
h1 { font-size: 1.4rem; margin-bottom: 16px; color: #111827; }
h2 { font-size: 1.15rem; margin: 20px 0 10px; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
.btn {
    display: inline-block; padding: 10px 18px; border-radius: 6px; border: none;
    background: #2563eb; color: #fff !important; font-size: .95rem; cursor: pointer;
    text-decoration: none !important;
}
.btn:hover { background: #1d4ed8; }
.btn.small { padding: 6px 12px; font-size: .82rem; }
.btn.danger { background: #dc2626; }
.btn.danger:hover { background: #b91c1c; }

.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
.table-wrapper table { margin: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
th { background: #f9fafb; font-weight: 600; font-size: .82rem; color: #6b7280; text-transform: uppercase; }
tr:hover { background: #f9fafb; }
.actions { white-space: nowrap; }
tfoot td { background: #f9fafb; font-weight: 600; border-top: 2px solid #d1d5db; }

form { margin: 16px 0; }
label { display: block; margin-bottom: 14px; font-weight: 500; }
input, select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 1rem; margin-top: 4px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
textarea { resize: vertical; }
.summary { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.card {
    flex: 1; min-width: 140px; padding: 14px; border-radius: 8px;
    background: #f0fdf4; border: 1px solid #bbf7d0; font-size: .9rem;
}
.card.deaths { background: #fef2f2; border-color: #fecaca; }
.card.remaining { background: #f0f9ff; border-color: #bae6fd; }
.card.total { background: #f5f3ff; border-color: #ddd6fe; }
.card strong { font-size: 1.1rem; display: block; margin-top: 4px; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.header-row h1, .header-row h2 { margin: 0; }
.empty { text-align: center; padding: 40px 0; color: #9ca3af; }
.project-form { background: #f9fafb; border-radius: 8px; padding: 16px; border: 1px solid #e5e7eb; }
.dashboard { margin: 16px 0; }
.dash-section { margin-bottom: 16px; }
.dash-section h3 { font-size: .95rem; margin-bottom: 8px; color: #374151; }

@media (max-width: 600px) {
    body { padding: 8px; }
    .container { padding: 14px; border-radius: 8px; }
    h1 { font-size: 1.2rem; }
    .btn { padding: 12px 20px; font-size: 1rem; width: 100%; text-align: center; }
    .btn.small { padding: 8px 14px; font-size: .9rem; width: auto; }
    .header-row { flex-direction: column; align-items: stretch; }
    .header-row .btn { width: 100%; text-align: center; }
    .summary { flex-direction: column; gap: 8px; }
    .card { min-width: auto; }
    th, td { padding: 8px 6px; font-size: .85rem; }
    .project-form { padding: 12px; }
    label { margin-bottom: 12px; }
    input, select, textarea { padding: 12px; font-size: 1rem; }
}