/* ==========================================================================
   ADMIN — shares brand tokens from tokens.css (teal accent, same fonts).
   Self-contained layer for login + the admin shell only.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* ---- Themes ---------------------------------------------------------------
   The same four as Yavi Practice - dark (the original look), light, cream
   (high contrast) and synthwave - chosen per person and saved on their
   account (users.json → ui_theme, includes/practice.php THEME). Every page
   prints it on <html data-theme> server-side, so there is no flash and no
   script is needed to apply it.

   Most colours here are white at some opacity over the dark page. Rather than
   restate each one per theme, they are written rgba(var(--adm-fg), a × k):
   --adm-fg is the ink (white on dark, near-black on light) and the three k
   multipliers firm text, lines and fills up where a theme needs it - cream
   multiplies lines by 5, which turns hairlines into solid outlines.
   Overlays drawn on top of photos and videos stay literally white.
   ------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --adm-bg: #12141a;
  --adm-raised: #16181f;
  --adm-fg: 255,255,255;
  --adm-text: #ffffff;
  --adm-text-dim: rgba(255,255,255,0.6);
  --adm-k-text: 1;
  --adm-k-line: 1;
  --adm-k-fill: 1;
  --adm-accent-ink: #35a3a2;
  --adm-on-accent: #ffffff;
  --adm-ok-ink: #7fd6d5;
  --adm-err-ink: #ffb3b3;
  --adm-warn-ink: #f0c579;
  --adm-gold-ink: #e3c565;
}
:root[data-theme="light"] {
  color-scheme: light;
  --adm-bg: #F3F4F6;
  --adm-raised: #FFFFFF;
  --adm-fg: 18,20,26;
  --adm-text: #12141A;
  --adm-text-dim: #4B5160;
  --adm-k-text: 1.6;     /* 0.55 → ~12:1, the faintest hint (0.35) → ~4:1 */
  --adm-k-line: 2.2;
  --adm-k-fill: 0.9;
  --adm-accent-ink: #00605F;  /* 6.7:1 */
  --adm-ok-ink: #00605F;
  --adm-err-ink: #A12A1E;     /* 6.7:1 */
  --adm-warn-ink: #7A4100;    /* 7.4:1 */
  --adm-gold-ink: #6A4C00;
}
:root[data-theme="cream"] {
  color-scheme: light;
  --adm-bg: #F5EEDC;
  --adm-raised: #FFFAEE;
  --adm-fg: 26,22,17;
  --adm-text: #1A1611;        /* 15.6:1 */
  --adm-text-dim: #3B3326;    /* 10.8:1 */
  --adm-k-text: 2;            /* faintest hint (0.28) → 4:1, 0.35 → 6.2:1 */
  --adm-k-line: 5;            /* hairlines become outlines: 0.1 → 3.3:1, 0.14 → 6.2:1 */
  --adm-k-fill: 1.3;
  --adm-accent-ink: #005C5B;  /* 6.8:1 */
  --adm-ok-ink: #005C5B;
  --adm-err-ink: #A12A1E;     /* 6.3:1 */
  --adm-warn-ink: #7A4100;    /* 7.0:1 */
  --adm-gold-ink: #6A4C00;    /* 6.9:1 */
}
:root[data-theme="synth"] {
  color-scheme: dark;
  --adm-bg: #12091F;
  --adm-raised: #1A1030;
  --adm-fg: 243,236,255;
  --adm-text: #F3ECFF;
  --adm-text-dim: #BCB0E0;
  --adm-k-text: 1.1;
  --adm-k-line: 1.3;
  --adm-k-fill: 1.2;
  --adm-accent-ink: #6CF2E2;  /* 14:1 */
  --adm-ok-ink: #3ED694;
  --adm-err-ink: #FF8FA2;
  --adm-warn-ink: #FFB863;
  --adm-gold-ink: #FFD27A;
}
/* Cream: a little more weight on everything you click or type into. */
:root[data-theme="cream"] :is(input, select, textarea, button, .admin-panel, .admin-login-card) { border-width: 1.5px; }
:root[data-theme="cream"] :focus-visible { outline: 2.5px solid var(--adm-text); outline-offset: 2px; }
/* Small action buttons are fill-only elsewhere; here they get a real outline. */
:root[data-theme="cream"] .admin-icon-btn {
  border: 1.5px solid rgba(var(--adm-fg), 0.55);
}


body.admin-login-body,
body.admin-body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-body);
  background: var(--adm-bg);
  color: var(--adm-text);
}

a { color: inherit; }
button { font-family: inherit; }

/* ---- Login ---- */
body.admin-login-body {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.admin-login-wrap { width: min(400px, 100%); }

.admin-login-logo { display: flex; justify-content: center; margin-bottom: var(--sp-5); }
.admin-login-logo img { height: 40px; width: auto; }

.admin-login-card {
  background: rgba(var(--adm-fg), calc(0.04 * var(--adm-k-fill)));
  border: 1px solid rgba(var(--adm-fg), calc(0.1 * var(--adm-k-line)));
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.admin-login-head { margin-bottom: var(--sp-4); }
.admin-login-eyebrow {
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--adm-accent-ink);
}

.admin-alert {
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-3);
}
.admin-alert--error { background: rgba(220,80,80,0.14); border: 1px solid rgba(220,80,80,0.3); color: var(--adm-err-ink); }
.admin-alert--ok    { background: rgba(0,127,126,0.14); border: 1px solid rgba(0,127,126,0.35); color: var(--adm-ok-ink); }
/* Saved, but something about the input needs attention (e.g. a WhatsApp
   number typed without its country code). */
.admin-alert--warn  { background: rgba(226,163,60,0.14); border: 1px solid rgba(226,163,60,0.38); color: var(--adm-warn-ink); }

