* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f4f6f8; color: #1c2733; line-height: 1.45;
}
.topbar {
  background: #0f3d2e; color: #fff; padding: 0.7rem 1rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.topbar .brand { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 0.6rem; }
.logos { display: inline-flex; gap: 0.35rem; background: #000; padding: 0.2rem 0.35rem; border-radius: 8px; }
.logos img { height: 32px; width: 32px; object-fit: cover; border-radius: 5px; display: block; }
.login-logos { display: flex; gap: 0.8rem; justify-content: center; margin-bottom: 1rem; }
.login-logos img { height: 84px; width: 84px; object-fit: cover; border-radius: 14px; }
.topbar nav { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.topbar a { color: #cfe8dc; text-decoration: none; font-size: 0.9rem; }
.topbar a:hover { color: #fff; }
.topbar .who { font-size: 0.85rem; color: #9fc3b2; }
main { max-width: 960px; margin: 0 auto; padding: 1rem; }
.card {
  background: #fff; border-radius: 12px; padding: 1.2rem;
  margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card.narrow { max-width: 560px; }
h1 { font-size: 1.35rem; margin: 0 0 0.8rem; }
h1 .sub { font-size: 1rem; font-weight: 400; color: #5b6b7b; }
h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
h3 { font-size: 1rem; margin: 1.1rem 0 0.4rem; }
.rowhead { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem; }
.rowhead h1 { margin: 0; }
label { display: block; margin: 0.6rem 0; font-size: 0.95rem; }
input[type="text"], input[type="password"], input[type="number"], input[type="time"] {
  width: 100%; padding: 0.6rem; font-size: 1rem; margin-top: 0.25rem;
  border: 1px solid #c9d4dd; border-radius: 8px;
}
.btn {
  display: inline-block; padding: 0.55rem 1rem; border-radius: 8px;
  border: 1px solid #c9d4dd; background: #fff; color: #1c2733;
  text-decoration: none; font-size: 0.95rem; cursor: pointer; margin: 0.15rem 0.15rem 0.15rem 0;
}
.btn:hover { background: #eef2f5; }
.btn.primary { background: #0f7a4d; border-color: #0f7a4d; color: #fff; }
.btn.primary:hover { background: #0b5f3c; }
.btn.danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.btn.danger:hover { background: #a93226; }
.btn.big { font-size: 1.25rem; padding: 0.9rem 2rem; width: 100%; text-align: center; }
.btn.small { font-size: 0.8rem; padding: 0.35rem 0.6rem; }
.status { font-size: 1.05rem; font-weight: 600; }
.status.in { color: #0f7a4d; }
.status.out { color: #5b6b7b; }
table { width: 100%; border-collapse: collapse; margin: 0.6rem 0; font-size: 0.92rem; }
th, td { padding: 0.5rem 0.4rem; border-bottom: 1px solid #e3e9ee; text-align: left; }
th { color: #5b6b7b; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; }
table.grid td, table.grid th { text-align: center; }
table.grid td:first-child, table.grid th:first-child { text-align: left; }
td.tot { background: #f0f7f3; }
table.grid th.in-period, table.grid td.in-period { background: #d9edde; }
tr.grand td { background: #e6f2ec; border-top: 2px solid #0f7a4d; }
tr.inactive td { color: #9aa7b3; }
.dnum { font-weight: 400; }
td a { color: #0f7a4d; }
.scrollx { overflow-x: auto; }
.seg { display: flex; gap: 0.5rem; align-items: center; margin: 0.4rem 0; flex-wrap: wrap; }
.seg input[type="time"] { width: auto; flex: 1; min-width: 120px; margin-top: 0; }
.seg .del { font-size: 0.85rem; color: #c0392b; white-space: nowrap; }
.totals { background: #f0f7f3; border-radius: 8px; padding: 0.7rem; margin-top: 0.8rem; }
.muted { color: #7b8a99; font-size: 0.88rem; }
.flash p {
  background: #fff8e1; border: 1px solid #f0d86e; border-radius: 8px;
  padding: 0.6rem 0.9rem; margin: 0 0 0.6rem;
}
form.inline { display: inline; }
form.inline input { width: 130px; display: inline-block; margin: 0 0.2rem 0 0; padding: 0.35rem; font-size: 0.85rem; }
td.actions { white-space: nowrap; }
@media (max-width: 600px) {
  main { padding: 0.6rem; }
  .card { padding: 1rem; }
  td.actions .btn { margin-bottom: 0.3rem; }
}