:root {
  --ink: #172024;
  --muted: #69777c;
  --line: #e3e8e7;
  --canvas: #f6f8f7;
  --surface: #ffffff;
  --nav: #173a37;
  --nav-soft: #24524d;
  --brand: #1f766a;
  --brand-dark: #155b52;
  --brand-pale: #e7f4f1;
  --danger: #c8423c;
  --danger-pale: #fff0ee;
  --warning: #9a6514;
  --warning-pale: #fff6df;
  --success: #18704d;
  --success-pale: #e7f6ed;
  --blue: #3768a8;
  --shadow: 0 14px 32px rgb(21 45 42 / 8%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

a {
  color: inherit;
}

.login-page {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(300px, 0.95fr) minmax(420px, 1.05fr);
  background: #fff;
}

.login-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: clamp(32px, 7vw, 88px);
  color: #eff9f6;
  background:
    radial-gradient(circle at 77% 16%, rgb(81 182 155 / 38%), transparent 25%),
    radial-gradient(circle at 14% 88%, rgb(110 196 154 / 24%), transparent 26%),
    linear-gradient(145deg, #123530, #1d5c53 58%, #27766a);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 18px;
  font-weight: 760;
  letter-spacing: .02em;
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: #f7fbfa;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1;
  text-shadow: 0 2px 10px rgb(0 0 0 / 18%);
}

.brand-wordmark em {
  position: relative;
  color: #ff8a2b;
  font-style: normal;
  letter-spacing: 0;
}

.brand-wordmark em::after {
  position: absolute;
  right: 1px;
  bottom: -7px;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: #ff8a2b;
  content: "";
  transform: rotate(-6deg);
}

.brand-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex: none;
}

.login-aside h1 {
  max-width: 440px;
  margin: 0;
  font-size: clamp(35px, 4vw, 58px);
  line-height: 1.17;
  letter-spacing: -.04em;
}

.login-aside p {
  max-width: 440px;
  margin: 19px 0 0;
  color: #cce7e0;
  font-size: 16px;
  line-height: 1.75;
}

.login-note {
  color: #abd0c8;
  font-size: 13px;
}

.login-main {
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 32px;
  background: #fbfcfb;
}

.login-card {
  width: min(100%, 440px);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.login-card h2 {
  margin: 0;
  font-size: 31px;
  letter-spacing: -.03em;
}

.login-card > p:not(.form-hint) {
  margin: 12px 0 30px;
  color: var(--muted);
  line-height: 1.6;
}

.form-stack,
.modal-form {
  display: grid;
  gap: 17px;
}

.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.field > span,
.field-label {
  color: #3e4e52;
  font-size: 13px;
  font-weight: 700;
}

.field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #ced9d6;
  border-radius: 9px;
  outline: none;
  color: var(--ink);
  background: #fff;
  transition: border-color .16s, box-shadow .16s;
}

textarea {
  min-height: 98px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #3f9d8e;
  box-shadow: 0 0 0 3px rgb(62 159 143 / 16%);
}

input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--brand);
}

.form-hint,
.login-help {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.login-error,
.inline-error {
  display: none;
  padding: 10px 12px;
  border: 1px solid #f3c6c1;
  border-radius: 8px;
  color: #a9302b;
  background: var(--danger-pale);
  font-size: 13px;
  line-height: 1.45;
}

.login-error.is-visible,
.inline-error.is-visible {
  display: block;
}

.btn {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  background: var(--brand);
  font-size: 13px;
  font-weight: 720;
  text-decoration: none;
  transition: background .16s, transform .16s, border-color .16s;
}

.btn:hover:not(:disabled) {
  background: var(--brand-dark);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--brand);
}

.btn-secondary,
.btn-quiet {
  border-color: #cbd8d5;
  color: #31514c;
  background: #fff;
}

.btn-secondary:hover:not(:disabled),
.btn-quiet:hover:not(:disabled) {
  border-color: #9fbdb7;
  color: #1a5950;
  background: #f3f9f7;
}

.btn-danger {
  background: var(--danger);
}

.btn-danger:hover:not(:disabled) {
  background: #ab302b;
}

.btn-warning {
  color: #704a0f;
  background: #f3c96f;
}

.btn-warning:hover:not(:disabled) {
  background: #e7b44e;
}

.btn-sm {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 12px;
}

.btn-wide {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
}

.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 252px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  overflow-y: auto;
  padding: 22px 14px 16px;
  color: #e7f1ee;
  background: var(--nav);
}

