:root { --navy:#172033; --blue:#2563eb; --muted:#667085; --bg:#f5f7fb; --card:#fff; --border:#e4e7ec; --green:#138a5b; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,Segoe UI,Arial,sans-serif; background:var(--bg); color:#182230; }
header { background:var(--navy); color:white; padding:22px max(24px, calc((100% - 1200px) / 2)); display:flex; align-items:center; justify-content:space-between; gap:16px; }
h1 { font-size:22px; margin:0; letter-spacing:0; }
header p { margin:4px 0 0; color:#d5dbea; font-size:14px; }
main { max-width:1200px; margin:28px auto; padding:0 24px; }
.notice { padding:16px 18px; background:#fff4e5; border:1px solid #fed7aa; color:#9a3412; border-radius:8px; margin-bottom:22px; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:18px; box-shadow:0 1px 2px #1018280d; }
.card.accent { border-color:#bfdbfe; background:#eff6ff; }
.card span { color:var(--muted); font-size:13px; }
.card strong { display:block; font-size:25px; margin-top:9px; line-height:1.1; }
.panel { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:20px; margin-top:18px; overflow:auto; }
h2 { font-size:17px; margin:0 0 14px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:left; padding:11px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
th { color:var(--muted); font-size:12px; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }
form { display:flex; gap:8px; margin-bottom:14px; }
label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; }
input,select { min-width:180px; border:1px solid #cbd5e1; border-radius:8px; padding:10px 12px; font:inherit; color:#182230; background:#fff; text-transform:none; }
label input[name="q"] { min-width:260px; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; background:var(--blue); border:0; color:#fff; border-radius:8px; padding:10px 15px; font:inherit; cursor:pointer; text-decoration:none; }
.button.secondary { background:#fff; color:#344054; border:1px solid #cbd5e1; }
.filters form { align-items:flex-end; flex-wrap:wrap; margin-bottom:0; }
.actions { display:flex; gap:8px; align-items:center; }
.status { display:inline-flex; align-items:center; gap:7px; background:#ecfdf3; color:#027a48; border-radius:999px; padding:7px 11px; font-size:13px; }
.dot { width:8px; height:8px; background:var(--green); border-radius:50%; }
.empty { color:var(--muted); padding:12px 0; }
@media (max-width:900px) { .cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) { header { align-items:flex-start; flex-direction:column; } label,input,select,label input[name="q"],.actions,button,.button { width:100%; min-width:100%; } .cards { grid-template-columns:1fr; } }