:root { --slate:#0f172a; --emerald:#047857; --emerald2:#10b981; --bg:#f4f6fb; --border:#e2e8f0; --muted:#64748b; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; color:var(--slate); background:var(--bg); }
a { color: var(--emerald); text-decoration:none; }
.topbar { display:flex; align-items:center; gap:18px; padding:12px 20px; background:var(--slate); color:#fff; }
.topbar .brand { color:#fff; font-weight:800; font-size:18px; }
.topbar nav a { color:#cbd5e1; margin-right:14px; font-weight:600; }
.topbar nav a.active, .topbar nav a:hover { color:#fff; }
.topbar .spacer { flex:1; }
.topbar .who { color:#e2e8f0; font-size:14px; }
.topbar .logout { color:#fca5a5; margin-left:14px; font-weight:600; }
.wrap { max-width:1000px; margin:0 auto; padding:28px 20px 64px; }
h1 { font-size:26px; margin:0 0 20px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.stat { background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:0 6px 20px rgba(20,40,80,.05); }
.stat .n { display:block; font-size:30px; font-weight:800; color:var(--slate); }
.stat .l { color:var(--muted); font-size:14px; }
.btn, button { background:var(--emerald); color:#fff; border:0; border-radius:10px; padding:11px 18px; font-weight:700; cursor:pointer; }
.btn:hover, button:hover { background:#065f46; }
.auth { max-width:380px; margin:8vh auto 0; text-align:center; }
.auth .sub { color:var(--muted); margin-top:-8px; }
.auth .card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px; text-align:left; box-shadow:0 10px 30px rgba(20,40,80,.06); }
.auth label { display:block; margin-bottom:14px; font-weight:600; font-size:14px; }
.auth input { width:100%; padding:11px; margin-top:6px; border:1px solid var(--border); border-radius:10px; }
.auth button { width:100%; margin-top:6px; }
.error { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; border-radius:10px; padding:10px 12px; margin-bottom:14px; }
.search { display:flex; gap:8px; margin-bottom:16px; }
.search input { flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; }
.grid { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.grid th, .grid td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); font-size:14px; }
.grid th { background:#f8fafc; color:var(--muted); font-weight:600; }
.grid tr:last-child td { border-bottom:0; }
.empty { text-align:center; color:var(--muted); padding:26px; }
.pill { font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:#ecfdf5; color:var(--emerald); }
.pill.inactive, .pill.exited { background:#f1f5f9; color:var(--muted); }

/* --- Deliveries grade pills --- */
.pill.gA { background:#ecfdf5; color:#047857; }
.pill.gB { background:#fef9c3; color:#854d0e; }
.pill.gC { background:#ffedd5; color:#9a3412; }
.pill.greject { background:#fee2e2; color:#b91c1c; }

/* --- About page --- */
.about-hero { display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.about-hero .about-logo { width:96px; height:96px; object-fit:contain; border-radius:16px; background:#fff; border:1px solid var(--border); padding:8px; }
.about-hero h1 { margin:0 0 6px; font-size:24px; }
.about-hero .lead { margin:0; color:var(--muted); max-width:640px; }
.contact-strip { display:flex; flex-wrap:wrap; gap:8px 20px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 18px; font-size:14px; color:#334155; margin-bottom:26px; }
.section-h { font-size:20px; margin:8px 0 14px; }
.board-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-bottom:26px; }
.board-card { background:#fff; border:1px solid var(--border); border-left:4px solid var(--emerald2); border-radius:12px; padding:12px 14px; }
.board-card .b-role { font-size:12px; font-weight:700; color:var(--emerald); text-transform:uppercase; letter-spacing:.03em; }
.board-card .b-name { font-weight:600; margin-top:3px; }
.board-figure { margin:0; text-align:center; }
.board-figure img { max-width:100%; width:760px; border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 30px rgba(20,40,80,.08); }
.board-figure figcaption { color:var(--muted); font-size:13px; margin-top:10px; }