:root {
  --bg:#fafafa; --card:#ffffff; --border:#e5e7eb; --text:#1f2937;
  --muted:#6b7280; --brand:#4b5563;
}


.grid { display:grid; gap:16px; }
.grid-3 { grid-template-columns:repeat(1,1fr); }
@media(min-width:768px){ .grid-3{grid-template-columns:repeat(3,1fr);} }

.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:16px;
}

label { display:block;}
input[type="date"], input[type="number"] {
  width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:12px; background:#fff;
}
select{width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:12px; background:#fff;}
.select_w{position: relative;}
.select_w::after{content: "";
    position: absolute;
    top: 60%;
    right: 16px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);}
.kpi { display:flex; flex-direction:column; gap:2px; }
.kpi .sub { font-size:12px; color:var(--muted); }
.kpi .val { font-size:22px; font-weight:700; }

.muted { color:var(--muted); }
.total { font-size:28px; font-weight:800; margin-top:4px; }

.table-wrap { overflow-x:auto; margin-top:18px; }
table {
  width:100%; border-collapse:collapse; font-size:14px;
  background:#fff; border:1px solid var(--border);
}
th, td {
  border:1px solid var(--border); padding:10px 12px;
  text-align:right; white-space:nowrap;
}
th:first-child, td:first-child { text-align:left; }
thead th { background:#f3f4f6; font-weight:600; }

.note { font-size:12px; color:var(--muted); }

.pill {
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#eef2ff; color:#4338ca; font-size:12px;
  font-weight:600; margin-left:6px;
}

details {
  border:1px solid var(--border); background:#fff;
  border-radius:12px; padding:12px 14px;
}
summary { cursor:pointer; font-weight:600; }

.footer { margin-top:20px; font-size:13px; color:var(--muted); }