@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

:root {
  color-scheme: light;
  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Poppins", var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #f5f5f2;
  --panel: #fcfcfb;
  --panel-2: #f8f8f6;
  --raised: #efefeb;
  --line: #e3e3df;
  --line-strong: #d9d9d9;
  --text: #2b2b2b;
  --dim: #5f6368;
  --faint: #8a8f94;
  --muted: var(--faint);

  --accent: #3b82f6;
  --accent-strong: #2563eb;
  --accent-soft: rgba(59, 130, 246, 0.1);
  --accent-ring: rgba(59, 130, 246, 0.32);
  --on-accent: #fcfcfb;

  --danger: #a4443a;
  --warn: #8a6320;
  --ok: #3c7a58;
  --info: #2f6ab5;

  --sig-blue: #3b82f6;
  --sig-teal: #6aa99b;
  --sig-pink: #c88aa0;
  --sig-red: #d9796f;
  --sig-green: #93b36b;

  --topbar-bg: rgba(252, 252, 251, 0.86);
  --overlay: rgba(43, 43, 43, 0.28);
  --image-overlay: rgba(43, 43, 43, 0.72);
  --shadow-float: 0 1px 2px rgba(43, 43, 43, 0.06), 0 10px 28px rgba(43, 43, 43, 0.1);
  --shadow-modal: 0 1px 2px rgba(43, 43, 43, 0.08), 0 22px 60px rgba(43, 43, 43, 0.18);
  --ring-line: rgba(59, 130, 246, 0.1);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --soft: var(--panel-2);
  --track: var(--raised);
  --hover: var(--raised);
  --white: var(--panel);
  --code-text: var(--text);
  --primary-line: var(--accent);
  --primary-bg: var(--accent);
  --primary-text: var(--on-accent);
  --danger-line: #efc1bb;
  --danger-bg: #fff0ed;
  --danger-hover: #ffe6e1;
  --danger-text: #9b4039;
  --warn-line: #e6d3ab;
  --warn-bg: #fbf4e6;
  --warn-text: var(--warn);
  --ok-line: #b7d7bf;
  --ok-text: #33724c;
  --section-line: var(--line);
  --shadow: rgba(43, 43, 43, 0.08);
  --shadow-strong: rgba(43, 43, 43, 0.35);

  --segment-0: #3b82f6;
  --segment-1: #6aa99b;
  --segment-2: #2563eb;
  --segment-3: #c88aa0;
  --segment-4: #d9796f;
  --segment-5: #93b36b;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181a1b;
  --panel: #232628;
  --panel-2: #272a2d;
  --raised: #2d3133;
  --line: #33373a;
  --line-strong: #43484c;
  --text: #ececec;
  --dim: #b5b8bb;
  --faint: #8a8f94;

  --accent: #5ea2ff;
  --accent-strong: #7ab4ff;
  --accent-soft: rgba(94, 162, 255, 0.13);
  --accent-ring: rgba(94, 162, 255, 0.4);
  --on-accent: #181a1b;

  --danger: #f0a09a;
  --warn: #e8c17a;
  --ok: #8fd6a0;
  --info: #9ec8ff;

  --sig-blue: #5ea2ff;
  --sig-teal: #4caf50;
  --sig-pink: #7ab4ff;
  --sig-red: #e57373;
  --sig-green: #4caf50;

  --topbar-bg: rgba(35, 38, 40, 0.86);
  --overlay: rgba(16, 12, 9, 0.62);
  --image-overlay: rgba(12, 9, 7, 0.82);
  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 36px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 26px 70px rgba(0, 0, 0, 0.55);
  --ring-line: rgba(94, 162, 255, 0.08);

  --danger-line: #6b3b3b;
  --danger-bg: #3a2728;
  --danger-hover: #4a3031;
  --danger-text: #f0a0a0;
  --warn-line: #6b5527;
  --warn-bg: #3a311f;
  --warn-text: #f0cf86;
  --ok-line: #3c6b3e;
  --ok-text: #8edb91;
  --shadow: rgba(0, 0, 0, 0.22);
  --shadow-strong: rgba(0, 0, 0, 0.55);

  --segment-0: #5ea2ff;
  --segment-1: #4caf50;
  --segment-2: #e8b44c;
  --segment-3: #7ab4ff;
  --segment-4: #e57373;
  --segment-5: #8a8f94;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

::selection {
  background: var(--accent-ring);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

a {
  color: var(--accent);
  text-underline-offset: 2px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
  cursor: pointer;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), background-color 0.15s;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select):hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong));
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select):focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
:where(input, textarea)::placeholder {
  color: var(--faint);
}
:where(textarea) {
  resize: vertical;
  line-height: 1.45;
}
:where(input[type="file"]) {
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel-2);
  color: var(--dim);
  font: inherit;
}

/* sidebar ------------------------------------------------------------ */
#sidebar {
  width: 232px;
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

#sidebar h1 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 18px;
  font: 600 17px/1 var(--font-display);
  letter-spacing: -0.2px;
  color: var(--text);
}
#sidebar h1::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 3px, transparent 3.5px),
    radial-gradient(circle at 50% 50%, transparent 0 7px, var(--accent-ring) 7px 8px, transparent 8.5px),
    radial-gradient(circle at 50% 50%, transparent 0 11.5px, var(--line-strong) 11.5px 12.5px, transparent 13px);
}
#sidebar h1 span {
  color: var(--faint);
  font-weight: 500;
  margin-left: -4px;
}

#nav {
  flex: 1;
  overflow-y: auto;
  padding: 2px 10px 14px;
}
#nav button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px 7px 22px;
  margin: 1px 0;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--dim);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
