/* ============================================================
   Mysterious Matters — admin.css
   A standalone control panel.

   The panel no longer renders inside the forum's chrome. It has its
   own header, its own footer, and it is pinned to the viewport: the
   navigation column and the content column scroll independently and
   the page itself never scrolls. That fixed two-pane behaviour is
   most of what makes a control panel feel like an application rather
   than a long web page with a sidebar bolted on.

   Figure and ground matter as much as colour. The reference uses a
   saturated sidebar, a light content field, and lighter cards on top
   of it. This keeps the dark palette but preserves that same
   three-step relationship: sidebar darkest, content field a step up,
   cards a step above that.
   ============================================================ */

.acp-html, body.acp {
  height: 100%;
  margin: 0;
  overflow: hidden;                  /* the page never scrolls */
  background: var(--acp-field);
}

/* Advanced Systems and Extensions still render inside the forum page,
   so the tokens need to exist there too until they move over. */
:root {
  --acp-header: 46px;
  --acp-nav-w: 250px;
  --acp-rail: #0a0e1a;
  --acp-field: #121826;
  --acp-card: #1a2233;
  --acp-line: rgba(150,165,200,.14);
  --acp-line-soft: rgba(150,165,200,.08);
}

body.acp {
  --acp-header: 46px;
  --acp-nav-w: 250px;
  --acp-rail: #0a0e1a;               /* sidebar — darkest */
  --acp-field: #121826;              /* content field — one step up */
  --acp-card: #1a2233;               /* cards — one step above that */
  --acp-line: rgba(150,165,200,.14);
  --acp-line-soft: rgba(150,165,200,.08);
  font-family: var(--body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Header — the panel's own, not the forum's
   ============================================================ */
.p-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--acp-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 0;
  background: #060a13;
  border-bottom: 1px solid rgba(0,0,0,.6);
}
.p-header-buttons { display: flex; align-items: center; gap: 2px; min-width: 0; }
.p-header-buttons--main { flex: 1 1 auto; min-width: 0; }

.p-header-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--acp-header);
  padding: 0 13px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 400 13.5px var(--body);
  white-space: nowrap;
}
.p-header-button:hover { background: rgba(255,255,255,.05); color: var(--text); }
.p-header-button--title {
  color: var(--text);
  font: 600 15px var(--serif);
  overflow: hidden; text-overflow: ellipsis;
}
.p-header-button--home { padding: 0 10px 0 14px; }
.p-header-mark {
  width: 20px; height: 20px;
  position: relative;
  border: 2px solid var(--teal);
  border-radius: 50%;
}
.p-header-mark:after {
  content: '';
  position: absolute;
  left: 4px; top: 6px;
  width: 8px; height: 4px;
  border-radius: 50%;
  background: var(--amber2);
}
.p-header-button--search kbd {
  padding: 2px 5px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  background: rgba(255,255,255,.05);
  font: 700 9px var(--mono);
}
.p-header-button--nav { display: none; flex-direction: column; gap: 4px; padding: 0 14px; }
.p-header-button--nav span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--muted); }

/* ============================================================
   Two panes, each scrolling on its own
   ============================================================ */
.p-body-container { padding-top: var(--acp-header); height: 100vh; }
.p-body {
  display: grid;
  grid-template-columns: var(--acp-nav-w) minmax(0, 1fr);
  height: calc(100vh - var(--acp-header));
}

.p-nav {
  min-width: 0;
  min-height: 0;   /* grid items default to min-height:auto, which grows
                      to fit content and defeats the inner overflow-y:auto
                      below — this is the actual cause of "nothing scrolls" */
  background: var(--acp-rail);
  border-right: 1px solid rgba(0,0,0,.5);
}
.p-nav-inner {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 20px;
}
.p-nav-inner::-webkit-scrollbar { width: 7px; }
.p-nav-inner::-webkit-scrollbar-thumb { background: rgba(150,165,200,.16); border-radius: 4px; }

.p-main { min-width: 0; min-height: 0; background: var(--acp-field); }
.p-main-inner {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 28px 40px;
}
.p-main-inner::-webkit-scrollbar { width: 9px; }
.p-main-inner::-webkit-scrollbar-thumb { background: rgba(150,165,200,.16); border-radius: 5px; }

