body.tm-admin-shell-enabled {
  min-height: 100vh;
}

body.tm-admin-shell-enabled .page {
  margin-top: 74px;
}

body.tm-admin-shell-enabled .page-shell {
  padding-top: max(68px, calc(env(safe-area-inset-top) + 46px));
}

.tm-admin-page-header {
  position: relative;
  padding: 28px 0 24px;
}

.tm-admin-page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.tm-admin-page-header__brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.tm-admin-page-header__logo {
  width: 92px;
  max-width: 22vw;
  height: auto;
  display: block;
  flex: 0 0 auto;
}

.tm-admin-page-header__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.62);
}

.tm-admin-page-header__title {
  margin: 0;
  font-family: var(--tm-font-display-condensed);
  text-transform: uppercase;
  font-size: clamp(48px, 8vw, 88px);
  letter-spacing: 0.05em;
  line-height: 0.9;
  font-weight: 500;
}

.tm-admin-page-header__copy {
  max-width: 560px;
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(245, 241, 232, 0.68);
}

.tm-admin-page-header__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.admin-page.tm-admin-shell-enabled .admin-app {
  max-height: calc(100dvh - max(96px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 58px));
}

body.tm-admin-shell-locked {
  overflow: hidden;
}

.tm-admin-switcher {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 55;
  width: 100%;
  transition: transform 340ms cubic-bezier(.2,.7,.2,1), opacity 260ms ease;
  /* This file loads on pages with no global box-sizing:border-box reset
     (admin/index.php + hub.css, notably — door/demo/the site all have their
     own) — width:100% + real padding needs this explicitly or it overflows
     52px past the viewport there. */
  box-sizing: border-box;
  /* Padding lives here, on the full-width outer element — same layering as
     #tm-header/.tm-container (site-chrome.css): padding first, *then*
     max-width/centering on the inner element below with no padding of its
     own. Doing both on one element (the previous version) added the padding
     again *inside* the already-centered box on wide screens, drifting this
     26px further in than #tm-header's own logo. */
  padding: calc(env(safe-area-inset-top) + 8px) 26px 8px;
  background: rgba(4, 4, 10, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 1px 0 rgba(77, 114, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.36);
}

.tm-admin-switcher *, .tm-admin-menu-modal *{
  border:none !important;
}

.tm-admin-switcher__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  /* No padding here on purpose — matches .tm-container (site-chrome.css)
     exactly: centering only, the actual inset comes from .tm-admin-switcher's
     own padding above. */
  width: 100%;
  /* On narrow screens there's more here (menu, maintenance toggle, stats,
     notify, logout) than fits — scroll horizontally instead of wrapping or
     squishing any of it unreadably. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tm-admin-switcher__inner::-webkit-scrollbar {
  display: none;
}

/* The 1500px cap (matching .tm-container/#tm-header) only makes sense on the
   public site — the admin apps (hub/door/demo) keep running edge to edge
   at any width, same as before, so this is scoped to the site variant only. */
.tm-admin-switcher--site .tm-admin-switcher__inner {
  max-width: 1500px;
  margin: 0 auto;
}

/* "Client view" — collapses the whole bar out of the way instead of hiding
   individual pieces, so there's nothing left admin-only visible on top of
   the page underneath. Stays a translate/opacity move (never display:none)
   so it's a real transition, not a pop; pointer-events is the only thing
   that actually needs to change instantly. */
.tm-admin-switcher.is-collapsed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* The one thing still reachable once the bar itself is gone — a small tab
   left hanging off the top edge, same dark-glass material as the bar it
   replaces, with the site's own blue/red duality as its one accent (the
   same touch admin/index.php's header uses) so it still reads as "this
   site's admin", not a generic control. Lives outside .tm-admin-switcher in
   the markup (see admin_common.php) so its own fixed position never gets
   dragged along by that element's transform above. */
.tm-admin-bar-peek {
  position: fixed;
  top: 0;
  left: 20%;
  /* Has to beat literally everything on every page this bar can show on —
     the site's own cursor ring (700), toasts (250), modals (630) — not just
     the admin chrome's own stack, or a page-specific effect could paint over
     the one thing left to bring the bar back. */
  z-index: 999999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: rgba(4, 4, 10, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: rgba(245, 241, 232, 0.55);
  font-size: 0.72rem;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 340ms cubic-bezier(.2,.7,.2,1), opacity 260ms ease, height 160ms ease, color 160ms ease, border-color 160ms ease;
}

/* Same author-vs-user-agent-origin cascade issue as the stats dropdown
   above (search "[hidden]" there) — without this, "display: inline-flex"
   wins over the browser's own "[hidden] { display: none }" default and the
   tab stays visible (at its collapsed transform, but still painted/hit-
   testable) even while the bar itself is showing. */
.tm-admin-bar-peek[hidden] {
  display: none !important;
}

.tm-admin-bar-peek.is-shown {
  transform: translateY(0);
  opacity: 1;
}

.tm-admin-bar-peek::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4d72ff, #c44c67);
  opacity: 0.6;
}

.tm-admin-bar-peek:hover {
  height: 27px;
  color: #d8c4ff;
  border-color: rgba(196, 76, 103, 0.32);
}

/* Thin separators grouping the bar into clusters (nav | maintenance | stats,
   and account actions | view toggle) instead of one undifferentiated row of
   icons — background, not border, since ".tm-admin-switcher *
   {border:none!important}" above strips a literal border off everything in
   here. Hairline only, no hover state: a landmark, not a control. */
.tm-admin-switcher__divider {
  width: 1px;
  height: 20px;
  flex: none;
  background: rgba(255, 255, 255, 0.1);
}

/* The one button in the trail that isn't a nav/account action but a view
   toggle — round instead of the other links' rounded-square, with a
   blue/red gradient ring (the ::before, not border: ".tm-admin-switcher
   *{border:none!important}" above strips a literal border property off
   everything under this bar, a plain "border" here would just vanish) so it
   reads as its own kind of control at a glance instead of one more icon in
   the row. */
.tm-admin-switcher__viewtoggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 241, 232, 0.7);
  font-size: 0.86rem;
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}

