:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f3f5f2;
  color: #17231d;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 32px; color: #fff;
  background: linear-gradient(120deg, #123c2b, #21634a);
}
h1 { margin: 4px 0 0; font-size: 28px; }
.eyebrow { margin: 0; color: #bfe1cd; font-size: 12px; letter-spacing: 0.16em; }
button, select, input {
  border: 1px solid #a9b8af; border-radius: 8px; background: #fff;
  padding: 9px 13px; color: #173b2d; font: inherit;
}
button { cursor: pointer; }
header button { border-color: #8ac2a5; background: transparent; color: #fff; }
main { padding: 20px 32px 32px; }
.admin-panel {
  margin-bottom: 20px; padding: 20px; border: 1px solid #d7ddd9;
  border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgb(27 55 42 / 7%);
}
.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.section-heading h2 { margin: 3px 0 16px; }
.eyebrow.dark { color: #397257; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.admin-card { display: grid; align-content: start; gap: 10px; padding: 15px; background: #f5faf7; border-radius: 10px; }
.admin-card h3 { margin: 0 0 4px; font-size: 16px; }
.admin-card label { display: grid; gap: 5px; color: #53655b; font-size: 13px; }
.admin-card .checkbox-row { display: flex; align-items: center; }
.checkbox-row input { width: auto; }
.admin-card select[multiple] { min-height: 124px; }
.table-wrap { margin-top: 16px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px; border-top: 1px solid #e5eae7; text-align: left; vertical-align: top; }
th { color: #53655b; }
#admin-message { margin: 0; color: #58665e; }
.filters { display: flex; gap: 24px; align-items: center; margin-bottom: 16px; }
.filters label { display: flex; gap: 8px; align-items: center; }
#system-message { color: #58665e; }
.workspace {
  display: grid; grid-template-columns: minmax(280px, 36%) 1fr; gap: 16px;
  min-height: 650px;
}
.mail-list, .mail-detail {
  border: 1px solid #d7ddd9; border-radius: 12px; background: #fff;
  box-shadow: 0 8px 24px rgb(27 55 42 / 7%); overflow: hidden;
}
.mail-item {
  width: 100%; padding: 16px; border: 0; border-bottom: 1px solid #edf0ee;
  border-radius: 0; text-align: left; color: inherit;
}
.mail-item:hover, .mail-item.active { background: #edf7f1; }
.mail-item strong, .mail-item span { display: block; }
.mail-item span { margin-top: 5px; color: #66746c; font-size: 13px; }
.mail-detail { padding: 28px; }
.mail-detail h2 { margin-top: 0; }
.meta { display: grid; grid-template-columns: 130px 1fr; gap: 7px 14px; }
.meta dt { color: #68766e; }
.meta dd { margin: 0; overflow-wrap: anywhere; }
.candidate {
  margin-top: 12px; padding: 14px; border-left: 4px solid #3b8a65; background: #f5faf7;
}
.candidate-actions { display: flex; gap: 8px; margin-top: 12px; }
.empty-state { display: grid; min-height: 580px; place-items: center; color: #718078; }
.error { color: #a12c2c; }
@media (max-width: 820px) {
  header, main { padding-left: 18px; padding-right: 18px; }
  .workspace { grid-template-columns: 1fr; }
  .mail-list { max-height: 340px; overflow: auto; }
  .section-heading { display: block; }
}