/* ============================================================
   Sidebar
   ============================================================ */
.p-nav-search { padding: 12px 12px 6px; }
.p-nav-search input {
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px;
  background: rgba(0,0,0,.35);
  color: var(--text);
  font: 400 13px var(--body);
  outline: none;
}
.p-nav-search input:focus { border-color: rgba(95,208,207,.5); }

.p-nav-listRoot, .p-nav-listSection { list-style: none; margin: 0; padding: 0; }
.p-nav-section { border-bottom: 1px solid rgba(255,255,255,.035); }

.p-nav-sectionHeader { display: flex; align-items: stretch; }
.p-nav-sectionLink {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 0 6px 0 15px;
  color: var(--muted);
  font: 500 14px var(--body);
}
.p-nav-sectionLink > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.p-nav-sectionHeader:hover { background: rgba(255,255,255,.045); }
.p-nav-sectionHeader:hover .p-nav-sectionLink { color: var(--text); }
.p-nav-section.is-active > .p-nav-sectionHeader { background: rgba(95,208,207,.09); }
.p-nav-section.is-active .p-nav-sectionLink { color: var(--teal2); }

.acp-icon { width: 17px; height: 17px; flex: 0 0 17px; opacity: .8; }
.p-nav-section.is-active .acp-icon { opacity: 1; }

.p-nav-sectionToggle {
  flex: 0 0 auto;
  width: 34px;
  border: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.p-nav-sectionToggle i { display: inline-block; font-style: normal; font-size: 15px; transition: transform .16s ease; }
.p-nav-section.is-active .p-nav-sectionToggle i { transform: rotate(90deg); }

.p-nav-listSection { display: none; padding: 2px 0 8px; background: rgba(0,0,0,.28); }
.p-nav-section.is-active > .p-nav-listSection { display: block; }

.p-nav-el a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 15px 0 43px;
  color: var(--dim);
  font: 400 13.5px var(--body);
}
.p-nav-el a > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.p-nav-el a:hover { background: rgba(255,255,255,.05); color: var(--text); }
.p-nav-el.is-active a {
  background: rgba(95,208,207,.13);
  color: var(--teal2);
  box-shadow: inset 3px 0 0 var(--teal);
}

.nav-count {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--amber);
  color: #1b1309;
  font: 700 9px/1 var(--mono);
}

.p-nav-empty { margin: 0; padding: 12px 15px; color: var(--dim); font-size: 13px; }
.p-nav-foot { padding: 14px 15px 0; }
.p-nav-foot a { color: var(--dim); font-size: 12.5px; }
.p-nav-foot a:hover { color: var(--teal2); }

/* ============================================================
   Main column
   ============================================================ */
.p-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 15px 0 0;
  color: var(--dim);
  font-size: 12.5px;
}
.p-breadcrumbs li + li:before { content: '›'; margin-right: 6px; opacity: .55; }
.p-breadcrumbs a { color: var(--teal2); }
.p-breadcrumbs a:hover { text-decoration: underline; }

.p-main-header { padding: 6px 0 18px; }
.p-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.p-title-value {
  margin: 0;
  font: 600 26px/1.2 var(--serif);
  letter-spacing: -.018em;
}
.p-title-pageAction { display: flex; gap: 0; flex: 0 0 auto; }
.p-title-pageAction .btn {
  border-radius: 0;
  margin-left: -1px;
  min-height: 33px;
  padding: 0 13px;
  font: 500 13px var(--body);
  letter-spacing: 0;
  text-transform: none;
}
.p-title-pageAction .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.p-title-pageAction .btn:last-child { border-radius: 0 6px 6px 0; }
.p-title-pageAction .btn:only-child { border-radius: 6px; }

.p-description { margin-top: 8px; color: var(--muted); font-size: 14px; max-width: 66ch; }
.p-content { padding-bottom: 24px; }

.p-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--acp-line-soft);
  color: var(--dim);
  font-size: 12px;
}

/* Surfaces sit a step above the field. */
.acp-list, .acp-block, .p-content .panel,
.acp-main .form, .acp-main .detail-form,
.p-content .form, .p-content .detail-form {
  background: var(--acp-card);
  border-color: var(--acp-line);
}