.tm-admin-switcher__viewtoggle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #4d72ff, #c44c67);
  opacity: 0.7;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.tm-admin-switcher__viewtoggle:hover {
  transform: translateY(-1px);
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.tm-admin-switcher__viewtoggle:hover::before {
  opacity: 1;
}

.tm-admin-switcher__lead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* site logo */
.tm-admin-switcher__brand {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background: rgba(245, 241, 232, 0.78);
  -webkit-mask: url('/static/img/logo/logo_white.png') no-repeat center / contain;
  mask: url('/static/img/logo/logo_white.png') no-repeat center / contain;
  transition: background 160ms ease, transform 160ms ease;
}

.tm-admin-switcher__brand:hover {
  background: #fff;
  transform: scale(1.08);
}

.tm-admin-switcher__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 241, 232, 0.78);
  text-decoration: none;
  font-size: 0.9rem;
  /* Buttons don't get a pointer cursor by default the way <a> tags do — the
     hamburger and quick-logout are plain <button>s using only this shared
     class (unlike notify/logout-in-modal, which already set their own). */
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.tm-admin-switcher__image {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.tm-admin-switcher__link:hover {
  transform: translateY(-1px);
  border-color: rgba(196, 76, 103, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #d58ba0;
}

.tm-admin-switcher__link.is-active {
  border-color: rgba(196, 76, 103, 0.34);
  background: linear-gradient(180deg, rgba(77, 114, 255, 0.14), rgba(196, 76, 103, 0.12));
  color: #d8c4ff;
}

.tm-admin-switcher__logout {
  appearance: none;
  cursor: pointer;
  font: inherit;
}

.tm-admin-switcher__trail {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Visitor-count badge (admin/shared/stats.php) — click opens a
   Day/Month/Year dropdown instead of navigating away; "Open Matomo" lives
   as one more option inside that dropdown. */
.tm-admin-switcher__stats {
  /* admin/demo/index.php also loads static/css/admin/demo.css, which has a
     generic "button { width: 100%; ... }" reset meant for its own form
     buttons — every other button here (.tm-admin-switcher__link,
     .tm-admin-switcher__toggle-track) already has its own explicit width
     that beats it by specificity, this one didn't, so demo.css's 100%
     silently won by default and blew this up over its siblings. */
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 241, 232, 0.78);
  text-decoration: none;
  font: inherit;
  appearance: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.tm-admin-switcher__stats:hover {
  transform: translateY(-1px);
  border-color: rgba(196, 76, 103, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #d58ba0;
}

.tm-admin-switcher__stats i {
  font-size: 0.8em;
  opacity: 0.7;
}

.tm-admin-switcher__stats-group {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.tm-admin-switcher__stats-num {
  font-weight: 700;
  color: rgba(245, 241, 232, 0.96);
}

/* The tag is what makes the number's meaning obvious at a glance — it's
   not always the same page/thing (see admin_common.php's $statsContext). */
.tm-admin-switcher__stats-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.42);
}

.tm-admin-switcher__stats-sep {
  opacity: 0.4;
}

.tm-admin-switcher__stats-caret {
  font-size: 0.6em;
  opacity: 0.5;
  margin-left: 2px;
  transition: transform 160ms ease;
}

.tm-admin-switcher__stats[aria-expanded="true"] .tm-admin-switcher__stats-caret {
  transform: rotate(180deg);
}

/* position: fixed and top/left are set inline by JS (getBoundingClientRect()
   on the button) — it lives outside .tm-admin-switcher__inner in the DOM on
   purpose (see admin_common.php's comment there), so plain "anchor to my
   parent" CSS can't place it anymore. */
.tm-admin-switcher__stats-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: transparent;
}

.tm-admin-switcher__stats-dropdown {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(10, 10, 20, 0.98), rgba(4, 4, 10, 0.98));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Without this, "display: flex" above (an author-origin rule) beats the
   browser's own default "[hidden] { display: none }" (user-agent origin —
   loses to author styles regardless of specificity), so the dropdown would
   stay visible, at its unset default position, on every single page load —
   exactly what .tm-admin-menu-modal[hidden] above already guards against. */
.tm-admin-switcher__stats-dropdown[hidden],
.tm-admin-switcher__stats-dropdown-backdrop[hidden] {
  display: none !important;
}

/* The brand's own blue/red duality (same gradient as the view-toggle ring
   and the hub header's accent line) rather than a one-off color, so
   "something needs attention" still reads as this site's admin, not a
   generic UI kit default. */
.tm-admin-switcher__pending {
  position: relative;
}

.tm-admin-switcher__pending-count {
  position: absolute;
  /* Non-negative on purpose — .tm-admin-switcher__inner (this button's
     scroll-row ancestor) has overflow-y: hidden for the horizontal-scroll-
     on-mobile behavior above, which clips anything poking past its own
     top edge; a negative offset here was getting its top sliver cut off. */
  top: 0;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4d72ff, #c44c67);
  color: #f5f1e8;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(4, 4, 10, 0.92);
}

.tm-admin-switcher__pending-count[hidden] {
  display: none !important;
}

/* Same fixed/JS-positioned/backdrop-dismissed pattern as
   .tm-admin-switcher__stats-dropdown above — kept as its own pair of
   elements (not a shared one) so opening this one can never accidentally
   reposition or dismiss the stats dropdown instead. */
.tm-admin-switcher__pending-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: transparent;
}