.admin-fg { margin-bottom: var(--sp-3); }
.admin-fg label {
  display: block;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: rgba(var(--adm-fg), calc(0.55 * var(--adm-k-text)));
  margin-bottom: 0.4rem;
}
.admin-fg input,
.admin-fg textarea,
.admin-fg select {
  width: 100%;
  background: rgba(var(--adm-fg), calc(0.06 * var(--adm-k-fill)));
  border: 1px solid rgba(var(--adm-fg), calc(0.14 * var(--adm-k-line)));
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  color: var(--adm-text);
  font-family: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.admin-fg input:focus,
.admin-fg textarea:focus,
.admin-fg select:focus {
  border-color: var(--color-accent);
  background: rgba(0,127,126,0.1);
}
.admin-fg textarea { resize: vertical; min-height: 80px; }

/* Inline "optional" tag on a label, plus explanatory text under a field. */
.admin-fg__optional {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--adm-fg), calc(0.35 * var(--adm-k-text)));
  margin-left: 0.35rem;
}
.admin-fg__hint {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(var(--adm-fg), calc(0.42 * var(--adm-k-text)));
}

/* Anchor picker: a helper select sitting above its paired text input —
   writes into that input on change rather than being submitted itself
   (see js/admin.js), so it's styled a touch smaller/quieter than a real
   field to read as a shortcut, not a second source of truth. */
.admin-anchor-picker {
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  padding: 0.5rem 2.2rem 0.5rem 0.7rem;
  color: rgba(var(--adm-fg), calc(0.65 * var(--adm-k-text)));
  background-color: rgba(var(--adm-fg), calc(0.03 * var(--adm-k-fill)));
}
.admin-fg-check { display: flex; align-items: center; gap: 0.5rem; }
.admin-fg-check input { width: auto; }

.admin-fg select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
  padding-right: 2.6rem;
  cursor: pointer;
}

.admin-fg select option { background: var(--adm-raised); color: var(--adm-text); }

/* ---- Range sliders (Hero Animation settings) ---- */
.admin-fg label:has(.admin-range-value) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-range-value {
  font-variant-numeric: tabular-nums;
  color: var(--adm-accent-ink);
  font-weight: 600;
}
.admin-fg input[type="range"] {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  height: 1.4rem;
  cursor: pointer;
}
.admin-fg input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: rgba(var(--adm-fg), calc(0.14 * var(--adm-k-fill)));
}
.admin-fg input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 99px;
  background: rgba(var(--adm-fg), calc(0.14 * var(--adm-k-fill)));
}
.admin-fg input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent, #007f7e);
  border: 2px solid #ffffff;
}
.admin-fg input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent, #007f7e);
  border: 2px solid #ffffff;
}

/* ---- Pill toggle (replaces plain checkboxes everywhere) ----
   Specificity note: the generic ".admin-fg label { display: block; }" rule
   above also matches this element (it's a <label> inside .admin-fg), and
   at equal-or-higher specificity it would silently win and collapse this
   back to block layout — hence the doubled-up ".admin-fg--toggle .admin-toggle"
   selector instead of ".admin-toggle" alone. */
.admin-fg--toggle { margin-bottom: var(--sp-2); }

.admin-fg--toggle .admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}

.admin-toggle input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.admin-toggle__track {
  position: relative;
  width: 44px; height: 24px;
  border-radius: var(--radius-pill);
  background: rgba(var(--adm-fg), calc(0.14 * var(--adm-k-fill)));
  border: 1px solid rgba(var(--adm-fg), calc(0.18 * var(--adm-k-line)));
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
  flex-shrink: 0;
}

.admin-toggle__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-white);
  transition: transform var(--dur-fast) var(--ease-out-soft);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.admin-toggle input:checked + .admin-toggle__track {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.admin-toggle input:checked + .admin-toggle__track .admin-toggle__thumb {
  transform: translateX(20px);
}

.admin-toggle input:focus-visible + .admin-toggle__track {
  box-shadow: 0 0 0 3px rgba(0,127,126,0.35);
}

.admin-toggle__label { font-size: 0.88rem; color: var(--adm-text); }

/* ---- Responsive image thumbs inside modals ---- */
.admin-thumb {
  width: 100%;
  max-width: 220px;
  max-height: 160px;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Small thumbs used inline in table rows stay compact regardless of the
   rule above (specificity: table context wins via the extra selector). */
.admin-table .admin-thumb { width: 44px; height: 44px; max-width: 44px; max-height: 44px; }

/* ---- Drag-and-drop upload dropzone ---- */
.admin-dropzone {
  position: relative;
  margin-top: 0.6rem;
}

.admin-dropzone__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.admin-dropzone__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: var(--sp-4);
  border: 2px dashed rgba(var(--adm-fg), calc(0.2 * var(--adm-k-line)));
  border-radius: var(--radius-md);
  background: rgba(var(--adm-fg), calc(0.03 * var(--adm-k-fill)));
  color: rgba(var(--adm-fg), calc(0.55 * var(--adm-k-text)));
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.admin-dropzone__label:hover,
.admin-dropzone.is-dragover .admin-dropzone__label {
  border-color: var(--color-accent);
  background: rgba(0,127,126,0.08);
  color: var(--adm-text);
}

.admin-dropzone__icon { width: 26px; height: 26px; }
/* Same specificity trap as the pill toggle: inside .admin-fg, ".admin-fg label
   { display: block }" would otherwise win and run the text into the hint. */
.admin-fg .admin-dropzone__label { display: flex; }
.admin-dropzone__text { font-size: 0.85rem; }
.admin-dropzone__hint { font-size: 0.7rem; color: rgba(var(--adm-fg), calc(0.35 * var(--adm-k-text))); }

.admin-dropzone__error {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--adm-err-ink);
}

.admin-dropzone__previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.admin-dropzone__preview {
  position: relative;
  width: 72px;
  text-align: center;
}

/* Drop one batch, then another: the zone keeps both, so each pending file
   needs its own way out before the form is submitted. */
.admin-dropzone__remove {
  position: absolute;
  top: -7px; right: -7px;
  width: 20px; height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(18,18,18,0.92);
  color: var(--color-white);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}

.admin-dropzone__remove:hover { background: rgba(220,80,80,0.9); }

.admin-dropzone__preview img,
.admin-dropzone__preview video {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-accent);
  display: block;
  background: rgba(var(--adm-fg), calc(0.04 * var(--adm-k-fill)));
}