#nav button::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease-out);
}
#nav button:hover {
  background: var(--raised);
  color: var(--text);
}
#nav button:hover::before {
  background: var(--faint);
}
#nav button.active {
  background: var(--accent-soft);
  color: var(--text);
}
#nav button.active::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  transform: scale(1.15);
}
#nav button .uid {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--faint);
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
#nav .sep {
  padding: 14px 10px 6px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
}
.nav-section {
  margin-top: 6px;
}
.nav-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  padding: 12px 10px 6px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-sm);
  user-select: none;
}
.nav-section > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0;
  transition: transform 0.2s var(--ease-out), opacity 0.15s;
}
.nav-section:not([open]) > summary::after {
  transform: rotate(-45deg);
}
.nav-section > summary:hover::after,
.nav-section:not([open]) > summary::after {
  opacity: 0.8;
}
.nav-section > summary::-webkit-details-marker {
  display: none;
}
.nav-section > summary:hover {
  color: var(--dim);
}

#foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 11px;
}
#foot .who {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 12.5px;
  min-width: 0;
}
#foot .who strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#foot button.link {
  align-self: flex-start;
  margin-top: 2px;
}

#nav-backdrop {
  display: none;
}

/* main --------------------------------------------------------------- */
main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

#topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
body.is-loading #topbar::after {
  opacity: 1;
  animation: sweep 1.1s var(--ease-out) infinite;
}

#search {
  flex: 1;
  max-width: 480px;
  height: 38px;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a8f94' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.75'/%3E%3Cpath d='m10.5 10.5 3.25 3.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 11px 50%;
  color: var(--text);
  font: inherit;
}
#search:hover {
  border-color: var(--line-strong);
}
#search:focus {
  outline: 0;
  background-color: var(--panel);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.is-loading #status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-ring);
  animation: status-ping 1.2s var(--ease-out) infinite;
}

#create-row,
#refresh {
  height: 38px;
}

.theme-toggle {
  height: 38px;
  min-width: 82px;
}
.theme-toggle::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 14px;
  margin-right: 2px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 7px 50%, var(--panel) 0 4.5px, transparent 5px),
    var(--line-strong);
  transition: background 0.25s var(--ease-out);
}
:root[data-theme="dark"] .theme-toggle::before {
  background:
    radial-gradient(circle at 19px 50%, var(--on-accent) 0 4.5px, transparent 5px),
    var(--accent);
}