.tm-admin-switcher__pending-dropdown {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  max-width: 280px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(10, 10, 20, 0.98), rgba(4, 4, 10, 0.98));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.tm-admin-switcher__pending-dropdown[hidden],
.tm-admin-switcher__pending-dropdown-backdrop[hidden] {
  display: none !important;
}

.tm-admin-switcher__pending-empty {
  margin: 6px 8px;
  font-size: 0.78rem;
  color: rgba(245, 241, 232, 0.5);
}

.tm-admin-switcher__pending-empty[hidden] {
  display: none !important;
}

.tm-admin-switcher__pending-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(245, 241, 232, 0.82);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease;
}

.tm-admin-switcher__pending-item:hover {
  background: linear-gradient(180deg, rgba(77, 114, 255, 0.16), rgba(196, 76, 103, 0.14));
  color: #f5f1e8;
}

.tm-admin-switcher__stats-option {
  /* Already the effective size without this (flex-column's default
     align-items: stretch already fills the dropdown's width) — set
     explicitly anyway so it's deliberate, not just an accidental match with
     demo.css's generic "button { width: 100%; ... }" reset (see
     .tm-admin-switcher__stats above, which that same rule broke because it
     had no width of its own to win the tie). */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: none;
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(245, 241, 232, 0.72);
  text-decoration: none;
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
}

.tm-admin-switcher__stats-option:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #f5f1e8;
}

.tm-admin-switcher__stats-option.is-active {
  background: linear-gradient(180deg, rgba(77, 114, 255, 0.16), rgba(196, 76, 103, 0.14));
  color: #f5f1e8;
}

.tm-admin-switcher__stats-option--link {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
  padding-top: 10px;
  color: rgba(245, 241, 232, 0.55);
  font-weight: 500;
}

.tm-admin-switcher__stats-option--link:hover {
  color: #d58ba0;
  background: none;
}

.tm-admin-switcher__stats-option--link i {
  font-size: 0.7em;
  opacity: 0.7;
}

@media (max-width: 560px) {
  .tm-admin-switcher__stats-tag {
    display: none;
  }
}

@media (max-width: 420px) {
  #tmAdminStatsSecondaryWrap,
  .tm-admin-switcher__stats-sep {
    display: none;
  }
}

.tm-admin-switcher__notify {
  position: relative;
  appearance: none;
  cursor: pointer;
  font: inherit;
  flex: 0 0 auto;
}

.tm-admin-switcher__notify::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.42);
}

.tm-admin-switcher__notify.is-disarmed {
  border-color: rgba(235, 122, 108, 0.34);
  background: rgba(235, 122, 108, 0.12);
  color: #eb7a6c;
}

.tm-admin-switcher__notify.is-disarmed:hover {
  border-color: rgba(235, 122, 108, 0.56);
  background: rgba(235, 122, 108, 0.18);
  color: #ff9185;
}

.tm-admin-switcher__notify.is-armed {
  border-color: rgba(196, 76, 103, 0.36);
  background: linear-gradient(180deg, rgba(77, 114, 255, 0.14), rgba(196, 76, 103, 0.12));
  color: #d8c4ff;
}

.tm-admin-switcher__notify.is-armed:hover {
  border-color: rgba(196, 76, 103, 0.5);
  background: linear-gradient(180deg, rgba(77, 114, 255, 0.2), rgba(196, 76, 103, 0.16));
  color: #ecd7ef;
}

/* clear cache */
.tm-admin-switcher__cache i {
  transition: transform 300ms ease;
}

.tm-admin-switcher__cache:hover i {
  transform: rotate(-18deg);
}

.tm-admin-switcher__cache.is-busy i {
  animation: tm-admin-sweep 600ms ease-in-out infinite alternate;
}