.sidebar .brand-lockup {
  padding: 0 10px 26px;
}

.sidebar .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 16px;
}

.nav-label {
  margin: 7px 11px 8px;
  color: #8bb8ae;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.side-nav {
  display: grid;
  gap: 3px;
}

.nav-item {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  color: #c9e1db;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 650;
}

.nav-item:hover {
  color: #f4fffc;
  background: rgb(255 255 255 / 8%);
}

.nav-item.is-active {
  color: #fff;
  background: var(--nav-soft);
  box-shadow: inset 3px 0 0 #90ddc5;
}

.nav-icon {
  width: 19px;
  color: #9ed4c7;
  font-size: 16px;
  text-align: center;
}

.sidebar-spacer {
  flex: 1;
  min-height: 28px;
}

.admin-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 10px;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.avatar,
.avatar-image {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: #5a9588;
  font-size: 12px;
  font-weight: 800;
}

.avatar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-identity strong,
.admin-identity small {
  display: block;
  max-width: 147px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-identity strong {
  color: #fff;
  font-size: 12px;
}

.admin-identity small {
  margin-top: 2px;
  color: #9fc6be;
  font-size: 11px;
}

.logout-button {
  width: 100%;
  margin-top: 7px;
  border-color: rgb(255 255 255 / 18%);
  color: #b5d6cf;
  background: transparent;
}

.logout-button:hover {
  color: #fff;
  background: rgb(255 255 255 / 8%);
}

.main-column {
  min-width: 0;
}

.topbar {
  display: flex;
  min-height: 69px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(20px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
  background: rgb(255 255 255 / 88%);
}

.topbar-title {
  color: #314147;
  font-size: 13px;
  font-weight: 720;
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39b779;
  box-shadow: 0 0 0 4px rgb(57 183 121 / 13%);
}

.page-content {
  max-width: 1600px;
  padding: 32px clamp(20px, 4vw, 46px) 54px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 23px;
}

.page-header h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -.035em;
}

.page-header p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.page-actions,
.row-actions,
.modal-actions,
.filter-actions,
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.metric-card {
  min-height: 124px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 3px 10px rgb(28 50 48 / 3%);
}

.metric-card .metric-icon {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 8px;
  color: var(--brand-dark);
  background: var(--brand-pale);
  font-size: 15px;
}

.metric-card.is-warn .metric-icon {
  color: var(--warning);
  background: var(--warning-pale);
}

.metric-card.is-danger .metric-icon {
  color: var(--danger);
  background: var(--danger-pale);
}

.metric-value {
  display: block;
  margin-top: 14px;
  font-size: 27px;
  font-weight: 790;
  letter-spacing: -.04em;
}

.metric-label {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.panel,
.table-panel {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 3px 10px rgb(28 50 48 / 3%);
}

.panel {
  padding: 20px;
}

.panel + .panel,
.panel + .table-panel,
.table-panel + .panel {
  margin-top: 16px;
}

.panel-title-row,

.user-summary-strip,
.user-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.user-summary-strip div,
.user-detail-summary div { padding: 13px 16px; border-right: 1px solid var(--line); }
.user-summary-strip div:last-child,
.user-detail-summary div:last-child { border-right: 0; }
.user-summary-strip strong,
.user-detail-summary strong { display: block; font-size: 18px; }
.user-summary-strip span,
.user-detail-summary span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.user-summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.user-detail-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.user-filter-panel .filter-primary-actions {
  display: flex;
  grid-column: span 12;
  justify-content: flex-end;
  gap: 8px;
}

.user-filter-panel > .filter-actions { display: none; }

.advanced-filter {
  grid-column: span 12;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.advanced-filter summary { cursor: pointer; color: var(--brand-dark); font-size: 12px; font-weight: 750; }
.advanced-filter summary span { margin-left: 8px; padding: 2px 6px; border-radius: 999px; background: var(--brand-pale); font-size: 10px; }
.advanced-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-top: 11px; }
.advanced-filter-grid .field { grid-column: auto; }

.table-empty-action { display: grid; min-height: 150px; place-content: center; justify-items: center; gap: 7px; color: var(--muted); text-align: center; }
.table-empty-action strong { color: var(--ink); font-size: 14px; }


.review-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.review-tab {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
}

.review-tab strong { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: #edf3f1; color: var(--ink); font-size: 11px; }
.review-tab:hover { background: #f4f8f7; }
.review-tab.is-active { color: #fff; background: var(--brand); }
.review-tab.is-active strong { color: var(--brand-dark); background: #fff; }
.is-priority-row td { background: #fbfefc; }
.is-priority-row td:first-child { box-shadow: inset 3px 0 0 #78c7b3; }

.table-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.panel-title-row {
  margin-bottom: 15px;
}

.panel h2,
.table-panel-header h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -.015em;
}

.panel-title-row p,
.table-panel-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.quick-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quick-card {
  display: flex;
  min-height: 95px;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e2ece9;
  border-radius: 10px;
  color: var(--ink);
  background: #fbfdfc;
  text-align: left;
}

.quick-card:hover {
  border-color: #a9cfc5;
  background: #f4faf8;
}

.quick-count {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-dark);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.quick-card small {
  color: var(--muted);
  font-size: 12px;
}


.dashboard-stat-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: -6px 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.dashboard-stat-strip div {
  padding: 13px 15px;
  border-right: 1px solid var(--line);
}

.dashboard-stat-strip div:last-child { border-right: 0; }
.dashboard-stat-strip strong { display: block; font-size: 17px; }
.dashboard-stat-strip span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }

.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  align-items: start;
  gap: 16px;
}

.dashboard-columns + .panel { margin-top: 16px; }
.dashboard-columns .panel + .panel { margin-top: 0; }

.panel-count,
.health-badge {
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--brand-dark);
  background: var(--brand-pale);
  font-size: 11px;
  font-weight: 750;
}

.dashboard-empty {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px dashed #cfe1dc;
  border-radius: 10px;
  color: var(--brand-dark);
  background: #f8fbfa;
}

.dashboard-empty > span { font-size: 23px; }
.dashboard-empty strong,
.dashboard-empty small { display: block; }
.dashboard-empty small { margin-top: 3px; color: var(--muted); }

.health-list { margin: 0; }
.health-list div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.health-list div:last-child { border-bottom: 0; }
.health-list dt { color: var(--muted); }
.health-list dd { margin: 0; font-weight: 650; text-align: right; }
.health-list i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #36b37e; }

.recent-list { margin: 0; padding: 0; list-style: none; }
.recent-list li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.recent-list li:last-child { border-bottom: 0; }
.recent-list strong,
.recent-list small { display: block; }
.recent-list small { margin-top: 2px; color: var(--muted); }
.recent-dot { width: 7px; height: 7px; border-radius: 50%; background: #7bc3b2; }
.recent-target { max-width: 260px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.filter-panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 16px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfc;
}

.filter-panel .field {
  grid-column: span 3;
}

.filter-panel .field.wide {
  grid-column: span 4;
}

.filter-panel .field.narrow {
  grid-column: span 2;
}

.filter-panel .filter-actions {
  grid-column: span 12;
  justify-content: flex-end;
  margin-top: 3px;
}

.filter-panel input,
.filter-panel select {
  min-height: 37px;
  padding: 7px 9px;
  font-size: 13px;
}

.table-panel-header {
  min-height: 67px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

th,
td {
  padding: 13px 18px;
  border-bottom: 1px solid #eef1f0;
  text-align: left;
  vertical-align: middle;
}

th {
  color: #718085;
  background: #fcfdfd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

td {
  color: #304045;
  font-size: 13px;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover td {
  background: #fbfdfc;
}

.entity-cell {
  display: flex;
  min-width: 150px;
  align-items: center;
  gap: 10px;
}

.entity-cell strong,
.entity-cell small {
  display: block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The ID under a name breaks at its hyphens, like the ID column's, so a UUID shows on two lines
   instead of widening the column; today's IDs have no break point and stay on one line. */
.entity-cell small {
  white-space: normal;
}

.entity-cell strong {
  color: #223237;
  font-size: 13px;
}

.entity-cell small,
.muted,
.subtext {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.id-text {
  color: #607177;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

/* In a table, a long ID breaks at its hyphens when the table runs out of room, so the Go server's
   36-character UUIDs never make a table wider than today's IDs do. Today's IDs (a prefix, an
   underscore and hex digits) have no break point, so they stay on one line. */
td .id-text {
  white-space: normal;
}

.badge {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.badge-neutral {
  color: #56676c;
  background: #edf1f0;
}

.badge-success {
  color: var(--success);
  background: var(--success-pale);
}

.badge-warning {
  color: var(--warning);
  background: var(--warning-pale);
}

.badge-danger {
  color: var(--danger);
  background: var(--danger-pale);
}

.badge-info {
  color: var(--blue);
  background: #ebf2ff;
}

.badge-dark {
  color: #fff;
  background: #45645f;
}

.pagination {
  display: flex;
  min-height: 59px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}

.pagination span {
  color: var(--muted);
  font-size: 12px;
}

.empty-state,
.loading-state,
.access-denied {
  display: grid;
  min-height: 190px;
  place-items: center;
  padding: 30px;
  color: var(--muted);
  text-align: center;
}

.empty-state > div,
.access-denied > div {
  max-width: 360px;
}

.empty-icon,
.loading-spinner {
  display: grid;
  width: 40px;
  height: 40px;
  margin: 0 auto 11px;
  place-items: center;
  border-radius: 12px;
  color: var(--brand);
  background: var(--brand-pale);
  font-size: 21px;
}

.loading-spinner {
  border: 3px solid #d8eeea;
  border-top-color: var(--brand);
  border-radius: 50%;
  background: transparent;
  animation: spin .78s linear infinite;
}

@keyframes spin {
  to { transform: rotate(1turn); }
}

.empty-state h3,
.access-denied h2 {
  margin: 0;
  color: #35464b;
  font-size: 15px;
}

.empty-state p,
.access-denied p {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
}

.detail-item {
  min-width: 0;
  padding-bottom: 9px;
  border-bottom: 1px dashed #e6ecea;
}

.detail-item dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.detail-item dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #2a3a3e;
  font-size: 13px;
  line-height: 1.45;
}

.detail-section + .detail-section {
  margin-top: 21px;
}

.detail-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.notice {
  padding: 11px 13px;
  border: 1px solid #cbe6df;
  border-radius: 9px;
  color: #2a6257;
  background: #eff9f5;
  font-size: 12px;
  line-height: 1.55;
}

.danger-notice {
  border-color: #f1c4c0;
  color: #96312c;
  background: #fff2f1;
}

.check-field {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  border: 1px solid #dde6e3;
  border-radius: 8px;
  color: #43545a;
  font-size: 12px;
  line-height: 1.5;
}

.app-modal {
  width: min(680px, calc(100vw - 28px));
  max-height: min(86vh, 900px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 70px rgb(9 28 25 / 28%);
}

.app-modal::backdrop {
  background: rgb(15 34 31 / 48%);
  backdrop-filter: blur(2px);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 21px 23px 16px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.025em;
}

.modal-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.close-modal {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #506268;
  background: #edf2f1;
  font-size: 17px;
}

.modal-body {
  padding: 20px 23px 23px;
}

.modal-actions {
  justify-content: flex-end;
  margin-top: 5px;
  padding-top: 3px;
}

.modal-section + .modal-section {
  margin-top: 20px;
}

.modal-section h3 {
  margin: 0 0 9px;
  font-size: 14px;
}

.modal-table {
  width: 100%;
  margin-top: 8px;
}

.modal-table th,
.modal-table td {
  padding: 9px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.form-grid .field.full {
  grid-column: 1 / -1;
}

.toast-region {
  position: fixed;
  z-index: 20;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: min(360px, calc(100vw - 40px));
  gap: 9px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 13px;
  border: 1px solid #d8e8e3;
  border-radius: 10px;
  color: #24433d;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.45;
  animation: toast-in .22s ease-out;
}

.toast.is-error {
  border-color: #f2c7c3;
  color: #9a302b;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-nav-toggle {
  display: none;
}

@media (max-width: 1180px) {
  .metric-grid,
  .quick-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* With an odd number of queue cards, the last one spans the row, so no grid cell is left empty. */
  .quick-list > .quick-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .filter-panel .field,
  .filter-panel .field.wide {
    grid-column: span 4;
  }
}

@media (max-width: 840px) {
  .login-page {
    grid-template-columns: 1fr;
  }

  .login-aside {
    min-height: 260px;
    padding: 28px;
  }

  .login-aside h1 {
    margin-top: 46px;
    font-size: 37px;
  }

  .login-aside p,
  .login-note {
    display: none;
  }

  .login-main {
    place-items: start center;
    padding: 40px 26px;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    z-index: 8;
    width: min(280px, 84vw);
    transform: translateX(-101%);
    box-shadow: 15px 0 32px rgb(10 34 30 / 24%);
    transition: transform .2s ease;
  }

  .app-shell.is-nav-open .sidebar {
    transform: translateX(0);
  }

  .mobile-nav-toggle {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    border: 1px solid #d4dfdc;
    border-radius: 8px;
    color: var(--brand-dark);
    background: #fff;
  }

  .topbar {
    padding: 0 20px;
  }

  .page-content {
    padding: 24px 20px 44px;
  }

  .filter-panel .field,
  .filter-panel .field.wide,
  .filter-panel .field.narrow {
    grid-column: span 6;
  }
}

@media (max-width: 560px) {
  .metric-grid,
  .quick-list,
  .details-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .page-header,
  .table-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .btn {
    flex: 1;
  }

  .filter-panel .field,
  .filter-panel .field.wide,
  .filter-panel .field.narrow {
    grid-column: span 12;
  }

  .filter-panel .filter-actions {
    justify-content: stretch;
  }

  .filter-panel .filter-actions .btn {
    flex: 1;
  }

  .pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-status {
    display: none;
  }

  .page-header h1 {
    font-size: 25px;
  }

  .modal-header,
  .modal-body {
    padding-right: 17px;
    padding-left: 17px;
  }
}


/* Gym management: compact operations, quality visibility, and progressive filters. */
.gym-summary-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gym-filter-panel .filter-primary-actions { display: flex; grid-column: span 12; justify-content: flex-end; gap: 8px; }
.gym-filter-panel > .filter-actions { display: none; }
.gym-address { max-width: 270px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gym-types { margin-top: 4px; white-space: nowrap; }
.gym-quality { max-width: 220px; margin-top: 5px; overflow: hidden; color: #a86213; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.gym-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
@media (max-width: 900px) { .gym-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gym-summary-strip div { border-bottom: 1px solid var(--line); } }


/* Keep the list focused; edit and status actions live in the gym detail dialog. */
.gym-actions .btn { min-width: 72px; }


/* Activity management: lifecycle-first navigation and compact table actions. */
.activity-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.activity-filter-panel .filter-primary-actions { display: flex; grid-column: span 12; justify-content: flex-end; gap: 8px; }
.activity-filter-panel > .filter-actions { display: none; }
.activity-filter-panel input[type="hidden"] { display: none; }
.activity-phase { display: inline-block; margin-left: 4px; font-size: 10px; font-weight: 700; }
.activity-phase-success { color: #16825f; }
.activity-phase-warning { color: #a86213; }
.activity-phase-default { color: var(--muted); }
.activity-manage-btn { min-width: 72px; white-space: nowrap; }
@media (max-width: 900px) { .activity-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* Dashboard premium layout: clean hierarchy, restrained accents, precise alignment. */
.panel-title-row {
  display: flex;
  grid-template-columns: none;
  min-height: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.panel-title-row > div { min-width: 0; }
.panel-title-row h2 { color: var(--ink); font-size: 15px; font-weight: 780; }
.panel-title-row p { max-width: 680px; margin-top: 5px; line-height: 1.45; }
.panel-title-row .btn { flex: 0 0 auto; min-width: auto; }

.dashboard-columns { grid-template-columns: minmax(0, 2.05fr) minmax(320px, 1fr); align-items: stretch; gap: 18px; }
.dashboard-columns > .panel { min-height: 220px; padding: 20px; }
.dashboard-columns .dashboard-empty { min-height: 86px; }
.health-badge { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 5px 10px; line-height: 1; white-space: nowrap; }
.health-badge::before { width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #36a879; content: ''; }
.health-list div { min-height: 38px; align-items: center; padding: 8px 0; }
.health-list dt { font-size: 12px; }
.health-list dd { max-width: 70%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.recent-panel { padding: 20px; }
.recent-panel .panel-title-row { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.recent-panel .panel-title-row .btn { align-self: center; }
.recent-list li { min-height: 54px; padding: 10px 2px; }
.recent-list strong { font-size: 13px; }
.recent-list small { font-size: 11px; }

.metric-grid { gap: 16px; margin-bottom: 16px; }
.metric-card { min-height: 116px; padding: 17px; box-shadow: 0 5px 18px rgb(28 50 48 / 4%); }
.metric-value { margin-top: 12px; }
.dashboard-stat-strip { margin: 0 0 18px; box-shadow: 0 3px 12px rgb(28 50 48 / 3%); }
.dashboard-empty { border-color: #d7e7e3; background: linear-gradient(135deg, #fbfdfc, #f5faf8); }
.dashboard-empty > span { color: #21866b; }

@media (max-width: 900px) {
  .dashboard-columns { grid-template-columns: 1fr; }
  .dashboard-columns > .panel { min-height: auto; }
  .panel-title-row { gap: 10px; }
}

/* Feature switches: the rule explanation above the panels, and one editable version rule per row. */
.switch-notice { margin-bottom: 16px; }
.switch-rule-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 10px; align-items: end; margin-bottom: 10px; }

/* Home page: banner thumbnails in the list, the larger image preview in the banner and gym forms, and one climbing
   type per row in the official activity form. */
.banner-thumb { display: block; width: 120px; height: 60px; object-fit: cover; border-radius: 8px; background: var(--line); }
/* A banner's title and subtitle wrap, so a long title does not push the row's buttons out of view. */
.banner-text { min-width: 180px; max-width: 320px; white-space: normal; }
.image-preview { display: block; width: 100%; max-width: 360px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; background: var(--line); }
.official-type-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 8px; }
.table-panel + .table-panel { margin-top: 18px; }
.table-panel-header .btn { flex: none; }
[data-chip-value][hidden] { display: none; }

/* Moderation page: the tabs fill the row however many there are, and the text column of the posts and comments
   tables wraps, since table cells do not. */
.moderation-tabs { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.moderation-text-cell { min-width: 200px; max-width: 360px; white-space: normal; overflow-wrap: anywhere; }
/* The post detail: the full text keeps the member's line breaks; photos sit in square boxes shown whole (contain,
   never cover, so a reviewer sees all of a photo); each earlier version is set off by a dashed line. */
.moderation-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.moderation-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.moderation-photo { display: grid; aspect-ratio: 1 / 1; place-items: center; overflow: hidden; border-radius: 8px; background: var(--canvas); border: 1px solid var(--line); }
.moderation-photo img { width: 100%; height: 100%; object-fit: contain; }
.moderation-photo-empty { padding: 8px; color: var(--muted); font-size: 11px; text-align: center; }
.moderation-version { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.moderation-version h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
/* The banned-words tab's note sits above its add form. */
.moderation-note { margin-bottom: 16px; }
/* The member detail's profile photo: a small round thumbnail beside its remove button. */
.profile-photo-thumb { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--line); }

/* Safety page: a removal request's links in order, numbered, each wrapping however long it is; and the ID lists of
   a closed request and a keep result, one ID per line. */
.safety-links { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.safety-links li { overflow-wrap: anywhere; }
.safety-id-list { display: grid; gap: 4px; }
.safety-id-list + .notice { margin-top: 8px; }
/* The open list's links cell is narrower than content review's text cell, so the list's resolve button stays in view
   at 1280 px wide instead of behind the table's sideways scroll. */
.safety-links-cell { min-width: 140px; }

/* A removal request's detail: every value wraps inside the dialog however long it is (a link, description or email
   of 2000 characters with no spaces included), so the dialog never grows wider; the report button sits under its note. */
.safety-detail .detail-item { min-width: 0; }
.safety-detail .detail-item dd { overflow-wrap: anywhere; }
.safety-detail .notice + .row-actions, .safety-detail .notice + .subtext { margin-top: 8px; }

/* The NCMEC tab: the child-safety warning above the two keep panels, which stack with the page's usual gap. The keep
   confirmation's post preview sits above its box; the resolve form's post lookup puts its field and button on one row
   and its photo list under them. */
.safety-warning { margin-bottom: 16px; }
.safety-panels { display: grid; gap: 16px; }
.safety-preview { display: grid; gap: 16px; }
/* A zero basis lets the field share its row with the button, though console inputs are 100% wide. */
.safety-lookup .inline-actions input { flex: 1 1 0; min-width: 0; }
.safety-lookup [data-lookup-results]:not(:empty) { margin-top: 8px; }

/* Report pages: the six report tabs fill one row on a wide screen and wrap into even rows of three, then two, on a
   narrow one (an auto-fit grid left five and one). A photo's ID sits under its box, in the report copy and content
   review's post detail, so an admin can copy it. */
.report-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1180px) { .report-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .report-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A child-safety report's notice and its NCMEC button sit above the detail's fields. */
.report-child-safety { display: grid; gap: 8px; margin-bottom: 16px; }
.photo-id { display: block; margin-top: 4px; overflow-wrap: anywhere; }