/* The old shells map onto the new one so Advanced Systems and
   Extensions keep working while they still render their own page. */
.admin-shell { display: grid; grid-template-columns: var(--acp-nav-w) minmax(0,1fr); gap: 0; }
.admin-main { min-width: 0; padding: 0 28px 40px; }
.admin-topbar { display: none; }

/* ============================================================
   Responsive — the sidebar becomes an off-canvas drawer
   ============================================================ */
@media (max-width: 900px) {
  .p-header-button--nav { display: flex; }
  .p-header-button--title { font-size: 14px; }
  .p-body { grid-template-columns: minmax(0, 1fr); }
  .p-nav {
    position: fixed;
    top: var(--acp-header); bottom: 0; left: 0;
    z-index: 35;
    width: min(280px, 84vw);
    transform: translateX(-101%);
    transition: transform .22s cubic-bezier(.32,.72,0,1);
    box-shadow: 24px 0 60px rgba(0,0,0,.55);
  }
  body.acp.nav-open .p-nav { transform: translateX(0); }
  body.acp.nav-open .p-main:before {
    content: '';
    position: fixed;
    inset: var(--acp-header) 0 0 0;
    z-index: 30;
    background: rgba(4,6,12,.6);
  }
  .p-main-inner { padding: 0 16px 34px; }
  .admin-main { padding: 0 16px 34px; }
}
@media (max-width: 780px) {
  .p-title-value { font-size: 22px; }
  .p-title-pageAction { width: 100%; }
  .p-title-pageAction .btn { flex: 1 1 0; }
  .p-header-buttons--opposite .p-header-button:not(.p-header-button--search) { display: none; }
  .p-header-button--search kbd { display: none; }
}
/* ============================================================
   ACP components
   Patterns lifted from how a real control panel is laid out,
   built from scratch against this markup.
   ============================================================ */

/* ---- 1. Two-column forms -----------------------------------
   The single most useful pattern in the reference: a right-aligned
   label column, the field beside it, hint text under the field.
   Labels line up into a readable edge instead of stacking above
   every input and doubling the height of the page.

   Works on both markup shapes already in the codebase — sibling
   pairs (<label>x</label><input>) via grid auto-placement, and
   wrapped labels (<label>x<select>…</select></label>) by making the
   label its own two-column grid. No markup changes needed. */

.acp-main .form,
.acp-main .detail-form {
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 18px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(14, 19, 34, .45);
  overflow: hidden;
}

/* Anything that isn't a label or a field spans both columns. */
.acp-main .form > *,
.acp-main .detail-form > * { grid-column: 1 / -1; }

.acp-main .form > label,
.acp-main .detail-form > label {
  grid-column: 1;
  align-self: baseline;
  margin: 0;
  padding: 15px 0 15px 18px;
  color: var(--muted);
  text-align: right;
  font: 500 13.5px/1.4 var(--body);
  letter-spacing: 0;
  text-transform: none;
}
.acp-main .form > .field,
.acp-main .form > input,
.acp-main .form > select,
.acp-main .form > textarea,
.acp-main .detail-form > .field {
  grid-column: 2;
  margin: 0;
  padding: 9px 11px;
  align-self: center;
}
.acp-main .form > .field,
.acp-main .detail-form > .field { margin: 11px 18px 11px 0; }

/* Wrapped labels become their own two-column row. */
.acp-main .form > label:has(> .field),
.acp-main .form > label:has(> input),
.acp-main .form > label:has(> select),
.acp-main .form > label:has(> textarea),
.acp-main .detail-form > label:has(> .field) {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  grid-column: 1 / -1;
  padding: 11px 18px;
  border-top: 1px solid rgba(150, 165, 200, .08);
}
.acp-main .form > label > .field,
.acp-main .form > label > input,
.acp-main .form > label > select,
.acp-main .form > label > textarea { text-align: left; margin: 0; }

/* Hints sit under the field, not the label. */
.acp-main .form > small,
.acp-main .form > .field-hint,
.acp-main .detail-form > small {
  grid-column: 2;
  margin: -4px 18px 12px 0;
  color: var(--dim);
  font: 400 12.5px/1.5 var(--body);
}