.admin-dropzone__preview .admin-dropzone__file {
  width: 72px;
  height: 72px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-accent);
  background: rgba(var(--adm-fg), calc(0.04 * var(--adm-k-fill)));
  color: var(--adm-text);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.admin-dropzone__preview span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.65rem;
  color: rgba(var(--adm-fg), calc(0.5 * var(--adm-k-text)));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Image gallery (existing photos: order / featured / remove) ----
   One card structure serves every gallery in the admin: a square thumb
   carrying the badges and hover actions, an optional control bar (reorder
   arrows + drag grip) and an optional alt-text field beneath it. */
.admin-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.6rem;
  margin-top: 0.4rem;
}

/* A single-image field is still a gallery, just one card wide — without a
   cap the lone card would stretch the full width of the form. */
.admin-gallery--single { grid-template-columns: minmax(0, 168px); }

.admin-gallery__empty { color: rgba(var(--adm-fg), calc(0.4 * var(--adm-k-text))); font-size: 0.85rem; grid-column: 1 / -1; }

.admin-gallery__card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: calc(var(--radius-sm) + 2px);
  transition: border-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.admin-gallery__card.is-featured { border-color: var(--color-accent); }

.admin-gallery__thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(var(--adm-fg), calc(0.04 * var(--adm-k-fill)));
}

.admin-gallery__thumb img,
.admin-gallery__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Video cards name the file — one frame of a background loop looks much
   like another, so the filename is what actually identifies it. */
.admin-gallery__filename {
  position: absolute;
  left: 0; right: 0; top: 0;
  padding: 0.25rem 0.4rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0.72), rgba(0,0,0,0));
  color: rgba(255,255,255,0.85);
  font-size: 0.62rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.admin-gallery[data-reorderable] .admin-gallery__thumb { cursor: grab; }
.admin-gallery__card.is-dragging { opacity: 0.4; }
.admin-gallery__card.is-drop-target { border-color: var(--color-accent); }

/* Position in the display order — the number the reorder arrows and drag
   both move. Hidden on hover so it never fights the action buttons. */
.admin-gallery__pos {
  position: absolute;
  left: 6px; bottom: 6px;
  min-width: 1.3rem; height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.62);
  color: var(--color-white);
  font-size: 0.66rem;
  font-weight: 600;
  pointer-events: none;
  transition: opacity var(--dur-fast) ease;
}

.admin-gallery__card:hover .admin-gallery__pos { opacity: 0; }

.admin-gallery__bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.admin-gallery__grip {
  margin-left: auto;
  padding-right: 0.15rem;
  color: rgba(var(--adm-fg), calc(0.28 * var(--adm-k-text)));
  font-size: 0.7rem;
  letter-spacing: -3px;
  cursor: grab;
}

.admin-gallery .admin-gallery__alt {
  width: 100%;
  background: rgba(var(--adm-fg), calc(0.06 * var(--adm-k-fill)));
  border: 1px solid rgba(var(--adm-fg), calc(0.14 * var(--adm-k-line)));
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  color: var(--adm-text);
  font-family: inherit;
  font-size: 0.75rem;
  outline: none;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.admin-gallery .admin-gallery__alt:focus { border-color: var(--color-accent); background: rgba(0,127,126,0.1); }

/* Form-mode galleries commit with their form, so Remove is a mark, not a
   deletion — the card stays put, greyed, until Save (or Undo). */
.admin-gallery__removed {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem;
  background: rgba(10,10,10,0.8);
  color: rgba(255,255,255,0.8);
  font-size: 0.7rem;
  text-align: center;
}

.admin-gallery__card.is-removed .admin-gallery__removed { display: flex; }
.admin-gallery__card.is-removed .admin-gallery__actions { display: none; }
.admin-gallery__card.is-removed .admin-gallery__bar { opacity: 0.35; pointer-events: none; }
.admin-gallery__card.is-removed .admin-gallery__alt { opacity: 0.35; }

.admin-gallery__badge {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  display: none;
}

.admin-gallery__card.is-featured .admin-gallery__badge { display: inline-block; }

/* SEO gallery: two independent roles can be assigned per image (both may
   show at once), so each badge toggles on its own .is-visible rather than
   sharing the single-slot .is-featured mechanism above. */
.admin-gallery__badge--og.is-visible,
.admin-gallery__badge--twitter.is-visible { display: inline-block; }
.admin-gallery__badge--twitter { left: auto; right: 6px; background: #1d9bf0; }

.admin-gallery__actions {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}

.admin-gallery__card:hover .admin-gallery__actions,
.admin-gallery__card:focus-within .admin-gallery__actions { opacity: 1; }

.admin-gallery__btn {
  background: rgba(255,255,255,0.14);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.4rem;
  font-size: 0.68rem;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}

.admin-gallery__btn:hover { background: rgba(255,255,255,0.28); }
.admin-gallery__btn--delete:hover { background: rgba(220,80,80,0.5); }

/* Reorder arrows sit outside the hover overlay — always visible, since
   they're how you set display order without dragging. */
.admin-gallery__btn--move {
  padding: 0.2rem 0.45rem;
  font-size: 0.62rem;
  line-height: 1.1;
  background: rgba(255,255,255,0.08);
}

.admin-gallery__btn--move:disabled { opacity: 0.22; cursor: default; }
.admin-gallery__btn--move:disabled:hover { background: rgba(255,255,255,0.08); }

/* ---- Sort reorder arrows ---- */
.admin-reorder { display: flex; gap: 0.25rem; }
.admin-reorder__btn { padding: 0.35rem 0.55rem; }
.admin-reorder__btn:disabled { opacity: 0.25; cursor: default; }
.admin-reorder__btn:disabled:hover { background: rgba(var(--adm-fg), calc(0.06 * var(--adm-k-fill))); }
.admin-list:not(.admin-list--custom-sort) .admin-reorder { opacity: 0.3; }

/* ---- List toolbar: sort + page-size controls, and pager ---- */
.admin-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 0.9rem;
}
.admin-list-toolbar__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: rgba(var(--adm-fg), calc(0.55 * var(--adm-k-text)));
}
.admin-list-toolbar__field select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(var(--adm-fg), calc(0.06 * var(--adm-k-fill)));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 14px;
  border: 1px solid rgba(var(--adm-fg), calc(0.14 * var(--adm-k-line)));
  border-radius: var(--radius-sm);
  padding: 0.4rem 2rem 0.4rem 0.7rem;
  color: var(--adm-text);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;
}
.admin-list-toolbar__field select:focus { border-color: var(--color-accent); }
.admin-list-toolbar__field select option { background: var(--adm-raised); color: var(--adm-text); }