/* Opens the off-canvas sidebar. Only ever visible below the breakpoint, where
   the sidebar has left the layout. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 16px;
  height: 1.75px;
  border-radius: 2px;
  background: var(--text);
}
.nav-toggle span {
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle span::before {
  top: -5px;
}
.nav-toggle span::after {
  top: 5px;
}

#content {
  width: 100%;
  max-width: 1480px;
  padding: 24px;
}
#content.enter {
  animation: fade-in 0.22s var(--ease-out);
}

/* buttons ------------------------------------------------------------ */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out),
    color 0.15s var(--ease-out),
    box-shadow 0.15s var(--ease-out),
    transform 0.12s var(--ease-out);
}
button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong));
  background: var(--raised);
}
button:active:not(:disabled) {
  transform: translateY(0.5px) scale(0.985);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button.primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 1px 2px rgba(43, 43, 43, 0.16);
}
button.primary:hover:not(:disabled) {
  border-color: transparent;
  background: var(--accent-strong);
}
button.danger {
  border-color: var(--danger-line);
  color: var(--danger);
  background: var(--danger-bg);
}
button.danger:hover:not(:disabled) {
  background: var(--danger-hover);
  border-color: var(--danger);
}
button.link {
  min-height: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 500;
  box-shadow: none;
}
button.link:hover:not(:disabled) {
  background: none;
  border: 0;
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.link:active:not(:disabled) {
  transform: none;
}

.hint {
  color: var(--dim);
  font-size: 12px;
}
label > .hint {
  display: block;
  margin-top: 4px;
}

h4.sec {
  color: var(--dim);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  margin-bottom: 10px;
}

/* dashboard ---------------------------------------------------------- */
.dash-section {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  margin-bottom: 16px;
  overflow: hidden;
}
.dash-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  color: var(--text);
  font: 600 14px/1.3 var(--font-display);
  user-select: none;
  transition: background-color 0.15s;
}
.dash-section > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 1.75px solid var(--faint);
  border-bottom: 1.75px solid var(--faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.22s var(--ease-out);
}
.dash-section:not([open]) > summary::after {
  transform: rotate(-45deg);
}
.dash-section > summary::-webkit-details-marker {
  display: none;
}
.dash-section > summary:hover {
  background: var(--panel-2);
}
.dash-section[open] > summary {
  border-bottom: 1px solid var(--line);
}
.dash-section > *:not(summary) {
  margin: 18px;
}
.dash-section[open] > *:not(summary) {
  animation: reveal 0.24s var(--ease-out);
}
.dash-section > .chart-grid + .chart-grid {
  margin-top: -4px;
}
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 10px;
}
.stat-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-2);
  padding: 14px 16px 13px;
  min-width: 0;
}
.stat-card .stat-label {
  display: block;
  color: var(--dim);
  font-size: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-card .stat-label::first-letter {
  text-transform: uppercase;
}
.stat-card strong {
  display: block;
  font: 600 26px/1.05 var(--font-display);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.table-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.table-counts button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  text-align: left;
  background: var(--panel-2);
  border-color: var(--line);
  border-radius: var(--r-md);
  font-weight: 500;
}
.table-counts button strong {
  font: 600 14px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.table-counts button:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent-ring);
}

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.breakdown {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.breakdown > div:last-child {
  border-bottom: 0;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.chart-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  padding: 16px;
  min-width: 0;
}
.chart {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.bar-chart {
  display: grid;
  grid-template-columns: minmax(60px, max-content) minmax(80px, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
}
.bar-row {
  display: contents;
}
.bar-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dim);
}
.bar-row strong {
  font-weight: 600;
  min-width: 2ch;
  text-align: right;
}
.bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--raised);
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left center;
  animation: grow-x 0.6s var(--ease-out);
}
.compare-chart {
  display: grid;
  gap: 14px;
}
.compare-track {
  display: flex;
  gap: 2px;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--raised);
}
.compare-segment {
  display: block;
  min-width: 3px;
  border-radius: 2px;
}
.compare-segment:first-child {
  border-radius: 999px 2px 2px 999px;
}
.compare-segment:last-child {
  border-radius: 2px 999px 999px 2px;
}
.compare-segment:only-child {
  border-radius: 999px;
}
.compare-segment.s0,
.legend-dot.s0 { background: var(--segment-0); }
.compare-segment.s1,
.legend-dot.s1 { background: var(--segment-1); }
.compare-segment.s2,
.legend-dot.s2 { background: var(--segment-2); }
.compare-segment.s3,
.legend-dot.s3 { background: var(--segment-3); }
.compare-segment.s4,
.legend-dot.s4 { background: var(--segment-4); }
.compare-segment.s5,
.legend-dot.s5 { background: var(--segment-5); }
.compare-legend {
  display: grid;
  gap: 7px;
}
.compare-legend > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}
.compare-legend > div > span:nth-child(2) {
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-legend strong {
  font-weight: 600;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.trend {
  display: flex;
  flex-direction: column;
}
.trend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.trend-head h4.sec {
  margin: 0;
}
.trend-range {
  color: var(--faint);
  font-size: 11px;
}
.trend-figures {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 14px;
}
.trend-total {
  font: 600 26px/1 var(--font-display);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.trend-today {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--raised);
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.trend-today.has {
  background: var(--accent-soft);
  color: var(--accent);
}
.trend-plot {
  position: relative;
  padding-top: 14px;
}
.trend-max {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--faint);
  font-size: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.trend-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--days, 14), minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  height: 104px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px solid var(--line-strong);
}
.trend-day {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  cursor: default;
}
.trend-bar {
  display: block;
  width: 100%;
  border-radius: 4px 4px 1px 1px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  transform-origin: bottom center;
  animation: grow-y 0.55s var(--ease-out);
  transition: background-color 0.15s;
}
.trend-day:last-child .trend-bar {
  background: var(--accent);
}
.trend-day:hover .trend-bar {
  background: var(--accent-strong);
}
.trend-day.zero::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}
.trend-day::before {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: 2;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--text);
  color: var(--panel);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 3px);
  transition: opacity 0.12s, transform 0.12s var(--ease-out);
}
.trend-day:hover::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
.trend-day:first-child::before {
  left: 0;
  transform: translate(0, 3px);
}
.trend-day:first-child:hover::before {
  transform: none;
}
.trend-day:last-child::before {
  left: auto;
  right: 0;
  transform: translate(0, 3px);
}
.trend-day:last-child:hover::before {
  transform: none;
}
.trend-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--faint);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.trend-empty {
  display: grid;
  place-items: center;
  height: 134px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--faint);
  font-size: 12px;
}
.chart-none {
  color: var(--faint);
  font-size: 12px;
  padding: 18px 0;
}
.legend-pct {
  display: inline-block;
  min-width: 38px;
  margin-left: 8px;
  color: var(--faint);
  font-weight: 500;
  text-align: right;
}
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px;
}
.check-grid .checkline {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 0;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.check-grid .checkline:hover {
  background: var(--panel-2);
  border-color: var(--line-strong);
}
.check-grid .checkline:has(input:checked) {
  border-color: var(--accent-ring);
  background: var(--accent-soft);
}

.campaign {
  display: grid;
  gap: 14px;
}
.campaign .dash-section {
  margin: 0;
  background: var(--panel-2);
}
.campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 14px;
}
.campaign label,
.campaign-grid label {
  display: block;
}
.campaign .name,
.campaign-grid .name,
.sql-console .name {
  display: block;
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
}
.campaign .name::first-letter,
.campaign-grid .name::first-letter {
  text-transform: uppercase;
}
.campaign textarea {
  min-height: 80px;
}
.campaign .checkline,
.sql-console .checkline {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: end;
  min-height: 38px;
  cursor: pointer;
}
.sql-console .checkline {
  margin-top: 10px;
}
.campaign .buttons,
.sql-console .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sql-console {
  display: grid;
  gap: 4px;
}
.sql-console .buttons {
  margin: 8px 0 12px;
}
.wide-field {
  grid-column: 1 / -1;
}
.campaign-result {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-2);
  padding: 12px 14px;
}
.campaign-result > strong {
  display: block;
  margin-bottom: 8px;
  font: 600 14px/1.3 var(--font-display);
}
.campaign-result.err {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-bg);
  margin-top: 0;
}
.sql-input {
  width: 100%;
  min-height: 180px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.sql-output {
  min-height: 180px;
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--code-text);
  padding: 12px 14px;
  font: 12px/1.55 var(--font-mono);
  white-space: pre;
}