.acp-main .form > h2,
.acp-main .form > h3,
.acp-main .detail-form > h2 {
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .022);
  color: var(--text);
  font: 600 14px var(--serif);
}
.acp-main .form > h2:first-child,
.acp-main .detail-form > h2:first-child { border-top: 0; }
.acp-main .form > hr { margin: 0; border: 0; border-top: 1px solid var(--line); }
.acp-main .form > p { margin: 0; padding: 12px 18px; color: var(--muted); font-size: 13.5px; }

/* Checkbox rows align to the field column, not the label column. */
.acp-main .form > label.inline-check,
.acp-main .form > label:has(> input[type=checkbox]) {
  grid-template-columns: 168px minmax(0, 1fr);
}
.acp-main .form > label:has(> input[type=checkbox]) > input { justify-self: start; }

/* ---- 2. Sticky save bar ------------------------------------
   The reference keeps Save pinned to the bottom of long forms.
   Scrolling to the end of a permission matrix to find it is one of
   the things that makes an old panel feel slow. */
.acp-main .form > button,
.acp-main .form > .form-actions,
.acp-main .detail-form > button {
  position: sticky;
  bottom: 0;
  z-index: 4;
  justify-self: stretch;
  margin: 0;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: rgba(11, 15, 26, .96);
  backdrop-filter: blur(12px);
  text-align: left;
}
.acp-main .form > button { display: block; width: 100%; }

/* ---- 3. Page header with actions on the right -------------- */
.acp-pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.acp-pagehead h1 { margin: 0; font: 600 27px/1.15 var(--serif); letter-spacing: -.018em; }
.acp-pagehead p { margin: 7px 0 0; color: var(--muted); font-size: 14px; max-width: 62ch; }
.acp-actions { display: flex; gap: 0; flex: 0 0 auto; }
.acp-actions .btn {
  border-radius: 0;
  margin-left: -1px;
  min-height: 34px;
  padding: 0 13px;
  font: 500 13px var(--body);
  letter-spacing: 0;
  text-transform: none;
}
.acp-actions .btn:first-child { border-radius: 7px 0 0 7px; margin-left: 0; }
.acp-actions .btn:last-child { border-radius: 0 7px 7px 0; }
.acp-actions .btn:only-child { border-radius: 7px; }

/* ---- 4. Filter bar above lists ----------------------------- */
.acp-filter {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
.acp-filter input {
  width: min(280px, 100%);
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(0, 0, 0, .28);
  color: var(--text);
  font: 400 13px var(--body);
  outline: none;
}
.acp-filter input:focus { border-color: rgba(95, 208, 207, .5); }

/* ---- 5. List rows: icon, title, description, inline actions -
   Used for both index-style lists (a section's contents) and data
   lists (nodes, members). One component, two jobs. */
.acp-list {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(14, 19, 34, .45);
  overflow: hidden;
}
.acp-list-row,
.acp-main .admin-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(150, 165, 200, .09);
}
.acp-list-row:last-child,
.acp-main .admin-row:last-child { border-bottom: 0; }
.acp-list-row:hover,
.acp-main .admin-row:hover { background: rgba(95, 208, 207, .045); }
.acp-list-row .acp-icon { width: 19px; height: 19px; }
.acp-list-row b,
.acp-main .admin-row b {
  display: block;
  color: var(--teal2);
  font: 500 14.5px var(--body);
}
.acp-list-row small,
.acp-main .admin-row small {
  display: block;
  margin-top: 3px;
  color: var(--dim);
  font: 400 12.5px/1.5 var(--body);
  letter-spacing: 0;
  text-transform: none;
}
.acp-row-actions { display: flex; gap: 14px; align-items: center; flex: 0 0 auto; }
.acp-row-actions a { color: var(--muted); font: 400 12.5px var(--body); white-space: nowrap; }
.acp-row-actions a:hover { color: var(--teal2); }
.acp-row-actions a.danger:hover { color: var(--red); }
.acp-list-foot {
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
  color: var(--dim);
  font-size: 12.5px;
}