tr[data-reorder-id].is-page-hidden { display: none; }

.admin-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1rem;
}
.admin-pager__info { font-size: 0.82rem; color: rgba(var(--adm-fg), calc(0.5 * var(--adm-k-text))); }
.admin-pager__btn:disabled { opacity: 0.3; cursor: default; }

/* ---- Password field with show/hide toggle ---- */
.admin-pw-wrap { position: relative; }
.admin-pw-wrap .admin-pw-input { padding-right: 2.6rem; width: 100%; }
.admin-pw-toggle {
  position: absolute;
  top: 50%; right: 0.5rem; transform: translateY(-50%);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 6px;
  color: rgba(var(--adm-fg), calc(0.45 * var(--adm-k-text))); cursor: pointer;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.admin-pw-toggle:hover { color: var(--adm-accent-ink); background: rgba(var(--adm-fg), calc(0.06 * var(--adm-k-fill))); }
.admin-pw-icon { width: 18px; height: 18px; }

.admin-btn-primary {
  width: 100%; min-height: 46px;
  background: var(--color-accent);
  color: var(--adm-on-accent);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.85rem;
  font-size: 0.9rem;
  font-weight: var(--fw-subheading);
  cursor: pointer;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.admin-btn-primary:hover { background: var(--color-accent-soft); transform: translateY(-1px); }

/* ---- Admin shell ---- */
.admin-shell { display: flex; min-height: 100svh; }

.admin-sidebar {
  width: 264px;
  flex-shrink: 0;
  position: sticky; top: 0; height: 100svh; overflow-y: auto; z-index: 40;
  background: rgba(var(--adm-fg), calc(0.03 * var(--adm-k-fill)));
  border-right: 1px solid rgba(var(--adm-fg), calc(0.08 * var(--adm-k-line)));
  padding: var(--sp-4) var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  box-sizing: border-box;
}

.admin-sidebar-logo { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.7rem; }
.admin-sidebar-logo img { height: 28px; width: auto; }
.admin-sidebar__app { margin: 0 0 var(--sp-1); padding: 0 0.75rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--adm-accent-ink); font-weight: 600; }

.admin-nav { display: flex; flex-direction: column; gap: 3px; }
.admin-nav__item {
  display: flex; align-items: center; gap: 0.8rem;
  min-height: 44px; padding: 0.55rem 0.8rem;
  border-radius: 12px;
  font-size: 0.94rem; font-weight: 500;
  color: rgba(var(--adm-fg), calc(0.72 * var(--adm-k-text)));
  text-decoration: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.admin-nav__item .admin-ico { flex-shrink: 0; color: rgba(var(--adm-fg), calc(0.55 * var(--adm-k-text))); }
.admin-nav__item:hover { background: rgba(var(--adm-fg), calc(0.07 * var(--adm-k-fill))); color: var(--adm-text); }
.admin-nav__item.is-active { background: rgba(0,127,126,0.2); color: var(--adm-text); box-shadow: inset 3px 0 0 var(--color-accent); }
.admin-nav__item.is-active .admin-ico { color: var(--adm-accent-ink); }
.admin-nav__badge {
  margin-left: auto; min-width: 1.4rem; padding: 0 0.45rem; border-radius: var(--radius-pill);
  background: #d9662a; color: #ffffff; font-size: 0.72rem; font-weight: 700; line-height: 1.4rem; text-align: center;
}

.admin-sidebar__section { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid rgba(var(--adm-fg), calc(0.08 * var(--adm-k-line))); display: flex; flex-direction: column; gap: 6px; }
.admin-sidebar__label { margin: 0 0 2px; padding: 0 0.75rem; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--adm-fg), calc(0.42 * var(--adm-k-text))); }
.admin-switch {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; border-radius: 12px; text-decoration: none; color: var(--adm-text);
  border: 1px solid rgba(var(--adm-fg), calc(0.1 * var(--adm-k-line)));
  background: rgba(var(--adm-fg), calc(0.03 * var(--adm-k-fill)));
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.admin-switch:hover { border-color: var(--color-accent); background: rgba(0,127,126,0.1); }
.admin-switch .admin-ico { flex-shrink: 0; color: var(--adm-accent-ink); }
.admin-switch span { display: flex; flex-direction: column; min-width: 0; }
.admin-switch strong { font-size: 0.88rem; font-weight: 600; }
.admin-switch small { font-size: 0.72rem; color: rgba(var(--adm-fg), calc(0.5 * var(--adm-k-text))); }
.admin-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.admin-sidebar-foot { padding: 0 0.4rem; font-size: 0.78rem; color: rgba(var(--adm-fg), calc(0.5 * var(--adm-k-text))); display: flex; flex-direction: column; gap: 0.5rem; }
.admin-sidebar-foot strong { color: var(--adm-text); font-weight: 600; }
.admin-sidebar-foot form { margin: 0; }
.admin-sidebar__credit { margin: 0.2rem 0 0; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--adm-fg), calc(0.36 * var(--adm-k-text))); }