/* rows --------------------------------------------------------------- */
.row {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  margin-bottom: 10px;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 148px;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.row:hover {
  border-color: var(--line-strong);
}
.row:has(> .row-card[open]) {
  border-color: var(--accent-ring);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* the collapsed card ---------------------------------------------------- */
.row-card > summary.row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color 0.15s;
}
.row-card > summary.row-head::-webkit-details-marker {
  display: none;
}
.row-card > summary.row-head:hover {
  background: var(--panel-2);
}
.row-card[open] > summary.row-head {
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.row-headline {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.row-titleline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}

/* the one fact worth scanning for */
.headline {
  --tone: var(--dim);
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent);
  background: color-mix(in srgb, var(--tone) 8%, var(--panel));
  color: var(--tone);
  min-width: 0;
}
.headline-label {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
}
.headline-label::first-letter {
  text-transform: uppercase;
}
.headline-text {
  font: 500 15px/1.35 var(--font-display);
  letter-spacing: -0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.headline.tone-danger { --tone: var(--danger); }
.headline.tone-warn { --tone: var(--warn); }
.headline.tone-ok { --tone: var(--ok); }
.headline.tone-info { --tone: var(--info); }
.headline.tone-mute {
  --tone: var(--dim);
  background: var(--raised);
  border-color: var(--line);
}
.headline.tone-quote {
  --tone: var(--text);
  background: var(--panel-2);
  border-color: var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px var(--r-md) var(--r-md) 4px;
}
.headline.tone-quote .headline-label {
  color: var(--dim);
}
.headline.tone-quote .headline-text {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 450;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.row-head .title {
  font-weight: 600;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.row-head .pk {
  color: var(--faint);
  font: 11px var(--font-mono);
}
.row-open {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 500;
  transition: color 0.15s, background-color 0.15s;
}
.row-open::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1.5px, -1.5px);
  transition: transform 0.22s var(--ease-out);
}
.row-card > summary.row-head:hover .row-open {
  color: var(--dim);
  background: var(--raised);
}
.row-card[open] .row-open {
  color: var(--accent);
  background: var(--accent-soft);
}
.row-card[open] .row-open::after {
  transform: rotate(-135deg) translate(-1.5px, -1.5px);
}

/* key facts, inline with the title */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px;
  min-height: 21px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--dim);
  font-size: 11.5px;
  white-space: nowrap;
}
.chip.on {
  color: var(--ok);
  border-color: var(--ok-line);
  background: color-mix(in srgb, var(--ok) 8%, var(--panel));
}
.chip.on::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.chip.off {
  color: var(--faint);
}

/* who this row involves */
.who-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.who-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  min-width: 0;
}
.who-chip.flagged {
  border-color: var(--danger-line);
  background: var(--danger-bg);
}
.who-chip.missing,
.who-chip:not(:has(.avatar)) {
  padding-left: 12px;
}
.who-chip .avatar.sm {
  width: 32px;
  height: 32px;
}
.who-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.who-role {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 500;
}
.who-role::first-letter {
  text-transform: uppercase;
}
.who-text strong {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* everything behind the click */
.row-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}
.row-card[open] > .row-body {
  animation: reveal 0.22s var(--ease-out);
}
@media (max-width: 1100px) {
  .row-body {
    grid-template-columns: 1fr;
  }
}
.row-body > .important,
.row-body > .report-panel {
  grid-column: 1 / -1;
}
.row-body .cols {
  padding: 14px 16px;
}
.row-body .cols .pk {
  display: block;
  margin: -4px 0 10px;
  color: var(--faint);
  font: 11px var(--font-mono);
  word-break: break-all;
}
.row-select {
  display: flex;
  align-items: center;
  padding: 4px;
  margin: -4px;
  cursor: pointer;
}
.row-select input {
  width: 16px;
  height: 16px;
}

.avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--raised);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--line);
}
.avatar.sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.avatar.md {
  width: 40px;
  height: 40px;
  font-size: 13px;
}
.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.2s var(--ease-out);
}
.avatar:hover img {
  transform: scale(1.06);
}

.important {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 18px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.important-item {
  min-width: 0;
}
.important-key {
  display: block;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 2px;
}
.important-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.report-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 12px;
}
.report-head h4.sec {
  margin-bottom: 4px;
}
.report-reason {
  display: block;
  font: 600 17px/1.3 var(--font-display);
  color: var(--danger);
}
.report-details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: 12px;
  overflow: auto;
}
.report-users {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.report-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: 12px;
}
.report-user > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.report-user > div > .important-key,
.report-user > div > strong {
  flex-basis: 100%;
}
.report-user strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.report-meta .important-key {
  margin: 0;
}

.row-detail {
  border-top: 1px solid var(--line);
}
.row-detail > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  color: var(--dim);
  cursor: pointer;
  list-style: none;
}
.row-detail > summary::-webkit-details-marker {
  display: none;
}
.row-detail > summary:hover {
  color: var(--text);
  background: var(--panel-2);
}
.row-detail[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--accent);
}

.cols,
.users {
  padding: 14px 16px;
  min-width: 0;
}
.users {
  border-right: 1px solid var(--line);
}
@media (max-width: 1100px) {
  .users {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

table.kv {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
table.kv tr + tr td {
  border-top: 1px solid var(--line);
}
table.kv td {
  padding: 5px 0;
  vertical-align: top;
  word-break: break-word;
}
table.kv td.k {
  width: 38%;
  color: var(--dim);
  padding-right: 12px;
  font-size: 12px;
}
table.kv td.v {
  width: 62%;
  font-variant-numeric: tabular-nums;
}
.null {
  color: var(--faint);
  font-style: italic;
}
.bool-t {
  color: var(--ok);
  font-weight: 500;
}
.bool-f {
  color: var(--danger);
  font-weight: 500;
}
pre.json {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  overflow-x: auto;
  font: 11.5px/1.5 var(--font-mono);
  color: var(--code-text);
}

/* related users ------------------------------------------------------ */
.user-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.user-card:last-child {
  margin-bottom: 0;
}
.user-card[open] {
  border-color: var(--line-strong);
}
.user-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px 8px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  transition: background-color 0.15s;
}
.user-card > summary::-webkit-details-marker {
  display: none;
}
.user-card > summary:hover {
  background: var(--panel-2);
}
.user-card[open] > summary {
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.role {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 1px 7px;
}
.role::first-letter {
  text-transform: uppercase;
}
.uname {
  font-weight: 600;
}
.uid {
  color: var(--faint);
  font: 11px/1.4 var(--font-mono);
  letter-spacing: -0.1px;
}
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  padding: 1px 7px;
  border: 1px solid;
}
.badge.blocked {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-bg);
}
.badge.banned {
  color: var(--warn);
  border-color: var(--warn-line);
  background: var(--warn-bg);
}

.maps-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 9px 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-decoration: none;
  color: var(--dim);
  background: var(--panel);
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.maps-btn::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sig-red);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sig-red) 22%, transparent);
}
.maps-btn:hover {
  color: var(--accent);
  border-color: var(--accent-ring);
  background: var(--accent-soft);
}

