:root {
  --ink: #1b2a33; --muted: #5d6d77; --line: #d5dde2; --bg: #eef2f4; --panel: #ffffff;
  --accent: #1f6f78; --accent-dark: #165359; --danger: #b3382c; --ok: #1d7a46;
}
* { box-sizing: border-box; }
body { margin: 0; 
  font: 16px/1.5 "Segoe UI", system-ui, sans-serif; 
  color: var(--ink); 
  background: var(--bg); 
}

.top { 
  background: var(--accent-dark); 
  color: #fff; 
}
.top-in { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 0 20px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 16px; 
  flex-wrap: wrap; 
}
.brand { 
  font: 600 1.25rem/1 Georgia, "Times New Roman", serif; 
  padding: 16px 0; 
}
.top nav { 
  display: flex; 
  gap: 4px; 
}
.top nav a { 
  color: #cfe5e7; 
  text-decoration: none; 
  padding: 16px 14px; 
  border-bottom: 3px solid transparent; 
}
.top nav a:hover { 
  color: #fff; 
}
.top nav a[aria-current="page"] { 
  color: #fff; 
  border-bottom-color: #fff; 
  font-weight: 600; 
}

.wrap { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 28px 20px 60px; 
}
.wrap.narrow { 
  max-width: 580px; 
}
h1 { 
  font: 600 1.7rem/1.2 Georgia, "Times New Roman", serif; 
  margin: 0 0 4px; 
}
.sub { 
  color: var(--muted); 
  margin: 0 0 22px; 
}
.panel { 
  background: var(--panel); 
  border: 1px solid var(--line); 
  border-radius: 8px; 
  padding: 22px; 
}

label { 
  display: block; 
  font-weight: 600; 
  font-size: .9rem; 
  margin: 14px 0 4px; 
}
label:first-of-type { 
  margin-top: 0; 
}
input[type=text], 
input[type=email], 
input[type=tel], 
input[type=date], 
input[type=search] {
  width: 100%; 
  padding: 9px 10px; 
  font: inherit; 
  border: 1px solid var(--line); 
  border-radius: 6px; 
  background: #fff; 
  color: var(--ink);
}
input:focus, 
button:focus-visible, 
a:focus-visible { 
  outline: 3px solid #9fd0d5; 
  outline-offset: 1px; 
}
input.bad { 
  border-color: var(--danger); 
}
.err { 
  color: var(--danger); 
  font-size: .85rem; 
  margin: 4px 0 0; 
}
.hint { 
  color: var(--muted); 
  font-size: .8rem; 
  font-weight: 400; 
}

.btns { 
  display: flex; 
  gap: 10px; 
  margin-top: 20px; 
}
button, .btn { 
  font: inherit; 
  font-weight: 600; 
  padding: 9px 16px; 
  border-radius: 6px; 
  border: 1px solid var(--accent); 
  background: var(--accent); 
  color: #fff; 
  cursor: pointer; 
  text-decoration: none; 
  display: inline-block; 
}
button:hover, .btn:hover { 
  background: var(--accent-dark); 
}
.btn.ghost, button.ghost { 
  background: #fff; 
  color: var(--accent); 
}
.btn.ghost:hover, button.ghost:hover { 
  background: #e6f1f2; 
}
button.danger { 
  background: #fff; 
  color: var(--danger); 
  border-color: var(--danger); 
  padding: 3px 10px; 
  font-size: .85rem; 
}
button.danger:hover { 
  background: #fbeceb; 
}

.flash { 
  background: #e4f4ea; 
  color: var(--ok); 
  border: 1px solid #b7dfc6; 
  padding: 10px 14px; 
  border-radius: 6px; 
  margin-bottom: 16px; 
}
.flash.error { 
  background: #fbeceb; 
  color: var(--danger); 
  border-color: #efc3bf; 
}

.toolbar { 
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap; 
  margin-bottom: 16px; 
}
.toolbar form { 
  display: flex; 
  gap: 10px; 
  flex: 1; 
  min-width: 260px; 
}
.tablewrap { 
  overflow-x: auto; 
}
table { 
  width: 100%; 
  border-collapse: collapse; 
  font-size: .92rem; 
}
th, td { 
  text-align: left; 
  padding: 10px 8px; 
  border-bottom: 1px solid var(--line); 
  vertical-align: top; 
}
th { 
  font-size: .82rem; 
  color: var(--muted); 
  font-weight: 600; 
}
td.act { 
  white-space: nowrap; 
}
td.act form { 
  display: inline; 
  margin-left: 8px; 
}
.empty { 
  padding: 28px 8px; 
  color: var(--muted); 
}
.count { 
  color: var(--muted); 
  font-size: .9rem; 
  margin: 0 0 10px; 
}