.admin-main { flex: 1; padding: var(--sp-5) var(--sp-6); max-width: 1100px; }

.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.admin-header h1 { font-size: var(--fs-h2); font-family: var(--font-heading); font-weight: var(--fw-heading-xbold); margin: 0; }
/* Heading on its own line with its actions underneath (Homepage builder: a
   row of "+ Add section" buttons is too wide to share the heading's line). */
.admin-header--stacked { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.admin-add-sections { display: flex; flex-direction: column; gap: 0.5rem; }
.admin-add-sections__label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--adm-fg), calc(0.45 * var(--adm-k-text))); }

.admin-panel {
  background: rgba(var(--adm-fg), calc(0.03 * var(--adm-k-fill)));
  border: 1px solid rgba(var(--adm-fg), calc(0.08 * var(--adm-k-line)));
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.admin-panel h2 { font-size: 1.1rem; margin: 0 0 var(--sp-3); font-family: var(--font-display); font-weight: 500; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.admin-table th {
  text-align: left; font-weight: 500; color: rgba(var(--adm-fg), calc(0.5 * var(--adm-k-text)));
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.6rem 0.7rem; border-bottom: 1px solid rgba(var(--adm-fg), calc(0.1 * var(--adm-k-line)));
}
.admin-table td { padding: 0.7rem; border-bottom: 1px solid rgba(var(--adm-fg), calc(0.06 * var(--adm-k-line))); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table img.admin-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }

.admin-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 500;
}
.admin-badge--on  { background: rgba(0,127,126,0.16); color: var(--adm-ok-ink); }
.admin-badge--off { background: rgba(var(--adm-fg), calc(0.08 * var(--adm-k-fill))); color: rgba(var(--adm-fg), calc(0.45 * var(--adm-k-text))); }

.admin-row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ---- Buttons — one family everywhere: pill corners, icon + word.
   .admin-btn            primary (teal)
   .admin-btn--ghost     secondary (also --secondary)
   .admin-btn--danger    destructive (red outline, fills on hover)
   .admin-btn--sm / --lg sizes; --block full width
   .admin-icon-btn       small secondary, used in table rows and cards */
.admin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 42px; padding: 0.55rem 1.25rem; box-sizing: border-box;
  background: var(--color-accent); color: var(--adm-on-accent);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-family: inherit; font-size: 0.88rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.admin-btn:hover { background: var(--color-accent-soft); transform: translateY(-1px); }
.admin-btn:active { transform: none; }
.admin-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.admin-btn .admin-ico { flex-shrink: 0; }
.admin-btn--ghost, .admin-btn--secondary {
  background: rgba(var(--adm-fg), calc(0.07 * var(--adm-k-fill)));
  border-color: rgba(var(--adm-fg), calc(0.14 * var(--adm-k-line)));
  color: var(--adm-text);
}
.admin-btn--ghost:hover, .admin-btn--secondary:hover { background: rgba(var(--adm-fg), calc(0.14 * var(--adm-k-fill))); border-color: var(--color-accent); }
.admin-btn--danger { background: rgba(220,80,80,0.12); border-color: rgba(220,80,80,0.6); color: var(--adm-err-ink); }
.admin-btn--danger:hover { background: rgba(205,64,64,0.92); border-color: transparent; color: #ffffff; }
.admin-btn--sm { min-height: 34px; padding: 0.35rem 0.9rem; font-size: 0.8rem; }
.admin-btn--lg { min-height: 48px; padding: 0.7rem 1.5rem; font-size: 0.95rem; }
.admin-btn--block { width: 100%; }

.admin-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 32px; padding: 0.3rem 0.85rem; box-sizing: border-box;
  background: rgba(var(--adm-fg), calc(0.06 * var(--adm-k-fill)));
  border: 1px solid rgba(var(--adm-fg), calc(0.12 * var(--adm-k-line))); border-radius: var(--radius-pill);
  color: var(--adm-text); font-family: inherit; font-size: 0.78rem; font-weight: 500; white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.admin-icon-btn:hover { background: rgba(var(--adm-fg), calc(0.14 * var(--adm-k-fill))); border-color: var(--color-accent); }
.admin-icon-btn--danger { color: var(--adm-err-ink); border-color: rgba(220,80,80,0.45); }
.admin-icon-btn--danger:hover { background: rgba(205,64,64,0.92); border-color: transparent; color: #ffffff; }

/* A row of buttons, with room above and below so what follows never touches it. */
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: var(--sp-3) 0; }

.admin-tabs { display: flex; gap: 0.4rem; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.admin-tabs a {
  padding: 0.5rem 0.9rem; border-radius: var(--radius-pill);
  font-size: 0.82rem; text-decoration: none; color: rgba(var(--adm-fg), calc(0.6 * var(--adm-k-text)));
  background: rgba(var(--adm-fg), calc(0.04 * var(--adm-k-fill)));
}
.admin-tabs a.is-active { background: var(--color-accent); color: var(--adm-on-accent); }

/* ---- Site Settings card grid ---- */
.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}

.admin-settings-card {
  text-align: left;
  background: rgba(var(--adm-fg), calc(0.03 * var(--adm-k-fill)));
  border: 1px solid rgba(var(--adm-fg), calc(0.08 * var(--adm-k-line)));
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  cursor: pointer;
  color: var(--adm-text);
  font-family: inherit;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-soft);
}

.admin-settings-card:hover {
  border-color: var(--color-accent);
  background: rgba(0,127,126,0.08);
  transform: translateY(-2px);
}

.admin-settings-card h3 { margin: 0 0 0.3rem; font-size: 1rem; font-weight: 500; }
.admin-settings-card p { margin: 0; color: rgba(var(--adm-fg), calc(0.5 * var(--adm-k-text))); font-size: 0.85rem; }

/* ---- Modal (add/edit forms) ---- */
.admin-modal { position: fixed; inset: 0; z-index: 100; display: none; }
.admin-modal.is-open { display: block; }

/* Confirmation dialogs that can open *from inside* another open modal
   (e.g. deleting a gallery photo while the edit modal is open) need to
   stack above it regardless of DOM order — .admin-modal alone falls back
   to source order at equal z-index, which put this behind the edit modal. */
#confirm-delete-image-modal,
#confirm-action-modal { z-index: 200; }
.admin-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.admin-modal__panel {
  position: relative; z-index: 1;
  width: min(560px, 92vw); max-height: 86vh; overflow-y: auto;
  margin: 5vh auto; background: var(--adm-raised);
  border: 1px solid rgba(var(--adm-fg), calc(0.1 * var(--adm-k-line))); border-radius: var(--radius-md);
  padding: var(--sp-4);
}
.admin-modal__close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  background: rgba(var(--adm-fg), calc(0.08 * var(--adm-k-fill))); border: none; color: var(--adm-text);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
}