.tm-admin-switcher__cache.is-done {
  background: rgba(77, 114, 255, 0.22);
  color: #fff;
}

.tm-admin-switcher__cache.is-error {
  background: rgba(196, 76, 103, 0.28);
  color: #fff;
}

@keyframes tm-admin-sweep {
  from { transform: rotate(-24deg) translateX(-2px); }
  to { transform: rotate(14deg) translateX(2px); }
}

.tm-admin-switcher__toggle-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tm-admin-switcher__toggle-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.5);
  white-space: nowrap;
  transition: color 160ms ease;
}

.tm-admin-switcher__toggle-label.is-on {
  color: #d8c4ff;
}

/* Real switch (track + sliding thumb), not another icon button — the whole
   domain goes down for every non-admin visitor while this is on, worth
   reading at a glance as a physical on/off rather than one more icon. */
.tm-admin-switcher__toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 42px;
  height: 24px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  appearance: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.tm-admin-switcher__toggle-track:hover {
  border-color: rgba(255, 255, 255, 0.26);
}

.tm-admin-switcher__toggle-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f5f1e8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1);
}

/* The brand's own blue/red duality, same gradient as the view-toggle ring
   and the pending-count badge — not a one-off warning color, so "on" still
   reads as this site's own accent instead of a generic UI-kit alert tone. */
.tm-admin-switcher__toggle-track.is-on {
  border-color: rgba(196, 76, 103, 0.55);
  background: linear-gradient(135deg, #4d72ff, #c44c67);
}

.tm-admin-switcher__toggle-track.is-on:hover {
  border-color: rgba(196, 76, 103, 0.75);
  background: linear-gradient(135deg, #6688ff, #d66686);
}

.tm-admin-switcher__toggle-track.is-on .tm-admin-switcher__toggle-thumb {
  transform: translateX(18px);
}

.tm-admin-switcher__toggle-track:disabled {
  opacity: 0.5;
  cursor: default;
}

.tm-admin-menu-modal {
  position: fixed;
  inset: 0;
  z-index: 68;
}

/* Public site instance (website/partials/admin-bar.php): sits above the
   site's own #tm-header (z-index 200 in site-chrome.css) instead of below
   it, since on the site this bar plays the WordPress-admin-bar role — above
   everything else so it's always reachable. Placed after *both* base rules
   above (.tm-admin-switcher and .tm-admin-menu-modal) on purpose: equal
   specificity means source order decides, and this needs to win over
   whichever of the two comes later in the file. */
.tm-admin-switcher--site,
.tm-admin-menu-modal--site {
  z-index: 9999;
}

.tm-admin-menu-modal[hidden] {
  display: none !important;
}

.tm-admin-menu-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

.tm-admin-menu-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100% - 28px, 460px);
  margin: calc(env(safe-area-inset-top) + 76px) auto 0;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(8, 8, 16, 0.94), rgba(2, 2, 8, 0.9));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.44);
}