/* Badges live in a wrapper because some of them (banned, orphaned) only arrive
   once the user's full record has been fetched, and the wrapper is what gets
   repainted. Empty, it must not eat a flex gap. */
.user-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.user-badges:empty {
  display: none;
}
.who-city {
  color: var(--faint);
  font-size: 11px;
}
.user-detail {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.user-card[open] > .user-detail {
  animation: reveal 0.22s var(--ease-out);
}
@media (max-width: 1500px) {
  .user-detail {
    grid-template-columns: 1fr;
  }
}

/* actions ------------------------------------------------------------ */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.bulk-bar {
  position: sticky;
  top: 70px;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--topbar-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  padding: 8px 8px 8px 14px;
  margin-bottom: 12px;
}
.bulk-bar .checkline {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
  cursor: pointer;
}
.bulk-bar input {
  width: 16px;
  height: 16px;
}
.bulk-bar button {
  margin-left: auto;
}

/* global ops --------------------------------------------------------- */
#content > div > h4.sec {
  margin: 26px 2px 12px;
}
.op {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  padding: 14px 16px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.op:hover {
  border-color: var(--line-strong);
}
.op h3 {
  grid-column: 1;
  font: 600 13.5px/1.35 var(--font-display);
}
.op p {
  grid-column: 1;
  color: var(--dim);
  max-width: 75ch;
}
.op p:empty {
  display: none;
}
.op > button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* modal -------------------------------------------------------------- */
.backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
  animation: fade-in 0.18s var(--ease-out);
}
.modal {
  width: 100%;
  max-width: 580px;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  box-shadow: var(--shadow-modal);
  animation: rise 0.24s var(--ease-out);
}
.modal.wide {
  max-width: 880px;
}
.modal h2,
.modal > h3 {
  font: 600 17px/1.3 var(--font-display);
  letter-spacing: -0.2px;
  margin-bottom: 12px;
}
.modal > h3 + .hint {
  margin: -8px 0 4px;
}
.modal .step {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}
.modal .step::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.modal p {
  margin-bottom: 12px;
}
.modal .warn {
  display: flex;
  gap: 10px;
  border: 1px solid var(--danger-line);
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--r-md);
  padding: 11px 13px;
  margin-bottom: 14px;
  font-weight: 500;
}
.modal label {
  display: block;
  margin-bottom: 13px;
}
.modal label .name {
  display: block;
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
}
.modal textarea {
  min-height: 76px;
}
.modal textarea.code-input {
  min-height: 230px;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.modal .checkline {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.modal .checkline input {
  width: 16px;
  height: 16px;
}
.modal .buttons,
.modal .modal-actions {
  position: sticky;
  bottom: -22px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 18px -24px -22px;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.modal .target {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.modal .target > div {
  padding: 2px 0;
}
.modal .err:empty {
  margin-top: 0;
  min-height: 0;
}

.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raised);
  margin-bottom: 16px;
}
.segmented button {
  flex: 1;
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  color: var(--dim);
  border-radius: 7px;
}
.segmented button:hover:not(:disabled) {
  border-color: transparent;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  color: var(--text);
}
.segmented button.active,
.segmented button.active:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(43, 43, 43, 0.1);
}
.create-panel {
  display: none;
}
.create-panel.active {
  display: block;
  animation: fade-in 0.18s var(--ease-out);
}
.edit-field-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.edit-field {
  min-width: 0;
}
.edit-field textarea.edit-value {
  min-height: 120px;
  font-family: var(--font-mono);
  font-size: 12px;
}
@media (max-width: 820px) {
  .edit-field-list {
    grid-template-columns: 1fr;
  }
}
.field-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.field-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1fr) auto;
  gap: 8px;
}
@media (max-width: 700px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.keybox {
  text-align: center;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, var(--ring-line) 22px 23px),
    var(--danger-bg);
  border: 1px solid var(--danger-line);
  border-radius: var(--r-lg);
  padding: 18px 14px 14px;
  margin-bottom: 12px;
}
.keybox .key {
  display: inline-flex;
  gap: 6px;
  font: 600 24px/1 var(--font-mono);
  color: var(--danger);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
.keybox .key span {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--panel);
  border: 1px solid var(--danger-line);
}
.keybox .hint {
  color: var(--dim);
  font-size: 11.5px;
  margin-top: 10px;
}
#keyInput {
  text-align: center;
  letter-spacing: 6px;
  text-transform: uppercase;
  font: 600 18px/1 var(--font-mono);
  padding: 12px;
}
.err {
  color: var(--danger);
  margin-top: 8px;
  min-height: 18px;
  font-weight: 500;
}
.err:empty {
  min-height: 0;
  margin-top: 0;
}

/* toast -------------------------------------------------------------- */
#toast {
  position: fixed;
  right: 18px;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 99;
  pointer-events: none;
}
#toast div {
  --tone: var(--accent);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 11px 14px 11px 12px;
  max-width: 420px;
  word-break: break-word;
  box-shadow: var(--shadow-float);
  pointer-events: auto;
  animation: toast-in 0.28s var(--ease-out);
}
#toast div::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 20%, transparent);
}
#toast div.ok {
  --tone: var(--ok);
}
#toast div.bad {
  --tone: var(--danger);
  border-color: var(--danger-line);
}
#toast .toast-text {
  flex: 1;
  min-width: 0;
  color: var(--text);
}
/* Big enough to hit without covering the message it sits next to. */
#toast .toast-close {
  flex: none;
  min-height: 0;
  border: 0;
  background: none;
  color: var(--dim);
  opacity: 0.7;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px 6px;
  margin: -2px -6px -2px 0;
  box-shadow: none;
}
#toast .toast-close:hover:not(:disabled) {
  opacity: 1;
  background: var(--raised);
  border: 0;
}