/* ---- Upload progress modal ----
   Shown while files are in flight. No close button and no dismissible
   backdrop by design: an upload in progress shouldn't be clickable away.
   The Close button only appears once it has failed. */
.admin-modal__panel--upload { width: min(420px, 92vw); margin-top: 18vh; }
.admin-modal__panel--upload h2 { margin: 0; font-size: 1.05rem; }

.admin-progress {
  height: 10px;
  margin: var(--sp-3) 0 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--adm-fg), calc(0.1 * var(--adm-k-fill)));
  overflow: hidden;
}

.admin-progress__fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), #3fbfb4);
  transition: width 0.18s ease-out;
}

/* All the bytes are sent but PHP is still validating and moving them. A bar
   parked at 100% reads as frozen, so it becomes an indeterminate sweep. */
.admin-progress.is-indeterminate .admin-progress__fill {
  width: 40%;
  transition: none;
  animation: admin-progress-slide 1.15s ease-in-out infinite;
}

@keyframes admin-progress-slide {
  from { transform: translateX(-105%); }
  to   { transform: translateX(255%); }
}

.admin-progress.is-error .admin-progress__fill {
  width: 100%;
  animation: none;
  background: rgba(220,80,80,0.75);
}

.admin-progress__readout {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.82rem;
  color: rgba(var(--adm-fg), calc(0.6 * var(--adm-k-text)));
}

.admin-progress__percent {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--adm-text);
  font-variant-numeric: tabular-nums;
}

.admin-progress__note {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(var(--adm-fg), calc(0.45 * var(--adm-k-text)));
}

.admin-progress__actions { margin-top: var(--sp-3); }

/* A form mid-upload is inert: its controls are disabled in JS, and this
   makes that visible rather than leaving it looking clickable. */
form.is-uploading .admin-dropzone__label { opacity: 0.5; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .admin-progress__fill { transition: none; }
  .admin-progress.is-indeterminate .admin-progress__fill { animation-duration: 3s; }
}

.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ---- Homepage section builder: drag-reorder cards ---- */
#section-stack { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: var(--sp-4); }

.layer-card {
  display: flex; align-items: center; gap: 0.8rem;
  background: rgba(var(--adm-fg), calc(0.03 * var(--adm-k-fill)));
  border: 1px solid rgba(var(--adm-fg), calc(0.08 * var(--adm-k-line)));
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  cursor: grab;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.layer-card:active { cursor: grabbing; }
.layer-card.is-dragging { opacity: 0.4; }
.layer-card.drag-over { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }

.layer-card__grip { color: rgba(var(--adm-fg), calc(0.3 * var(--adm-k-text))); font-size: 1rem; user-select: none; }

.layer-card__body { flex: 1; min-width: 0; }
.layer-card__type {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--adm-accent-ink); margin-bottom: 0.15rem;
}
.layer-card__preview {
  font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 860px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; padding: var(--sp-2); }
  .admin-sidebar__app, .admin-sidebar__label, .admin-switch small, .admin-sidebar-foot__who, .admin-sidebar__credit { display: none; }
  .admin-nav { flex-direction: row; }
  .admin-nav__item { white-space: nowrap; }
  .admin-sidebar__section { margin: 0; padding: 0; border: 0; flex-direction: row; }
  .admin-switch { white-space: nowrap; }
  .admin-theme-btn { width: auto; margin: 0; white-space: nowrap; }
  .admin-main { padding: var(--sp-4); }
  .admin-grid-2 { grid-template-columns: 1fr; }
}

/* ---- SEO page: one tab per settings group (.admin-tabs), with a one-line
   explanation of the current tab above its card ---- */
.admin-seo-intro { margin: calc(var(--sp-4) * -0.5) 0 var(--sp-3); max-width: 64ch; color: rgba(var(--adm-fg), calc(0.55 * var(--adm-k-text))); font-size: 0.88rem; }
.admin-seo-subheading { margin: var(--sp-3) 0 var(--sp-1); font-size: 0.9rem; color: rgba(var(--adm-fg), calc(0.75 * var(--adm-k-text))); }

/* ---- Site Settings → Image Optimisation ---- */
.admin-optimise-list { margin: 0 0 var(--sp-2); padding-left: 1.1rem; color: rgba(var(--adm-fg), calc(0.6 * var(--adm-k-text))); font-size: 0.85rem; line-height: 1.6; }

/* ---- Form guard honeypot (form_guard_fields): off-screen rather than
   display:none, which some bots check for. Never visible, never focusable. */
