:root {
  --bg: #f5f6f2;
  --surface: #ffffff;
  --ink: #1d2320;
  --muted: #6b726d;
  --line: #dfe3dc;
  --green: #2f7a4f;
  --green-d: #235c3b;
  --amber: #d29a2b;
  --red: #c44d3a;
  --blue: #3a6ea5;
  --shadow: 0 10px 30px rgba(30, 40, 34, 0.08);
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  letter-spacing: 0;
}

body { font-size: 15px; }

button, input, select, textarea { font: inherit; }

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

.hidden { display: none !important; }

#app { min-height: 100vh; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(160deg, rgba(47, 122, 79, 0.10), rgba(58, 110, 165, 0.06)),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 34px;
  box-shadow: var(--shadow);
}
.login-card h1 { font-size: 26px; margin: 0 0 6px; }
.login-card .sub { color: var(--muted); margin: 0 0 24px; line-height: 1.6; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
}
.field textarea { resize: vertical; min-height: 74px; }
.readonly-field {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f6f8f4;
  color: var(--muted);
}
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 18px; }
.check-field { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check-field input { width: 16px; height: 16px; }
.batch-radio-field { min-width: 260px; }
.range-field { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.range-field input[type="range"] { flex: 1; accent-color: var(--green); }
.range-value { min-width: 36px; color: var(--green-d); font-weight: 700; }
.radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff;
  font-size: 13px;
}
.radio-option:has(input:checked) {
  border-color: var(--green);
  background: #e8f1eb;
  color: var(--green-d);
  font-weight: 600;
}
.radio-option input { margin: 0; accent-color: var(--green); }
.activity-note { width: 100%; min-height: 112px !important; resize: vertical; }
.btn {
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  padding: 11px 16px;
  font-weight: 600;
}
.btn:hover { background: var(--green-d); }
.btn.secondary { background: #eef1ec; color: var(--ink); }
.btn.danger { background: var(--red); }
.btn.block { width: 100%; }
.login-hint { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.err-banner {
  background: #fbeae6;
  border: 1px solid #f0cbc2;
  color: #a03a2a;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.success-banner {
  background: #e6f2ea;
  border: 1px solid #bfe0cd;
  color: #2f6b47;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px;
  flex: 0 0 236px;
  background: #15241b;
  color: #dce8df;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 2px 6px 20px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #3f9b68, #2f7a4f);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px;
}
.brand-text b { display: block; font-size: 15px; }
.brand-text span { font-size: 12px; opacity: 0.7; }
.nav { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.nav button {
  text-align: left; background: transparent; border: 0; color: #c7d6cb;
  padding: 11px 12px; border-radius: 8px; font-size: 14px; display: flex; align-items: center; gap: 10px;
}
.nav button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav button.active { background: rgba(255,255,255,0.12); color: #fff; font-weight: 700; }
.nav .ic { width: 20px; text-align: center; opacity: 0.9; font-size: 15px; }
.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 14px; font-size: 12px; }
.sidebar-foot .role-chip {
  display: inline-block; background: rgba(255,255,255,0.12); border-radius: 999px;
  padding: 3px 10px; margin-bottom: 10px; font-weight: 600;
}
.account-scope { color: #a9c8b6; margin-top: 4px; line-height: 1.45; }
.logout { width: 100%; margin-top: 10px; background: rgba(255,255,255,0.08); border: 0; color: #fff; border-radius: 8px; padding: 10px; }

.main { flex: 1; min-width: 0; padding: 28px clamp(18px, 4vw, 42px) 60px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head h1 { font-size: 28px; margin: 0 0 6px; }
.page-head p { margin: 0; color: var(--muted); }
.filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-row select, .filter-row input { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: #fff; }

/* Dashboard */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px;
}
.stat .num { font-size: 30px; font-weight: 700; margin-top: 6px; }
.stat .lbl { color: var(--muted); font-size: 13px; }
.stat.accent { background: #17291d; border-color: #17291d; color: #fff; }
.stat.accent .lbl { color: #a9c8b6; }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px; margin-bottom: 20px;
}
.panel h2 { font-size: 18px; margin: 0 0 16px; }
.alert-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}
.alert-item:last-child { border-bottom: 0; }
.clickable-alert { cursor: pointer; }
.clickable-alert:hover { background: #f7f9f6; }
.clickable-alert:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  display: grid; place-items: center; color: #fff; font-weight: 700;
  background: #3a6ea5;
}
.member-summary { min-width: 110px; }
.chip { border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.chip.red { background: #fbe7e2; color: #b03c2b; }
.chip.yellow { background: #f7eed8; color: #8a6510; }
.chip.amber { background: #f7eed8; color: #9c7218; }
.chip.green { background: #e3f0e8; color: #2a6a44; }
.tag-chip { background: #eef2ee; color: #44504a; border-radius: 6px; padding: 3px 8px; font-size: 12px; }
.progress-values { color: #3c433e; line-height: 1.6; }
.reason { color: var(--red); font-size: 13px; margin-left: auto; text-align: right; max-width: 46%; }
.alert-events {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-left: auto;
  text-align: right;
  max-width: 52%;
}
.alert-event-label { font-weight: 700; }
.alert-event-label.red { color: #b03c2b; }
.alert-event-label.yellow { color: #8a6510; }
.alert-stage-inline {
  display: inline-block;
  margin-left: 6px;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
}
.status-square {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 2px;
  vertical-align: -1px;
  border: 1px solid rgba(30, 40, 32, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.status-square.red { background: #c44d3a; }
.status-square.yellow { background: #d6a52f; }
.status-square.green { background: #4c9a68; }
.light-detail { display: inline-flex; align-items: center; gap: 5px; }

/* Dashboard visuals */
.dashboard-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  margin-bottom: 2px;
}
.dashboard-chart { min-width: 0; }
.dashboard-chart-head { margin-bottom: 14px; }
.dashboard-chart-head h2 { margin-bottom: 4px; }
.dashboard-chart-head p { margin: 0; color: var(--muted); font-size: 13px; }
.chart-legend {
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.legend-swatch.activity, .trend-bar.activity { background: var(--blue); }
.legend-swatch.daily, .trend-bar.daily { background: var(--green); }
.trend-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(26px, 1fr));
  gap: 6px;
  align-items: end;
  min-height: 164px;
  padding: 10px 4px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.trend-week {
  min-width: 26px;
  display: grid;
  grid-template-rows: 132px auto;
  align-items: end;
  gap: 6px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.trend-week:hover .trend-bar, .trend-week:focus-visible .trend-bar { opacity: 0.72; }
.trend-bars {
  height: 132px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
}
.trend-bar {
  width: 9px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
}
.trend-label { font-size: 11px; white-space: nowrap; text-align: center; }
.dashboard-bars { display: grid; gap: 10px; }
.dashboard-bar-row {
  display: grid;
  grid-template-columns: minmax(72px, 108px) minmax(80px, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.dashboard-bar-row:last-child { border-bottom: 0; }
.dashboard-bar-row:hover .dashboard-bar-label,
.dashboard-bar-row:focus-visible .dashboard-bar-label { color: var(--green-d); }
.dashboard-bar-label { font-size: 13px; font-weight: 600; }
.dashboard-bar-track {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: #edf0ec;
}
.dashboard-bar-fill {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
}
.dashboard-bar-fill.red { background: var(--red); }
.dashboard-bar-fill.yellow { background: var(--amber); }
.dashboard-bar-fill.progress { background: var(--green); }
.dashboard-bar-fill.group { background: var(--blue); }
.dashboard-bar-value { white-space: nowrap; font-size: 13px; }
.dashboard-bar-meta {
  grid-column: 2 / 4;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.week-stats { margin-bottom: 20px; }
.week-records { padding-top: 8px; }
.week-day { padding: 8px 0 18px; }
.week-day + .week-day { border-top: 1px solid var(--line); padding-top: 18px; }
.week-day h2 { margin: 0 0 8px; font-size: 15px; }
.week-group-block { padding: 8px 0 4px 12px; border-left: 2px solid #dce5dd; }
.week-group-block + .week-group-block { margin-top: 10px; }
.week-group-block h3 { margin: 0 0 4px; font-size: 13px; color: var(--green-d); }
.week-record-list { display: grid; gap: 8px; }
.week-record {
  display: grid;
  grid-template-columns: 64px minmax(150px, 1fr) minmax(190px, auto);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.week-record:last-child { border-bottom: 0; }
.week-record:hover .week-record-main strong,
.week-record:focus-visible .week-record-main strong { color: var(--green-d); }
.week-record-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.week-record-main strong { flex: 0 0 auto; }
.week-record-main > span:last-child { color: #3c433e; }
.week-record-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

/* Members table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #f7f9f6; }
.member-name { font-weight: 600; }
.flag { font-size: 12px; color: var(--muted); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

/* Timeline */
.timeline { position: relative; }
.timeline-day { border-bottom: 1px solid var(--line); }
.timeline-day:last-child { border-bottom: 0; }
.timeline-origin { margin-top: 8px; border-top: 1px solid var(--line); }
.timeline-day-head {
  padding: 15px 0 7px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.timeline-day-items { padding-bottom: 4px; }
.timeline .tl-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.timeline-day-items .tl-item:last-child { border-bottom: 0; }
.tl-date { flex: 0 0 92px; font-size: 13px; color: var(--muted); padding-top: 3px; }
.type-badge { flex: 0 0 64px; }
.type-badge span { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; }
.type-badge .activity { background: #e4ecf5; color: #31597f; }
.type-badge .daily { background: #e7f0ea; color: #2f7a4f; }
.type-badge .created { background: #f2eadb; color: #8a642f; }
.member-created .tl-body h3 { color: #6f542d; }
.tl-body { flex: 1; min-width: 0; }
.tl-body h3 { margin: 0 0 6px; font-size: 16px; }
.tl-meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.tl-body p { margin: 4px 0 0; color: #3c433e; line-height: 1.6; }
.score { font-weight: 700; }
.record-delete {
  align-self: flex-start;
  margin-top: 10px;
  border: 1px solid #f0cbc2;
  border-radius: 6px;
  background: #fff;
  color: var(--red);
  padding: 5px 9px;
  font-size: 12px;
  cursor: pointer;
}
.record-delete:hover { background: #fbeae6; }
.comment-box { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.comment-list { margin-top: 10px; display: grid; gap: 8px; }
.comment {
  background: #f6f8f4; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; color: #333;
}
.comment .meta { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.conflict-list { display: grid; gap: 10px; max-height: 360px; overflow: auto; margin: 14px 0 18px; }
.conflict-record { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #fbfcfa; }
.conflict-record p { margin: 6px 0 0; font-size: 13px; color: #3c433e; line-height: 1.5; }
.inline-form { display: flex; gap: 8px; margin-top: 10px; }
.inline-form input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; }

/* Alert focus view */
.focus-events { display: grid; gap: 24px; }
.focus-severity-section { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.focus-severity-section:last-child { padding-bottom: 0; border-bottom: 0; }
.focus-severity-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 15px;
}
.focus-severity-head .status-square { margin-right: 2px; }
.focus-severity-red .focus-severity-head { color: #a03a2a; }
.focus-severity-yellow .focus-severity-head { color: #8a6510; }
.focus-severity-count { color: var(--muted); font-size: 12px; font-weight: 400; }
.focus-event-list { display: grid; gap: 10px; }
.focus-event {
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fbfcfa;
}
.focus-event-red { border-left-color: var(--red); }
.focus-event-yellow { border-left-color: var(--amber); }
.focus-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.focus-event-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.focus-event.is-closed {
  background: #f4f6f2;
  border-left-color: #7b8b80;
}
.focus-event.is-closed .chip {
  opacity: 0.72;
}
.alert-ai-btn { margin-left: 4px; }
.ai-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-chat { padding: 0; overflow: hidden; }
.ai-scope-note {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  background: #f7faf7;
}
.ai-messages {
  min-height: 360px;
  max-height: 58vh;
  overflow: auto;
  padding: 20px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.ai-message {
  max-width: min(780px, 86%);
  display: grid;
  gap: 4px;
}
.ai-message.user { justify-self: end; }
.ai-message.assistant { justify-self: start; }
.ai-message-role { color: var(--muted); font-size: 12px; }
.ai-message-content {
  white-space: pre-wrap;
  line-height: 1.7;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #f7faf7;
}
.ai-message.user .ai-message-content {
  background: #e5f0e8;
  border-color: #c5ddcc;
}
.ai-cursor {
  color: var(--green);
  animation: ai-cursor-blink 0.8s steps(2, start) infinite;
}
@keyframes ai-cursor-blink {
  50% { opacity: 0; }
}
.ai-compose {
  border-top: 1px solid var(--line);
  padding: 14px 18px 18px;
  background: #fff;
}
.ai-input { width: 100%; min-height: 82px; resize: vertical; }
.ai-compose-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.ai-empty { margin: auto; width: 100%; }
.followup-stage {
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.stage-pending { background: #eef1ec; color: #59665c; }
.stage-contacted { background: #e8eef5; color: #45627b; }
.stage-monitoring { background: #eee9f7; color: #66528b; }
.stage-improved { background: #e6f1e8; color: #39714b; }
.stage-closed { background: #e7ebe7; color: #566259; }
.followup-controls {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 10px 0 12px;
}
.followup-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}
.followup-field select,
.followup-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
}
.followup-field textarea {
  min-height: 38px;
  resize: vertical;
}
.followup-save { white-space: nowrap; }
.followup-updated {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 8px;
}
.followup-readonly {
  margin: 10px 0 12px;
  padding: 8px 10px;
  border-radius: 7px;
  background: #f1f3f0;
  color: var(--muted);
  font-size: 12px;
}
.focus-records { display: grid; gap: 8px; }
.focus-record {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.focus-record > div:last-child { min-width: 0; }

/* Member summary */
.summary-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.summary-filter-grid .field { margin-bottom: 0; }
.summary-flags-label { margin: 18px 0 8px; color: var(--muted); font-size: 13px; }
.summary-flag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.summary-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}
.summary-check:has(input:checked) {
  border-color: var(--green);
  background: #e8f1eb;
  color: var(--green-d);
  font-weight: 600;
}
.summary-check input { margin: 0; accent-color: var(--green); }
.summary-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.summary-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.summary-result-head h2 { margin: 0; }
.summary-loading { margin: 0 0 12px; color: var(--muted); }
.summary-empty { color: var(--muted); text-align: center !important; padding: 28px 12px !important; }

/* Batch view */
.batch-list { display: grid; gap: 14px; }
.batch-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  background: #fbfcfa;
}
.batch-card .top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.batch-row { display: grid; grid-template-columns: 1fr 130px 96px; gap: 10px; margin-bottom: 8px; }
.batch-row.daily-row { grid-template-columns: 1fr 150px 130px 130px; }
label.sm { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
input, select, textarea { outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(47,122,79,0.12); }

.member-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.member-pill {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13px;
}
.member-pill.selected { background: var(--green); border-color: var(--green); color: #fff; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.admin-grid .panel input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.admin-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.admin-list li { border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 14px; }
.admin-account-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-tag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tag-actions { display: flex; gap: 6px; flex-shrink: 0; }
.small-btn { padding: 6px 9px; font-size: 12px; }
.muted-note { color: var(--muted); font-size: 13px; line-height: 1.5; }
.empty-state { color: var(--muted); text-align: center; padding: 42px 20px; }
@media (max-width: 980px) {
  .two-col { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-visual-grid { grid-template-columns: 1fr; }
  .summary-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reason { max-width: 100%; margin-left: 0; }
}
@media (max-width: 720px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: 0 0 auto; height: auto; position: static; padding: 14px 12px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav button { flex: 1; min-width: 92px; justify-content: center; }
  .sidebar-foot { display: none; }
  .main { padding: 18px 14px 48px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-visual-grid { gap: 14px; }
  .week-record { grid-template-columns: 56px 1fr; gap: 8px; }
  .week-record-meta { grid-column: 2; justify-content: flex-start; }
  .batch-row, .batch-row.daily-row { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .summary-filter-grid { grid-template-columns: 1fr; }
  .filter-row { width: 100%; }
  .filter-row select { flex: 1; }
  .followup-controls { grid-template-columns: 1fr; align-items: stretch; }
  .followup-save { width: 100%; }
  .ai-message { max-width: 96%; }
  .ai-head-actions { width: 100%; }
}