.tm-admin-menu-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.tm-admin-menu-modal__eyebrow {
  margin: 0 0 6px;
  color: rgba(245, 241, 232, 0.62);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tm-admin-menu-modal__title {
  margin: 0;
  font-family: var(--tm-font-display-condensed);
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.tm-admin-menu-modal__close {
  flex: 0 0 auto;
}

.tm-admin-menu-modal__close.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

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

.tm-admin-menu-card {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 120px;
  padding: 18px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #f5f1e8;
  text-decoration: none;
  text-align: center;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.tm-admin-menu-card:hover {
  transform: translateY(-2px);
  border-color: rgba(196, 76, 103, 0.28);
  background: rgba(255, 255, 255, 0.07);
  color: #d58ba0;
}

.tm-admin-menu-card.is-active {
  border-color: rgba(196, 76, 103, 0.34);
  background: linear-gradient(180deg, rgba(77, 114, 255, 0.14), rgba(196, 76, 103, 0.12));
  color: #d8c4ff;
}

.tm-admin-menu-card.is-locked {
  position: relative;
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
.tm-admin-menu-card__lock {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
}

.tm-admin-menu-card--button {
  appearance: none;
  cursor: pointer;
  font: inherit;
}

.tm-admin-menu-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1.5rem;
}

.tm-admin-menu-card__icon img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.tm-admin-menu-card__label {
  font-size: 0.84rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tm-admin-lock-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
}

.tm-admin-lock-screen[hidden] {
  display: none !important;
}

/* #tm-loader itself (the trembling-icon/counting-%/progress-bar look) is shared —
   static/css/tm-loader.css, loaded alongside this file — so it's not redefined
   here. This is just the admin-specific safety net: if JS never runs (blocked,
   erroring, or window.tmRunLoader never gets called because the lock/unlock check
   it's gated on hangs), the loader still lifts on its own after a few seconds
   rather than trapping the page behind it forever. tmRunLoader's own .tm-glitch-out
   exit (site-chrome.css) covers the normal, JS-driven case. */
#tm-loader { animation: tm-admin-boot-loader-safety 6s ease forwards; }
@keyframes tm-admin-boot-loader-safety {
  0%, 90% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.tm-admin-lock-card {
  width: min(100%, 380px);
  display: grid;
  gap: 14px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(0, 0, 20, 0.55), rgba(0, 0, 8, 0.45));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  text-align: center;
}

.tm-admin-lock-card,
.tm-admin-lock-card * {
  box-sizing: border-box;
}

.tm-admin-lock-card img {
  width: 76px;
  margin: 0 auto 4px;
  display: block;
}

.tm-admin-lock-card__eyebrow {
  margin: 0;
  color: rgba(245, 241, 232, 0.62);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tm-admin-lock-card h2 {
  margin: 0;
  font-family: var(--tm-font-display-condensed);
  text-transform: uppercase;
  font-size: 40px;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.tm-admin-lock-card input,
.tm-admin-lock-card button {
  width: 100%;
  border-radius: 16px;
}

.tm-admin-lock-card input,
.tm-admin-lock-card button,
.tm-admin-lock-card button.tm-admin-switcher__logout {
  font: inherit;
}

.tm-admin-lock-card input {
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f5f1e8;
  padding: 13px 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  text-align: center;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tm-admin-lock-card input:focus {
  border-color: rgba(77, 114, 255, 0.38);
  background: rgba(255, 255, 255, 0.06);
}

.tm-admin-lock-card button {
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(77, 114, 255, 0.12), rgba(196, 76, 103, 0.08));
  color: #f5f1e8;
  padding: 13px 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.tm-admin-lock-card button:hover {
  transform: translateY(-1px);
  border-color: rgba(196, 76, 103, 0.28);
  background: rgba(255, 255, 255, 0.07);
  color: #d58ba0;
}

.tm-admin-lock-error {
  min-height: 1.2em;
  color: #eb7a6c;
  font-size: 14px;
}

@media (max-width: 720px) {
  body.tm-admin-shell-enabled .page {
    margin-top: 55px;
  }

  body.tm-admin-shell-enabled .page-shell {
    padding-top: max(62px, calc(env(safe-area-inset-top) + 42px));
  }

  body.admin-page.tm-admin-shell-enabled .admin-app {
    max-height: calc(100svh - 72px);
  }

  .tm-admin-page-header {
    padding: 22px 0 20px;
  }

  .tm-admin-page-header__brand {
    align-items: flex-start;
  }

  .tm-admin-page-header__logo {
    width: 72px;
  }

  .tm-admin-page-header__meta {
    justify-content: flex-start;
  }

  .tm-admin-switcher {
    padding: calc(env(safe-area-inset-top) + 7px) 16px 7px;
  }

  .tm-admin-switcher__inner {
    gap: 8px;
  }

  .tm-admin-switcher__link {
    width: 32px;
    height: 32px;
    font-size: 0.86rem;
  }

  .tm-admin-switcher__nav {
    gap: 6px;
  }

  .tm-admin-switcher__image {
    width: 16px;
    height: 16px;
  }

  .tm-admin-menu-modal__panel {
    width: min(100% - 18px, 560px);
    margin-top: calc(env(safe-area-inset-top) + 64px);
    padding: 18px;
    border-radius: 22px;
  }

  .tm-admin-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .tm-admin-menu-card {
    min-height: 108px;
    padding: 16px 12px;
    border-radius: 18px;
  }

  .tm-admin-menu-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.35rem;
  }

  .tm-admin-menu-card__icon img {
    width: 30px;
    height: 30px;
  }
}

/* ---- door console in the header: button + popover under the bar (static/js/admin/door-widget.js) ---- */
.tm-door-btn { position: relative; }
.tm-door-btn__dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #ff5d73; box-shadow: 0 0 8px #ff5d73; opacity: 0; transform: scale(0.4); transition: opacity 0.2s ease, transform 0.2s ease; }
.tm-door-btn.is-ringing { color: #fff; background: linear-gradient(120deg, rgba(77, 114, 255, 0.5), rgba(196, 76, 103, 0.5)); animation: tm-door-shake 1.2s ease-in-out infinite; }
.tm-door-btn.is-ringing .tm-door-btn__dot { opacity: 1; transform: none; animation: tm-door-blink 0.9s ease-in-out infinite; }
.tm-door-btn.is-active { background: rgba(247, 242, 232, 0.12); color: #fff; }
@keyframes tm-door-shake { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-10deg); } 20%, 40% { transform: rotate(10deg); } }
@keyframes tm-door-blink { 50% { opacity: 0.3; } }
.tm-door { position: fixed; top: calc(env(safe-area-inset-top) + 58px); right: 16px; z-index: 10000; width: min(380px, calc(100vw - 24px)); opacity: 0; transform: translateY(-10px) scale(0.98); transform-origin: top right; pointer-events: none; transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.2,.8,.2,1); font-family: var(--tm-font-text, inherit); color: #f7f2e8; }
.tm-door.is-open { opacity: 1; transform: none; pointer-events: auto; }
.tm-door[hidden] { display: none !important; }
.tm-door.is-pop .tm-door__card { animation: tm-door-pop 0.6s cubic-bezier(.2,.9,.3,1.3); }
@keyframes tm-door-pop { from { transform: translateY(-14px) scale(0.94); } to { transform: none; } }
.tm-door__card { position: relative; overflow: hidden; border-radius: 22px; background: rgba(16, 16, 24, 0.96); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.tm-door.is-ringing .tm-door__card::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 45% at 50% 0%, rgba(120, 90, 200, 0.28), transparent 70%); animation: tm-door-glow 1.6s ease-in-out infinite; }
@keyframes tm-door-glow { 50% { opacity: 0.4; } }
.tm-door__card > * { position: relative; z-index: 1; }
.tm-door__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 0 18px; }
.tm-door__kicker { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--tm-font-mono, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247, 242, 232, 0.6); }
.tm-door__led { width: 7px; height: 7px; border-radius: 50%; background: rgba(247, 242, 232, 0.35); }
.tm-door.is-ringing .tm-door__led { background: #ff5d73; box-shadow: 0 0 10px #ff5d73; animation: tm-door-blink 0.9s ease-in-out infinite; }
.tm-door[data-status="coming"] .tm-door__led { background: #4d72ff; box-shadow: 0 0 10px #4d72ff; }
.tm-door__tools { display: flex; gap: 4px; }
.tm-door__icon { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: none; color: rgba(247, 242, 232, 0.55); font-size: 13px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.tm-door__icon:hover, .tm-door__icon.is-on { background: rgba(247, 242, 232, 0.08); color: #fff; }
.tm-door__main { padding: 8px 18px 18px; }
.tm-door__main[hidden], .tm-door__history[hidden] { display: none; }
.tm-door__name { margin: 0; font-family: var(--tm-font-display, inherit); font-weight: 300; font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-door__msg { margin: 4px 0 14px; font-size: 13px; color: rgba(247, 242, 232, 0.55); min-height: 1.2em; }
.tm-door__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: #0a0a0d; }
.tm-door__view video, .tm-door__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm-door__view [hidden] { display: none !important; }
.tm-door__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 242, 232, 0.3); }
.tm-door__empty i { font-size: 18px; }
.tm-door__live { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.tm-door__live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ff5d73; animation: tm-door-blink 1s ease-in-out infinite; }
.tm-door__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tm-door__act { min-height: 46px; padding: 0 12px; border: none; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; cursor: pointer; transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, filter 0.2s ease; }
.tm-door__act--go { background: linear-gradient(120deg, #4d72ff, #8a5ccf); box-shadow: 0 10px 28px rgba(77, 114, 255, 0.35); }
.tm-door__act--away { background: rgba(196, 76, 103, 0.18); color: #ff9fae; }
.tm-door__act:hover { transform: translateY(-1px); filter: brightness(1.08); }
.tm-door__act:active { transform: scale(0.97); }
.tm-door__act.is-sent { box-shadow: 0 0 0 3px rgba(247, 242, 232, 0.25); }
.tm-door__history { padding: 8px 10px 12px; }
.tm-door__list { display: flex; flex-direction: column; gap: 2px; max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tm-door__item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; transition: background-color 0.2s ease; }
.tm-door__item:hover { background: rgba(247, 242, 232, 0.05); }
.tm-door__thumb { display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 12px; background: rgba(247, 242, 232, 0.06); color: rgba(247, 242, 232, 0.35); }
.tm-door__thumb img, .tm-door__thumb video { width: 100%; height: 100%; object-fit: cover; }
.tm-door__who { min-width: 0; }
.tm-door__who b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-door__who small { display: block; margin-top: 2px; font-size: 11px; color: rgba(247, 242, 232, 0.45); }
.tm-door__tag { padding: 3px 9px; border-radius: 999px; background: rgba(247, 242, 232, 0.07); font-style: normal; font-size: 10px; font-weight: 500; white-space: nowrap; color: rgba(247, 242, 232, 0.7); }
.tm-door__tag--go { background: rgba(77, 114, 255, 0.18); color: #9fb3ff; }
.tm-door__tag--away { background: rgba(196, 76, 103, 0.18); color: #ff9fae; }
.tm-door__none { margin: 24px 0; text-align: center; font-size: 13px; color: rgba(247, 242, 232, 0.4); }
.tm-door__foot { display: flex; justify-content: space-between; gap: 8px; padding: 10px 8px 0; }
.tm-door__link { padding: 6px 4px; border: none; background: none; font: inherit; font-size: 12px; color: rgba(247, 242, 232, 0.5); cursor: pointer; }
.tm-door__link:hover { color: #fff; }
.tm-door__link--danger:hover { color: #ff8a9a; }
@media (max-width: 560px) {
  .tm-door { right: 12px; left: 12px; width: auto; top: calc(env(safe-area-inset-top) + 54px); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-door-btn.is-ringing, .tm-door.is-pop .tm-door__card, .tm-door.is-ringing .tm-door__card::before { animation: none; }
}
.tm-door .tm-door__act { width: auto; border: none !important; text-transform: uppercase; }
.tm-door .tm-door__act--go, .tm-door .tm-door__act--go:hover { background: linear-gradient(120deg, #4d72ff, #8a5ccf) !important; color: #fff !important; }
.tm-door .tm-door__act--away, .tm-door .tm-door__act--away:hover { background: rgba(196, 76, 103, 0.18) !important; color: #ff9fae !important; }
.tm-door .tm-door__act--away:hover { background: rgba(196, 76, 103, 0.28) !important; }
.tm-door .tm-door__icon, .tm-door .tm-door__link { width: auto; border: none !important; }
.tm-door .tm-door__icon { width: 32px; }
.tm-door .tm-door__icon, .tm-door .tm-door__link { background: none !important; }
.tm-door .tm-door__icon:hover, .tm-door .tm-door__icon.is-on { background: rgba(247, 242, 232, 0.08) !important; }

/* ---- bar groups: nav + stats left; alerts, site controls, account right ---- */
.tm-admin-switcher__group { display: flex; align-items: center; gap: 6px; }
.tm-admin-switcher__lead { gap: 10px; }
.tm-admin-switcher__trail { gap: 12px; }
.tm-admin-switcher__group .tm-admin-switcher__toggle-group { margin-left: 4px; }

/* ---- bar dropdowns in the door panel's style ---- */
.tm-admin-switcher__pending-dropdown, .tm-admin-switcher__stats-dropdown { gap: 2px; padding: 12px 8px 8px !important; border: none !important; border-radius: 20px !important; background: rgba(16, 16, 24, 0.97) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important; transform-origin: top; animation: tm-pop-in 0.3s cubic-bezier(.2,.8,.2,1); font-family: var(--tm-font-text, inherit); }
.tm-admin-switcher__pending-dropdown { min-width: 280px !important; max-width: 320px !important; }
.tm-admin-switcher__stats-dropdown { min-width: 180px !important; }
@keyframes tm-pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
.tm-pop__kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 0 10px 6px; font-family: var(--tm-font-mono, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247, 242, 232, 0.55); }
.tm-pop__led { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(120deg, #4d72ff, #c44c67); box-shadow: 0 0 8px rgba(120, 90, 200, 0.6); }
.tm-admin-switcher__pending-empty { display: flex !important; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 14px 10px 16px; text-align: center; }
.tm-admin-switcher__pending-empty[hidden] { display: none !important; }
.tm-admin-switcher__pending-empty i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 50%; background: rgba(77, 114, 255, 0.14); color: #9fb3ff; font-size: 15px; }
.tm-admin-switcher__pending-empty b { font-family: var(--tm-font-display, inherit); font-weight: 300; font-size: 1.3rem; letter-spacing: -0.02em; color: #f7f2e8; }
.tm-admin-switcher__pending-empty small { font-size: 12px; color: rgba(247, 242, 232, 0.45); }
.tm-admin-switcher__pending-item { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) 12px; align-items: center; gap: 12px; padding: 8px 10px 8px 8px !important; border: none !important; border-radius: 14px !important; background: none !important; color: #f7f2e8 !important; font-size: 13px !important; font-weight: 500; line-height: 1.35; text-decoration: none; transition: background-color 0.2s ease; }
.tm-admin-switcher__pending-item:hover { background: rgba(247, 242, 232, 0.06) !important; }
.tm-admin-switcher__pending-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(247, 242, 232, 0.06); color: #9fb3ff; font-size: 13px; }
.tm-admin-switcher__pending-item.is-urgent .tm-admin-switcher__pending-ico { background: linear-gradient(120deg, #4d72ff, #c44c67); color: #fff; box-shadow: 0 0 16px rgba(120, 90, 200, 0.5); }
.tm-admin-switcher__pending-go { transform: rotate(-90deg); font-size: 10px; color: rgba(247, 242, 232, 0.35); }
.tm-admin-switcher__stats-option { border: none !important; border-radius: 12px !important; padding: 10px 12px !important; font-size: 13px !important; font-weight: 500 !important; color: rgba(247, 242, 232, 0.7) !important; background: none !important; text-align: left; }
.tm-admin-switcher__stats-option:hover { background: rgba(247, 242, 232, 0.06) !important; color: #fff !important; }
.tm-admin-switcher__stats-option.is-active { background: linear-gradient(120deg, rgba(77, 114, 255, 0.28), rgba(196, 76, 103, 0.24)) !important; color: #fff !important; }
.tm-admin-switcher__stats-option--link { margin-top: 4px; color: rgba(247, 242, 232, 0.5) !important; }
@media (prefers-reduced-motion: reduce) { .tm-admin-switcher__pending-dropdown, .tm-admin-switcher__stats-dropdown { animation: none; } }
.tm-admin-switcher__notify.is-busy { opacity: 0.6; pointer-events: none; }
.tm-admin-switcher__notify.is-error { animation: tm-door-shake 0.5s ease-in-out; }

/* ---- topbar (phone): the scroll strip runs edge to edge, its breathing room lives inside it ---- */
@media (max-width: 900px) {
  .tm-admin-switcher { padding-left: 0 !important; padding-right: 0 !important; }
  .tm-admin-switcher__inner { padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; }
  .tm-admin-switcher__trail { padding-right: 16px; margin-right: -16px; }
}
/* ---- pending: unread messages (inbox) show who + a line of the message ---- */
.tm-admin-switcher__pending-text { min-width: 0; }
.tm-admin-switcher__pending-sub { display: block; margin-top: 2px; overflow: hidden; font-size: 11px; font-weight: 400; color: rgba(247, 242, 232, 0.5); white-space: nowrap; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; }
.tm-admin-switcher__pending-item.is-msg .tm-admin-switcher__pending-ico { background: rgba(77, 114, 255, 0.18); color: #9fb3ff; }
.tm-admin-switcher__pending-item.is-msg .tm-admin-switcher__pending-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tm-admin-switcher__pending.is-bump .tm-admin-switcher__pending-count { animation: tmPendingBump 0.6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tmPendingBump { 40% { transform: scale(1.45); } }
/* ---- admin dialog (window.admAsk), same look as the Lab dialog ---- */
.tm-dlg { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; background: rgba(5, 5, 6, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.2s ease; font-family: var(--tm-font-text, "Red Hat Text", sans-serif); }
.tm-dlg[hidden] { display: none; }
.tm-dlg.is-in { opacity: 1; }
.tm-dlg__card { width: min(400px, 100%); padding: 28px 24px 20px; border-radius: 24px; background-color: #121219; background-image: radial-gradient(120% 90% at 0% 0%, rgba(77, 114, 255, 0.2), transparent 60%); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); text-align: center; color: #f7f2e8; transform: translateY(12px) scale(0.96); transition: transform 0.3s cubic-bezier(.2, .9, .25, 1); }
.tm-dlg.is-in .tm-dlg__card { transform: none; }
.tm-dlg__card.is-shake { animation: tmDlgShake 0.35s ease; }
@keyframes tmDlgShake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
.tm-dlg__ico { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 16px; background: rgba(77, 114, 255, 0.18); color: #9fb3ff; font-size: 20px; }
.tm-dlg__ico.is-danger { background: rgba(255, 92, 92, 0.14); color: #ff8a8a; }
.tm-dlg h3 { margin: 0; font: 300 24px/1.2 var(--tm-font-display, "Red Hat Display", sans-serif); color: #fff; letter-spacing: -0.01em; text-transform: none; }
.tm-dlg p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: rgba(247, 242, 232, 0.6); }
.tm-dlg__field { display: block; margin-top: 16px; text-align: left; }
.tm-dlg__field small { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 242, 232, 0.5); }
.tm-dlg__field input { width: 100% !important; height: 46px !important; padding: 0 14px !important; border: none !important; border-radius: 12px !important; background: rgba(0, 0, 0, 0.35) !important; box-shadow: inset 0 0 0 1px rgba(247, 242, 232, 0.1) !important; color: #fff !important; font: 500 14px var(--tm-font-mono, monospace) !important; outline: none; }
.tm-dlg__field input:focus { box-shadow: inset 0 0 0 1.5px #4d72ff !important; }
.tm-dlg__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.tm-dlg__btns button { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: auto !important; min-height: 48px; padding: 0 14px !important; border: none !important; border-radius: 999px !important; background: rgba(247, 242, 232, 0.06) !important; color: rgba(247, 242, 232, 0.85) !important; font: 600 14px var(--tm-font-text, inherit) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; }
.tm-dlg__btns button:hover { background: rgba(247, 242, 232, 0.11) !important; color: #fff !important; }
.tm-dlg__btns button:active { transform: scale(0.97); }
.tm-dlg__btns .is-ok { background: #4d72ff !important; color: #fff !important; box-shadow: 0 8px 22px rgba(77, 114, 255, 0.3); }
.tm-dlg__btns .is-ok.is-danger { background: #e5484d !important; box-shadow: 0 8px 22px rgba(229, 72, 77, 0.3); }

/* ---- header popovers: anchored under their button with a caret ---- */
.tm-door::before, .tm-admin-switcher__pending-dropdown::before, .tm-admin-switcher__stats-dropdown::before { content: ''; position: absolute; top: -5px; left: var(--caret-x, 50%); z-index: 2; width: 12px; height: 12px; margin-left: -6px; border-radius: 3px 0 0 0; background: #1c1c27; box-shadow: inset 1px 1px 0 rgba(247, 242, 232, 0.09); transform: rotate(45deg); pointer-events: none; }
.tm-pop-scrim { position: fixed; top: 56px; right: 0; bottom: 0; left: 0; z-index: 9990; background: rgba(3, 3, 7, 0.5); -webkit-backdrop-filter: blur(4px) saturate(0.8); backdrop-filter: blur(4px) saturate(0.8); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
.tm-pop-scrim.is-on { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.tm-door__card, .tm-admin-switcher__pending-dropdown, .tm-admin-switcher__stats-dropdown { background: linear-gradient(180deg, #1c1c27, #15151e) !important; box-shadow: inset 0 1px 0 rgba(247, 242, 232, 0.09), 0 28px 70px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(0, 0, 0, 0.6) !important; }
@media (prefers-reduced-motion: reduce) { .tm-pop-scrim { transition: none; } }
.tm-door { transform-origin: var(--caret-x, 100%) 0; }
@media (max-width: 560px) { .tm-door { width: auto; } }