.admin-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- App chooser (admin/choose.php): Website or Yavi Practice ---- */
.admin-login-wrap.admin-choose { width: min(680px, 100%); text-align: center; }
.admin-choose__title { margin: 0; font-size: var(--fs-h2); font-family: var(--font-heading); font-weight: var(--fw-heading-xbold); }
.admin-choose__sub { margin: 0.4rem 0 var(--sp-4); color: rgba(var(--adm-fg), calc(0.55 * var(--adm-k-text))); }
.admin-choose__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.admin-choose__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem;
  padding: var(--sp-4);
  text-align: left;
  background: rgba(var(--adm-fg), calc(0.04 * var(--adm-k-fill)));
  border: 1px solid rgba(var(--adm-fg), calc(0.1 * var(--adm-k-line)));
  border-radius: var(--radius-lg);
  color: var(--adm-text);
  text-decoration: none;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.admin-choose__card:hover, .admin-choose__card:focus-visible { border-color: var(--color-accent); background: rgba(0,127,126,0.12); transform: translateY(-2px); outline: none; }
.admin-choose__icon { width: 30px; height: 30px; color: var(--adm-accent-ink); margin-bottom: 0.3rem; }
.admin-choose__name { font-size: 1.15rem; font-weight: 600; }
.admin-choose__desc { font-size: 0.86rem; line-height: 1.5; color: rgba(var(--adm-fg), calc(0.6 * var(--adm-k-text))); }
.admin-choose__credit { margin-top: auto; padding-top: 0.5rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--adm-fg), calc(0.38 * var(--adm-k-text))); }
.admin-choose__signout { margin-top: var(--sp-4); }
.admin-login-alt { display: flex; justify-content: center; margin: var(--sp-3) 0 0; }
.admin-login-wrap.admin-choose:has(.admin-choose__grid--3) { width: min(960px, 100%); }
.admin-choose__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .admin-choose__grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .admin-choose__grid, .admin-choose__grid--3 { grid-template-columns: 1fr; } }


/* ---- Users: access fieldset + Practice badge ---- */
.admin-access { margin: var(--sp-3) 0; padding: var(--sp-3); border: 1px solid rgba(var(--adm-fg), calc(0.1 * var(--adm-k-line))); border-radius: var(--radius-md); }
.admin-access legend { padding: 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--adm-fg), calc(0.55 * var(--adm-k-text))); }
.admin-badge--practice { background: rgba(201,162,39,0.16); color: var(--adm-gold-ink); }
.admin-badge--social { background: rgba(138,79,192,0.18); color: var(--adm-text); }

/* Two-step sign-in code: big, spaced digits. */
.admin-code-input { font-size: 1.5rem; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- Invitations (Users tab) ---- */
.admin-badge--invited { background: rgba(224,160,40,0.16); color: var(--adm-warn-ink); }
.admin-invite-date { display: block; margin-top: 3px; font-size: 0.75rem; color: rgba(var(--adm-fg), calc(0.45 * var(--adm-k-text))); }
.admin-user-mode { display: grid; gap: 8px; margin-bottom: var(--sp-3); }
.admin-user-mode__opt {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(var(--adm-fg), calc(0.12 * var(--adm-k-line)));
  transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-user-mode__opt:has(input:checked) { border-color: rgba(0,127,126,0.8); background: rgba(0,127,126,0.12); }
.admin-user-mode__opt input { margin-top: 3px; accent-color: #007f7e; }
.admin-user-mode__opt span { display: flex; flex-direction: column; gap: 2px; }
.admin-user-mode__opt small { color: rgba(var(--adm-fg), calc(0.55 * var(--adm-k-text))); font-size: 0.8rem; }
.admin-invite-access { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: 8px; }
.admin-invite-access li { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(var(--adm-fg), calc(0.12 * var(--adm-k-line))); background: rgba(var(--adm-fg), calc(0.03 * var(--adm-k-fill))); }
.admin-invite-access strong { color:  var(--adm-text); }
.admin-invite-access .role { color: var(--adm-ok-ink); }
.admin-invite-access small { display: block; color: rgba(var(--adm-fg), calc(0.55 * var(--adm-k-text))); margin-top: 2px; }


/* ---- Theme button + picker (render_theme_picker) ---- */
.admin-theme-btn {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0.4rem; width: calc(100% - 0.8rem); min-height: 40px; box-sizing: border-box;
  padding: 0.55rem 0.8rem; cursor: pointer; text-align: left;
  background: rgba(var(--adm-fg), calc(0.04 * var(--adm-k-fill)));
  border: 1px solid rgba(var(--adm-fg), calc(0.14 * var(--adm-k-line)));
  border-radius: var(--radius-sm);
  color: rgba(var(--adm-fg), calc(0.75 * var(--adm-k-text)));
  font-size: 0.84rem;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.admin-theme-btn:hover { background: rgba(var(--adm-fg), calc(0.08 * var(--adm-k-fill))); border-color: var(--color-accent); }
.admin-theme-btn:focus-visible { outline: 2px solid var(--adm-accent-ink); outline-offset: 2px; }
.admin-theme-btn strong { color: var(--adm-text); font-weight: 600; }
.admin-theme-btn__icon { display: inline-flex; color: var(--adm-accent-ink); }

.admin-theme-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,0.55);
  opacity: 0; transition: opacity 240ms ease;
}
.admin-theme-backdrop.is-open { opacity: 1; }
.admin-theme-backdrop[hidden] { display: none; }
.admin-theme-modal {
  width: min(820px, 100%); max-height: 90vh; overflow-y: auto; box-sizing: border-box;
  background: var(--adm-raised); color: var(--adm-text);
  border: 1px solid rgba(var(--adm-fg), calc(0.14 * var(--adm-k-line)));
  border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4) var(--sp-4);
  transform: scale(0.97) translateY(6px); transition: transform 240ms var(--ease-out-soft);
}
.admin-theme-backdrop.is-open .admin-theme-modal { transform: none; }
.admin-theme-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-theme-modal__head h2 { margin: 0; font-size: 1.25rem; font-family: var(--font-heading); font-weight: 600; }
.admin-theme-modal__sub { margin: 0.4rem 0 1.1rem; font-size: 0.86rem; color: var(--adm-text-dim); }
.admin-theme-close {
  flex: none; width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--adm-fg), calc(0.06 * var(--adm-k-fill))); color: var(--adm-text);
  border: 1px solid rgba(var(--adm-fg), calc(0.2 * var(--adm-k-line)));
}
.admin-theme-close:hover { background: rgba(var(--adm-fg), calc(0.12 * var(--adm-k-fill))); }
.admin-theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.admin-theme-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 10px 10px 14px; text-align: left; cursor: pointer; color: var(--adm-text);
  background: rgba(var(--adm-fg), calc(0.03 * var(--adm-k-fill)));
  border: 1px solid rgba(var(--adm-fg), calc(0.18 * var(--adm-k-line)));
  border-radius: var(--radius-sm); font-family: inherit;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.admin-theme-card:hover { background: rgba(var(--adm-fg), calc(0.07 * var(--adm-k-fill))); }