/* ---- 6. Sidebar sub-headings ------------------------------- */
.acp-group-body .acp-subhead {
  display: block;
  padding: 13px 9px 4px;
  color: var(--text);
  font: 600 12px var(--body);
}

@media (max-width: 780px) {
  .acp-main .form,
  .acp-main .detail-form { grid-template-columns: minmax(0, 1fr); }
  .acp-main .form > label,
  .acp-main .detail-form > label {
    grid-column: 1 / -1;
    text-align: left;
    padding: 13px 16px 5px;
  }
  .acp-main .form > label:has(> .field),
  .acp-main .form > label:has(> input),
  .acp-main .form > label:has(> select),
  .acp-main .form > label:has(> textarea),
  .acp-main .detail-form > label:has(> .field) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }
  .acp-main .form > .field,
  .acp-main .detail-form > .field { grid-column: 1 / -1; margin: 0 16px 12px; }
  .acp-main .form > small,
  .acp-main .form > .field-hint { grid-column: 1 / -1; margin: -6px 16px 12px; }
  .acp-pagehead { flex-direction: column; }
  .acp-actions { width: 100%; }
  .acp-actions .btn { flex: 1 1 0; }
  .acp-filter { justify-content: stretch; }
  .acp-filter input { width: 100%; }
  .acp-list-row, .acp-main .admin-row { grid-template-columns: minmax(0, 1fr); }
  .acp-row-actions { flex-wrap: wrap; gap: 12px; }
}

/* ---- :has() fallback ---------------------------------------
   The two-column form relies on :has() to tell a wrapped label
   (<label>Status<select>…</select></label>) from a bare one. That's
   been baseline since late 2023, but if it isn't available the
   wrapped labels would be squeezed into the 186px label column,
   which looks broken. Degrade to the old stacked layout instead. */
@supports not selector(:has(*)) {
  .acp-main .form,
  .acp-main .detail-form { display: block; padding: 18px; }
  .acp-main .form > label,
  .acp-main .detail-form > label {
    display: block;
    padding: 0;
    margin: 14px 0 6px;
    text-align: left;
  }
  .acp-main .form > .field,
  .acp-main .detail-form > .field { margin: 0 0 4px; }
  .acp-main .form > h2,
  .acp-main .form > h3 { margin: 18px -18px 12px; }
  .acp-main .form > button { position: static; margin-top: 16px; width: auto; }
}

/* ============================================================
   Dashboard
   (rebuilt — the previous stylesheet rewrite dropped these rules,
   which is why the checklist was rendering as a bare bullet list)
   ============================================================ */

/* ---- Member quick search ---- */
.acp-quicksearch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--acp-line);
  border-radius: 10px;
  background: var(--acp-card);
}
.acp-quicksearch label { color: var(--muted); font: 500 13.5px var(--body); white-space: nowrap; }
.acp-quicksearch input {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--acp-line);
  border-radius: 7px;
  background: rgba(0,0,0,.28);
  color: var(--text);
  font: 400 14px var(--body);
  outline: none;
}
.acp-quicksearch input:focus { border-color: rgba(95,208,207,.55); }
.acp-quicksearch .btn { min-height: 36px; }

/* ---- Attention rows ---- */
.dash-attention { display: grid; margin-bottom: 16px; }
.dash-attention a {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 13px;
  align-items: baseline;
  padding: 13px 18px;
  border: 1px solid rgba(232,180,90,.3);
  border-bottom: 0;
  background: rgba(232,180,90,.07);
}
.dash-attention a:first-child { border-radius: 10px 10px 0 0; }
.dash-attention a:last-child { border-bottom: 1px solid rgba(232,180,90,.3); border-radius: 0 0 10px 10px; }
.dash-attention a:only-child { border-radius: 10px; }
.dash-attention a:hover { background: rgba(232,180,90,.12); }
.dash-attention b { color: var(--amber2); font: 600 20px var(--serif); }
.dash-attention span { color: var(--text); font-size: 14.5px; }
.dash-attention em { color: var(--dim); font-style: normal; font-size: 13px; }

