:root { --bg:#f5f6f8; --card:#fff; --text:#17202a; --muted:#6b7280; --accent:#18b77b; --border:#d8dee8; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, sans-serif; background:var(--bg); color:var(--text); padding:24px; }
header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
h1 { margin:0; }
a { color:#0b63ce; text-decoration:none; }
.button, button { background:var(--accent); color:white; border:0; padding:10px 16px; border-radius:8px; font-weight:700; cursor:pointer; }
.button.secondary { background:#64748b; }
.cards { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; min-width:220px; box-shadow:0 1px 3px #0001; }
.card.small { min-width:160px; }
.label { color:var(--muted); font-size:13px; margin-bottom:6px; }
.value { font-size:22px; font-weight:700; }
table { width:100%; border-collapse:collapse; background:white; border-radius:12px; overflow:hidden; }
th, td { padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
th { background:#eef2f7; }
.amount { text-align:right; white-space:nowrap; }
.form { background:white; border:1px solid var(--border); border-radius:12px; padding:20px; max-width:720px; }
label { display:block; margin-bottom:14px; font-weight:700; }
input, select, textarea { width:100%; margin-top:6px; padding:10px; border:1px solid var(--border); border-radius:8px; font-size:15px; }
.error { background:#fee2e2; border:1px solid #fca5a5; color:#991b1b; padding:12px; border-radius:8px; margin-bottom:16px; }
@media (max-width: 760px) { body { padding:12px; } header { align-items:flex-start; flex-direction:column; } table { font-size:13px; } }

.filters {
    background:white;
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px;
    margin-bottom:24px;
    display:grid;
    grid-template-columns:repeat(4, minmax(160px, 1fr));
    gap:12px;
    align-items:end;
}
.filters label { margin-bottom:0; }
.filter-actions { display:flex; gap:8px; align-items:center; }
@media (max-width: 900px) { .filters { grid-template-columns:1fr; } }


.period-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.period-help {
    background:#f8fafc;
    border:1px dashed var(--border);
    border-radius:10px;
    padding:12px;
    margin:4px 0 16px 0;
}
.period-help-title {
    font-weight:700;
    margin-bottom:8px;
}
.period-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.button.light {
    background:#e2e8f0;
    color:#17202a;
}
.muted {
    color:var(--muted);
    font-size:13px;
}
@media (max-width: 760px) { .period-row { grid-template-columns:1fr; } }