.admin-theme-card:focus-visible { outline: 2px solid var(--adm-accent-ink); outline-offset: 2px; }
.admin-theme-card.is-active { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.admin-theme-card__head { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.92rem; font-weight: 600; }
.admin-theme-card__icon { display: inline-flex; color: var(--adm-accent-ink); }
.admin-theme-card__hint { font-size: 0.78rem; line-height: 1.4; color: var(--adm-text-dim); }
.admin-theme-card__check { display: none; position: absolute; bottom: 12px; right: 12px; color: var(--adm-accent-ink); }
.admin-theme-card.is-active .admin-theme-card__check { display: inline-flex; }

/* Previews in each theme's own colours, whatever theme is on. */
.admin-theme-preview {
  width: 100%; height: 84px; border-radius: 8px; overflow: hidden; display: flex; gap: 8px; padding: 8px 8px 8px 0;
  border: 1px solid rgba(128,128,128,0.35);
}
.admin-theme-preview .tp-side { width: 22%; flex: none; }
.admin-theme-preview .tp-card { flex: 1; border-radius: 6px; padding: 7px 8px; display: flex; flex-direction: column; gap: 5px; }
.admin-theme-preview .tp-line { height: 5px; border-radius: 3px; width: 80%; }
.admin-theme-preview .tp-line.short { width: 50%; }
.admin-theme-preview .tp-btn { margin-top: auto; width: 34px; height: 9px; border-radius: 5px; background: #007f7e; }
.admin-theme-preview--dark { background: #12141a; } .admin-theme-preview--dark .tp-side { background: #0c0d12; }
.admin-theme-preview--dark .tp-card { background: #1b1d24; border: 1px solid rgba(255,255,255,0.12); }
.admin-theme-preview--dark .tp-line { background: #ffffff; } .admin-theme-preview--dark .tp-line.short { background: #8a8d96; }
.admin-theme-preview--light { background: #F3F4F6; } .admin-theme-preview--light .tp-side { background: #E4E6EB; }
.admin-theme-preview--light .tp-card { background: #FFFFFF; border: 1px solid rgba(18,20,26,0.18); }
.admin-theme-preview--light .tp-line { background: #12141A; } .admin-theme-preview--light .tp-line.short { background: #4B5160; }
.admin-theme-preview--cream { background: #F5EEDC; } .admin-theme-preview--cream .tp-side { background: #EADFC4; border-right: 1.5px solid #3B3326; }
.admin-theme-preview--cream .tp-card { background: #FFFAEE; border: 1.5px solid #3B3326; }
.admin-theme-preview--cream .tp-line { background: #1A1611; } .admin-theme-preview--cream .tp-line.short { background: #3B3326; }
.admin-theme-preview--synth { background: #12091F; } .admin-theme-preview--synth .tp-side { background: #0B0614; }
.admin-theme-preview--synth .tp-card { background: #22163C; border: 1px solid rgba(178,140,255,0.38); }
.admin-theme-preview--synth .tp-line { background: #F3ECFF; } .admin-theme-preview--synth .tp-line.short { background: #C77DFF; }
.admin-theme-preview--synth .tp-btn { background: #33E3CE; }

/* The cross-fade between themes. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 350ms; animation-timing-function: ease; }
:root.theme-fading, :root.theme-fading *, :root.theme-fading *::before, :root.theme-fading *::after {
  transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media (max-width: 760px) {
  .admin-theme-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Notices (window.adminNotify in admin.js) — replace browser alert() ---- */
.admin-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1300; display: flex; flex-direction: column; gap: 8px; width: min(520px, calc(100vw - 32px)); pointer-events: none; }
.admin-toast {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0.6rem 0.8rem 1.1rem; border-radius: 16px; pointer-events: auto;
  background: var(--adm-raised); color: var(--adm-text); font-size: 0.9rem; line-height: 1.45;
  border: 1px solid rgba(var(--adm-fg), calc(0.14 * var(--adm-k-line))); box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.admin-toast span { flex: 1; }
.admin-toast--error { border-left: 4px solid rgb(205,64,64); }
.admin-toast--ok { border-left: 4px solid var(--color-accent); }
.admin-toast.is-gone { opacity: 0; transform: translateY(8px); }
.admin-toast__close { flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(var(--adm-fg), calc(0.08 * var(--adm-k-fill))); color: var(--adm-text); font-size: 1.1rem; cursor: pointer; }
.admin-toast__close:hover { background: rgba(var(--adm-fg), calc(0.16 * var(--adm-k-fill))); }