/* ---- Blocks ---- */
.acp-block {
  border: 1px solid var(--acp-line);
  border-radius: 10px;
  background: var(--acp-card);
  margin-bottom: 16px;
  overflow: hidden;
}
.acp-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--acp-line);
  background: rgba(255,255,255,.025);
}
.acp-block-head h2 { margin: 0; color: var(--text); font: 600 14.5px var(--serif); }
.acp-block-note { color: var(--dim); font: 400 12.5px var(--body); }
.acp-block-body { padding: 6px 18px 10px; }

/* ---- Charts: inline SVG, no library ---- */
.acp-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--acp-line);
}
.acp-charts figure { margin: 0; padding: 16px 18px 12px; background: var(--acp-card); }
.acp-chart { display: block; width: 100%; height: 150px; overflow: visible; }
.acp-chart-grid { stroke: rgba(150,165,200,.14); stroke-width: 1; stroke-dasharray: 2 4; }
.acp-chart-label { fill: var(--dim); font: 400 9px var(--mono); }
.acp-charts figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--dim);
  font-size: 11.5px;
}
.acp-charts figcaption span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.acp-charts figcaption i { width: 9px; height: 9px; border-radius: 2px; }
.acp-charts figcaption em { margin-left: auto; font-style: normal; }

.dash-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--acp-line);
  border-top: 1px solid var(--acp-line);
}
.dash-figures div { padding: 14px 18px; background: var(--acp-card); }
.dash-figures b { display: block; color: var(--text); font: 400 22px var(--mono); letter-spacing: -.02em; }
.dash-figures span { display: block; margin-top: 3px; color: var(--dim); font-size: 12px; }

/* ---- Icon grid: every section, one tap away ---- */
.acp-iconGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 1px;
  margin-bottom: 16px;
  border: 1px solid var(--acp-line);
  border-radius: 10px;
  background: var(--acp-line);
  overflow: hidden;
}
.acp-iconGrid a {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 22px 12px;
  background: var(--acp-card);
  color: var(--muted);
  text-align: center;
  transition: .14s;
}
.acp-iconGrid a:hover { background: rgba(95,208,207,.1); color: var(--teal2); }
.acp-iconGrid .acp-icon { width: 27px; height: 27px; opacity: 1; color: var(--teal2); }
.acp-iconGrid span { font: 500 13px var(--body); }

/* ---- Checklist ---- */
.checklist { margin: 0; padding: 0 18px; list-style: none; }
.checklist li {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--acp-line-soft);
}
.checklist li:last-child { border-bottom: 0; }
.checklist i { font-style: normal; font-size: 13px; color: var(--dim); }
.checklist li.done i { color: var(--teal); }
.checklist b { display: block; color: var(--text); font: 500 14.5px var(--body); }
.checklist li.done b { color: var(--dim); font-weight: 400; }
.checklist small { display: block; margin-top: 3px; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.checklist a { color: var(--teal2); font-size: 13px; white-space: nowrap; }
.checklist a:hover { text-decoration: underline; }

/* ---- Environment report ---- */
.acp-notice {
  margin: 12px 18px;
  padding: 10px 13px;
  border-left: 3px solid var(--amber);
  border-radius: 0 7px 7px 0;
  background: rgba(232,180,90,.09);
  color: var(--amber2);
  font-size: 13.5px;
}
.acp-env { width: 100%; border-collapse: collapse; }
.acp-env th, .acp-env td {
  padding: 10px 18px;
  border-top: 1px solid var(--acp-line-soft);
  text-align: left;
  font-weight: 400;
  font-size: 13.5px;
}
.acp-env tr:first-child th, .acp-env tr:first-child td { border-top: 0; }
.acp-env th { color: var(--muted); width: 40%; }
.acp-env td { color: var(--text); font-family: var(--mono); font-size: 12.5px; }
.acp-env td.is-warn { color: var(--amber2); }
.acp-env td.is-ok { color: var(--teal2); }

/* ---- Generic rows reused across sections ---- */
.dash-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 11px 18px;
  border-bottom: 1px solid var(--acp-line-soft);
}
.dash-row:last-child { border-bottom: 0; }
.dash-row-main b { display: block; color: var(--text); font: 400 14.5px var(--body); }
.dash-row-main small { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; }
.dash-row-side { color: var(--dim); font-size: 12px; white-space: nowrap; }
.dash-note { margin: 14px 18px; color: var(--dim); font-size: 13.5px; }