.empty {
  color: var(--dim);
  padding: 56px 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 3px, transparent 3.5px),
    radial-gradient(circle at 50% 50%, transparent 0 15px, var(--accent-ring) 15px 16px, transparent 16.5px),
    radial-gradient(circle at 50% 50%, transparent 0 29px, var(--line-strong) 29px 30px, transparent 30.5px),
    radial-gradient(circle at 50% 50%, transparent 0 43px, var(--line) 43px 44px, transparent 44.5px);
  background-size: 96px 96px;
  background-position: 50% 26px;
  background-repeat: no-repeat;
  padding-top: 138px;
}
.user-results .empty,
.chat-list .empty {
  background: none;
  padding: 20px;
}

/* image expansion ------------------------------------------------ */
.image-expand-backdrop {
  position: fixed;
  inset: 0;
  background: var(--image-overlay);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  animation: fadeIn 0.22s var(--ease-out) forwards;
  cursor: zoom-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.image-expand-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  animation: zoomIn 0.32s var(--ease-out) forwards;
}

@keyframes zoomIn {
  from {
    transform: scale(0.92) translateZ(0);
    opacity: 0;
  }
  to {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}

.image-expand-img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px var(--shadow-strong);
}

/* ---------------------------------------------------------------------------
   login gate
   --------------------------------------------------------------------------- */
body[data-auth='out'] #sidebar,
body[data-auth='out'] main {
  display: none;
}

.login-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 40%, var(--bg) 72%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 63px, var(--ring-line) 63px 64px),
    var(--bg);
  z-index: 200;
  animation: fade-in 0.3s var(--ease-out);
}

.login-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow-modal);
  animation: rise 0.36s var(--ease-out);
}

.login-card h1 {
  display: flex;
  align-items: baseline;
  margin: 0 0 -4px;
  font: 600 24px/1.1 var(--font-display);
  letter-spacing: -0.5px;
}

.login-card h1 span {
  color: var(--faint);
  font-weight: 500;
  margin-left: 6px;
}

.login-hint {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--dim);
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dim);
}

.login-card input {
  height: 42px;
  padding: 10px 12px;
}

.login-card button.primary {
  height: 42px;
  margin-top: 4px;
  font-size: 13.5px;
}

.login-error:empty {
  display: none;
}

.login-error {
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
}

.role-pill {
  display: inline-block;
  padding: 1px 8px;
  line-height: 1.5;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid currentColor;
}
.role-pill::first-letter {
  text-transform: uppercase;
}

.role-pill.role-admin {
  color: #8f6309;
  background: rgba(245, 196, 81, 0.18);
  border-color: rgba(214, 160, 40, 0.55);
}

.role-pill.role-moderator {
  color: #586274;
  background: rgba(195, 203, 217, 0.26);
  border-color: rgba(140, 150, 168, 0.55);
}

:root[data-theme="dark"] .role-pill.role-admin {
  color: #f5c451;
  background: rgba(245, 196, 81, 0.13);
  border-color: rgba(245, 196, 81, 0.5);
}

:root[data-theme="dark"] .role-pill.role-moderator {
  color: #c3cbd9;
  background: rgba(195, 203, 217, 0.1);
  border-color: rgba(195, 203, 217, 0.4);
}

/* staff stand out in the who-strip too */
.who-chip.staff-admin {
  border-color: rgba(214, 160, 40, 0.5);
  background: rgba(245, 196, 81, 0.09);
}

.who-chip.staff-moderator {
  border-color: rgba(140, 150, 168, 0.55);
  background: rgba(195, 203, 217, 0.12);
}

/* ---------------------------------------------------------------------------
   chat screen
   --------------------------------------------------------------------------- */
.modal.chat-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 90vh;
  overflow: hidden;
  padding: 18px 18px 20px;
}

.chat-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.chat-header-main {
  flex: 1;
  min-width: 0;
}

.chat-header h3 {
  margin: 0;
  font: 600 17px/1.3 var(--font-display);
}

.chat-header .hint {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--dim);
}

.chat-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}

.chat-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.chat-party {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  min-width: 0;
}

.chat-party.is-reported {
  border-color: var(--danger-line);
  background: var(--danger-bg);
}

.chat-party > div {
  min-width: 0;
}

.chat-party strong {
  font-size: 13px;
}

.chat-party .uid {
  display: block;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.party-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
}
.party-pill::first-letter {
  text-transform: uppercase;
}

.party-pill.reported {
  color: #fff;
  background: var(--sig-red);
}

.party-pill.reporter {
  color: var(--dim);
  border: 1px solid var(--line-strong);
}

.chat-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--raised);
}

.chat-avatar-fallback {
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
}

.chat-avatar-spacer {
  width: 28px;
  flex: 0 0 28px;
}

/* the thread itself */
.chat-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
}

.chat-day {
  display: flex;
  justify-content: center;
  margin: 12px 0 6px;
}

.chat-day span {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
}

.chat-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 76%;
}

.chat-line.first {
  margin-top: 10px;
}

.chat-line.left {
  align-self: flex-start;
}

.chat-line.right {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-stack {
  min-width: 0;
}

.chat-sender {
  margin: 0 4px 3px;
  font-size: 11px;
  color: var(--dim);
}

.chat-line.right .chat-sender {
  text-align: right;
}

.chat-bubble {
  padding: 8px 12px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  min-width: 0;
}

/* the little tail that makes it read as a chat */
.chat-line.left.first .chat-bubble {
  border-bottom-left-radius: 5px;
}

.chat-line.right.first .chat-bubble {
  border-bottom-right-radius: 5px;
}

.chat-line.right .chat-bubble {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}

.chat-line.reported .chat-bubble {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: var(--text);
}

.chat-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13.5px;
  line-height: 1.45;
}

.chat-time {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  margin-top: 2px;
  font-size: 10px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.chat-read {
  letter-spacing: -1px;
}

/* chat picker */
.chat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 55vh;
  overflow-y: auto;
  margin-top: 10px;
}
.chat-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  transition: border-color 0.15s;
}
.chat-list-item:hover {
  border-color: var(--line-strong);
}
.chat-list-item.locked {
  opacity: 0.66;
}
.chat-list-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.chat-list-main > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-list-main strong {
  font-size: 13px;
}
.chat-list-main .uid {
  font-family: var(--font-ui);
  font-size: 11.5px;
}

/* ---------------------------------------------------------------------------
   force match
   --------------------------------------------------------------------------- */
.force-match {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.force-match > .hint {
  margin: 0;
  color: var(--dim);
  font-size: 12.5px;
  max-width: 75ch;
}
.force-match > button {
  align-self: flex-start;
}
.pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  min-width: 0;
}
.picker h4.sec {
  margin-bottom: 2px;
}
.user-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}
.user-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  min-width: 0;
  animation: fade-in 0.16s var(--ease-out);
}
.user-result .chat-avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}
.user-result.flagged {
  border-color: var(--danger-line);
  background: var(--danger-bg);
}
.user-result-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.user-result-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.user-result-head strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-result .uid {
  font-size: 10px;
}
.user-result-facts {
  font-size: 11.5px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chosen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.user-chosen > .user-result {
  align-self: stretch;
}
.user-chosen:empty {
  display: none;
}
.user-chosen .user-result {
  border-color: var(--accent-ring);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.match-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.match-pair .user-result {
  flex: 1;
  background: var(--panel-2);
}
.match-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 16px;
}
@media (max-width: 720px) {
  .pickers,
  .match-pair {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   loading skeletons
   --------------------------------------------------------------------------- */
.skeletons {
  display: flex;
  flex-direction: column;
}
.skeleton-row {
  padding: 14px 16px;
  content-visibility: visible;
}
.sk-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sk-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.sk-strip {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.sk {
  display: block;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--raised) 25%, color-mix(in srgb, var(--raised) 55%, var(--line-strong)) 37%, var(--raised) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
}
.sk-line {
  height: 11px;
}
.sk-line.w40 {
  width: 40%;
}
.sk-line.w70 {
  width: 70%;
}
.sk-chip {
  width: 130px;
  height: 28px;
  border-radius: 999px;
}
.sk-stat {
  height: 76px;
  border-radius: var(--r-md);
}
.sk-panel {
  height: 220px;
  border-radius: var(--r-lg);
}
.sk-title {
  width: 140px;
  height: 14px;
  margin: 2px 0 18px;
}
@keyframes sk-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------------------------------------------------------------------------
   pagination
   --------------------------------------------------------------------------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 22px 0 8px;
  font-variant-numeric: tabular-nums;
}
.pager button {
  min-width: 34px;
  height: 34px;
  padding: 5px 10px;
  border-color: transparent;
  background: transparent;
  color: var(--dim);
}
.pager button:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
}
.pager button.active,
.pager button.active:hover:not(:disabled) {
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.pager button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pager-gap {
  padding: 0 4px;
  color: var(--faint);
}

.participant-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.participant .user-card {
  margin-bottom: 0;
}
.participant-joined {
  display: block;
  padding: 3px 6px 0;
  font-family: var(--font-ui);
}
.participant-status {
  min-height: 1px;
  margin-top: 8px;
}

.loc-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.loc-row input {
  flex: 1;
  min-width: 0;
}
.loc-row button {
  height: 38px;
}
.loc-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-2);
  font-size: 12px;
}
.loc-result:empty {
  display: none;
}
.loc-result button {
  align-self: flex-start;
}
.loc-warn {
  color: var(--danger);
}
.loc-ok {
  color: var(--ok);
  font-weight: 500;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes grow-x {
  from { transform: scaleX(0); }
}
@keyframes grow-y {
  from { transform: scaleY(0); }
}
@keyframes status-ping {
  0% { box-shadow: 0 0 0 0 var(--accent-ring); }
  100% { box-shadow: 0 0 0 7px transparent; }
}
@keyframes sweep {
  from { background-position: -40% 0; }
  to { background-position: 140% 0; }
}

/* ---------------------------------------------------------------------------
   narrow screens
   ---------------------------------------------------------------------------
   The panel was laid out for a desk: a fixed sidebar, a single-row top bar,
   two-up grids and dialogs centred in whitespace. On a phone the sidebar alone
   is half the screen, so below 900px it becomes an off-canvas drawer, the top
   bar wraps onto its own rows, dialogs become bottom sheets, and every two-up
   grid collapses. Nothing is hidden — the same panel, at a size a thumb can
   work.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* the drawer ------------------------------------------------------- */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: min(84vw, 300px);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease-out), box-shadow 0.28s;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body[data-nav='open'] #sidebar {
    transform: none;
    box-shadow: var(--shadow-modal);
  }
  body[data-nav='open'] #nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: var(--overlay);
    animation: fade-in 0.2s var(--ease-out);
  }
  /* the login gate hides the whole shell; its backdrop must go with it */
  body[data-auth='out'] #nav-backdrop {
    display: none;
  }
  /* the page behind an open drawer must not scroll under your finger */
  body[data-nav='open'] {
    overflow: hidden;
  }
  #nav-toggle {
    display: inline-flex;
  }

  /* top bar ---------------------------------------------------------- */
  /* three rows: controls, then the search field, then the row counter. */
  #topbar {
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  }
  #nav-toggle {
    order: 0;
    margin-right: auto;
  }
  #create-row {
    order: 2;
  }
  #refresh {
    order: 3;
  }
  #theme-toggle {
    order: 4;
    min-width: 0;
  }
  #search {
    order: 5;
    flex: 1 1 100%;
    max-width: none;
    height: 42px;
  }
  #status {
    order: 6;
    flex: 1 1 100%;
    margin-left: 0;
  }
  /* an empty status line would still take a row's worth of gap */
  #status:empty {
    display: none;
  }

  #content {
    padding: 12px max(12px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .bulk-bar {
    position: static;
  }

  /* touch targets ----------------------------------------------------- */
  button,
  #create-row,
  #refresh,
  .theme-toggle {
    min-height: 40px;
    height: auto;
  }
  #nav button {
    min-height: 42px;
    padding: 10px 12px 10px 24px;
  }
  .nav-section > summary {
    padding: 14px 10px 8px;
  }
  .row-select input,
  .bulk-bar input,
  .modal .checkline input {
    width: 18px;
    height: 18px;
  }

  /* iOS Safari zooms the whole page in when a control under 16px takes focus,
     and the page never zooms back out. Every field that inherits the 13px body
     font has to be named here, because `font: inherit` on a class selector
     outranks a bare `input` rule. */
  input,
  textarea,
  select,
  #search,
  #keyInput,
  .sql-input,
  .modal textarea.code-input,
  .edit-field textarea.edit-value,
  .login-card input {
    font-size: 16px;
  }

  /* dashboard --------------------------------------------------------- */
  .dash-section > summary {
    padding: 13px 14px;
  }
  .dash-section > *:not(summary) {
    margin: 12px;
  }
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .stat-card {
    padding: 12px;
  }
  .stat-card strong {
    font-size: 21px;
  }
  .table-counts {
    grid-template-columns: 1fr;
  }
  .chart-grid,
  .breakdown-grid {
    gap: 10px;
  }
  .chart-panel {
    padding: 12px;
  }
  .trend-bars {
    gap: 3px;
  }
  .bar-chart {
    grid-template-columns: minmax(56px, max-content) minmax(56px, 1fr) auto;
    gap: 8px 8px;
  }
  .check-grid,
  .campaign-grid {
    grid-template-columns: 1fr;
  }
  .op {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .op > button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 8px;
  }

  /* rows -------------------------------------------------------------- */
  .row {
    margin-bottom: 10px;
  }
  .row-card > summary.row-head {
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }
  .row-select {
    padding-top: 6px;
  }
  /* "details" spelled out costs a third of the line; the caret says the same */
  .row-open {
    align-self: center;
    font-size: 0;
    gap: 0;
    padding: 8px;
  }
  .headline {
    padding: 7px 10px;
  }
  .headline-text {
    font-size: 14px;
  }
  .row-body .cols,
  .users,
  .important,
  .who-strip,
  .actions {
    padding-left: 12px;
    padding-right: 12px;
  }
  .report-panel {
    padding: 12px;
  }
  .report-reason {
    font-size: 15px;
  }
  .row-detail > summary {
    padding: 10px 12px;
  }
  table.kv td.k {
    width: 42%;
  }
  /* two actions per row rather than a ragged wrap of tiny targets */
  .actions button {
    flex: 1 1 auto;
    min-width: 44%;
  }
  .bulk-bar {
    padding: 10px 12px;
  }
  .bulk-bar button {
    flex: 1 1 100%;
    margin-left: 0;
  }
  .user-detail {
    padding: 10px 8px;
  }

  /* dialogs become bottom sheets -------------------------------------- */
  .backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal,
  .modal.wide {
    max-width: none;
    max-height: 92vh;
    max-height: 92dvh;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    animation: sheet-up 0.3s var(--ease-out);
  }
  .modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: -8px auto 12px;
    border-radius: 999px;
    background: var(--line-strong);
  }
  .modal.chat-modal::before {
    margin-bottom: 0;
  }
  .modal .buttons,
  .modal .modal-actions {
    bottom: calc(-16px - env(safe-area-inset-bottom));
    margin: 14px -16px calc(-16px - env(safe-area-inset-bottom));
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .modal .buttons button,
  .modal .modal-actions button {
    flex: 1 1 auto;
    min-height: 44px;
  }
  .modal textarea.code-input {
    min-height: 160px;
  }
  .edit-field textarea.edit-value {
    min-height: 90px;
  }
  .segmented button {
    padding: 6px 4px;
  }
  /* Stacked, a name/value/remove trio is three identical boxes with nothing to
     say where one field ends — so each row gets its own card. */
  .field-row {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel-2);
  }
  .field-row button {
    justify-self: end;
    min-width: 96px;
  }

  /* chat -------------------------------------------------------------- */
  .modal.chat-modal {
    max-height: 94vh;
    max-height: 94dvh;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  }
  .chat-parties {
    grid-template-columns: 1fr;
  }
  .chat-thread {
    min-height: 200px;
    padding: 10px;
  }
  .chat-line {
    max-width: 88%;
  }
  .chat-list {
    max-height: 60vh;
  }

  /* operations -------------------------------------------------------- */
  .sql-input {
    min-height: 130px;
  }
  .sql-output {
    min-height: 120px;
    max-height: 320px;
  }

  /* toast, lightbox, login -------------------------------------------- */
  /* Full width at the top would sit on the menu button and the search field, so
     on a phone it becomes a snackbar: bottom of the screen, newest nearest the
     thumb, over content that scrolls rather than over the controls. */
  #toast {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    flex-direction: column-reverse;
  }
  #toast div {
    max-width: none;
    animation-name: snack-in;
  }
  .image-expand-container {
    max-width: 94vw;
    max-height: 80vh;
  }
  .login-wrap {
    padding: 16px;
  }
  .login-card {
    padding: 24px 20px;
  }

  .pager button {
    min-width: 40px;
    min-height: 40px;
  }
  .empty {
    padding: 132px 16px 32px;
  }
}

@keyframes sheet-up {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}
@keyframes snack-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* A phone held in one hand: the same layout, with the last of the desk-sized
   padding and label text taken out. */
@media (max-width: 560px) {
  #topbar {
    padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  }
  #content {
    padding: 10px max(10px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
  /* the toggle's label is redundant next to its own switch */
  .theme-toggle {
    font-size: 0;
    width: 44px;
    min-width: 0;
    padding: 0;
    gap: 0;
  }
  .theme-toggle::before {
    margin-right: 0;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-card strong {
    font-size: 19px;
  }
  .row-titleline {
    gap: 4px 8px;
  }
  .who-strip {
    gap: 6px;
  }
  .chat-line {
    max-width: 92%;
  }
  .match-x {
    align-self: center;
  }
  table.kv td.k {
    width: 46%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}