@media (max-width: 780px) {
  .acp-quicksearch { grid-template-columns: minmax(0,1fr); padding: 14px; }
  .acp-quicksearch label { display: none; }
  .dash-figures { grid-template-columns: 1fr 1fr; }
  .acp-iconGrid { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .acp-iconGrid a { padding: 16px 8px; }
  .checklist { padding: 0 14px; }
  .checklist li { grid-template-columns: 18px minmax(0,1fr); }
  .checklist a { grid-column: 2; margin-top: 5px; }
  .acp-env th, .acp-env td { padding: 9px 14px; }
}

/* ============================================================
   Section pages — the actual page title
   ============================================================ */

/* Every individual section (Forums, Bans, SEO, etc.) renders its own
   .section-head. acp_page_header() now only prints the breadcrumb for
   these pages, so .section-head *is* the real p-title component — it
   just needs the same visual treatment p-title already has. Fixes a
   real bug: previously three headers stacked on every section page
   (acp_page_header, a leftover hardcoded topbar, and this). */

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 6px 0 20px;
  margin: 0;
}
.section-head .eyebrow {
  display: block;
  color: var(--dim);
  font: 400 12px var(--body);
  letter-spacing: 0;
  text-transform: none;
}
.section-head h1 {
  margin: 3px 0 0;
  font: 600 26px/1.2 var(--serif);
  letter-spacing: -.018em;
}
.section-head p { margin: 8px 0 0; color: var(--muted); font-size: 14px; max-width: 64ch; }

.head-actions,
.section-head > div:last-child:not(:first-child) {
  display: flex;
  gap: 0;
  flex: 0 0 auto;
}
.head-actions .btn,
.section-head > div:last-child:not(:first-child) .btn {
  border-radius: 0;
  margin-left: -1px;
  min-height: 33px;
  padding: 0 13px;
  font: 500 13px var(--body);
  letter-spacing: 0;
  text-transform: none;
}
.head-actions .btn:first-child,
.section-head > div:last-child .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.head-actions .btn:last-child,
.section-head > div:last-child .btn:last-child { border-radius: 0 6px 6px 0; }
.head-actions .btn:only-child,
.section-head > div:last-child .btn:only-child { border-radius: 6px; }

@media (max-width: 780px) {
  .section-head { flex-direction: column; }
  .head-actions, .section-head > div:last-child:not(:first-child) { width: 100%; }
  .head-actions .btn, .section-head > div:last-child .btn { flex: 1 1 0; }
  .section-head h1 { font-size: 22px; }
}

/* ============================================================
   Node tree (Forums & categories) — matches the reference's node
   list: drag handle, icon, title + description, count, inline
   actions. Every class below was rendering completely unstyled.
   ============================================================ */

.structure-manager {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 16px;
  align-items: start;
}
.structure-tree-panel,
.structure-manager > section:last-child {
  border: 1px solid var(--acp-line);
  border-radius: 10px;
  background: var(--acp-card);
  overflow: hidden;
}
.structure-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--acp-line);
  background: rgba(255,255,255,.02);
}
.structure-toolbar .field {
  flex: 1 1 auto;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--acp-line);
  border-radius: 7px;
  background: rgba(0,0,0,.28);
  color: var(--text);
  font-size: 13px;
}
.structure-toolbar .btn { flex: 0 0 auto; min-height: 32px; padding: 0 12px; font-size: 13px; }

.node-tree { padding: 6px; }
.node-category { display: block; margin-bottom: 2px; }
.node-row,
.node-board {
  display: grid;
  grid-template-columns: 20px auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 7px;
}
.node-row:hover, .node-board:hover { background: rgba(255,255,255,.04); }
.node-row.category-node { grid-template-columns: 20px 20px auto minmax(0,1fr) auto; background: rgba(255,255,255,.02); }
.node-board { grid-template-columns: 20px auto minmax(0,1fr) auto; margin-left: 14px; }
.node-board.child-node { grid-template-columns: 20px auto auto minmax(0,1fr) auto; margin-left: 30px; }

.drag-handle {
  cursor: grab;
  color: var(--dim);
  font-size: 13px;
  text-align: center;
  user-select: none;
}
.tree-toggle {
  border: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font-size: 11px;
}
.node-icon, .tree-branch { color: var(--teal2); font-size: 14px; text-align: center; }
.tree-branch { color: var(--dim); }

.node-row > a, .node-board > a {
  display: block;
  min-width: 0;
  padding: 9px 0;
  color: inherit;
}
.node-row b, .node-board b {
  display: block;
  color: var(--text);
  font: 500 14.5px var(--serif);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.node-row small, .node-board small {
  display: block;
  margin-top: 2px;
  color: var(--dim);
  font-size: 12px;
}
.node-count {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(150,165,200,.14);
  color: var(--muted);
  font: 700 11px var(--mono);
  text-align: center;
}
.node-children { margin: 0 0 4px; }
.node-board.is-dragging, .node-category.is-dragging { opacity: .4; }
.drag-over { box-shadow: inset 0 0 0 2px rgba(95,208,207,.5); border-radius: 7px; }

@media (max-width: 1050px) {
  .structure-manager { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .node-row, .node-board { grid-template-columns: 16px auto minmax(0,1fr); }
  .node-count { display: none; }
}

/* ============================================================
   Master-detail (Members, Staff inbox) — list on the left,
   detail form on the right. Was rendering completely unstyled.
   ============================================================ */

.master-detail {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(380px, 1.2fr);
  gap: 16px;
  align-items: start;
}
.master-list {
  max-height: 74vh;
  overflow-y: auto;
  border: 1px solid var(--acp-line);
  border-radius: 10px;
  background: var(--acp-card);
}
.master-list::-webkit-scrollbar { width: 6px; }
.master-list::-webkit-scrollbar-thumb { background: rgba(150,165,200,.18); border-radius: 3px; }

.list-search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px;
  border-bottom: 1px solid var(--acp-line);
  background: var(--acp-card);
}
.list-search .field {
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--acp-line);
  border-radius: 7px;
  background: rgba(0,0,0,.3);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.list-search .field:focus { border-color: rgba(95,208,207,.5); }

.admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--acp-line-soft);
}
.admin-row:last-child { border-bottom: 0; }
.admin-row:hover { background: rgba(95,208,207,.05); }
.admin-row.selected { background: rgba(95,208,207,.1); box-shadow: inset 2px 0 0 var(--teal); }
.admin-row b { display: block; color: var(--text); font: 500 14px var(--body); }
.admin-row small { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; }

.status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--dim); }
.status-dot.active { background: var(--teal); }
.status-dot.suspended { background: var(--amber); }
.status-dot.banned { background: var(--red); }

.detail-form {
  border: 1px solid var(--acp-line);
  border-radius: 10px;
  background: var(--acp-card);
  padding: 18px;
}
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.detail-head h2 { margin: 0; font: 600 18px var(--serif); }
.detail-head .meta { margin: 3px 0 0; color: var(--dim); font-size: 13px; }

.secure-pill {
  display: inline-flex;
  padding: 4px 10px;
  border: 1px solid var(--acp-line);
  border-radius: 999px;
  color: var(--muted);
  font: 500 11.5px var(--body);
  white-space: nowrap;
}
.secure-pill.status-active { border-color: rgba(95,208,207,.4); color: var(--teal2); }
.secure-pill.status-suspended { border-color: rgba(232,180,90,.45); color: var(--amber2); }
.secure-pill.status-banned { border-color: rgba(239,125,115,.45); color: #ffaaa2; }

.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 4px; }
.form-two label { margin: 0; }

.permission-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 14px 0;
  padding: 11px 13px;
  border: 1px solid var(--acp-line);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
}
.permission-summary span { color: var(--dim); font-size: 11.5px; }
.permission-summary b { color: var(--text); font: 600 13px var(--mono); margin-right: 4px; }

.empty { padding: 30px 16px; color: var(--dim); text-align: center; font-size: 14px; }

@media (max-width: 1050px) {
  .master-detail { grid-template-columns: minmax(0, 1fr); }
  .master-list { max-height: 40vh; }
}
@media (max-width: 780px) {
  .form-two { grid-template-columns: 1fr; }
  .detail-form { padding: 14px; }
}