@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/montserrat-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

html {
  color-scheme: dark;
}

:root {
  --font-body: Inter;
  --font-heading: Montserrat;
  --font-mono: JetBrains Mono;
  --font-body-stack: var(--font-body), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading-stack: var(--font-heading), var(--font-body-stack);
  --font-mono-stack: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --support-control-height: 53.6px;
  --support-control-offset: calc(84px - var(--support-control-height));
  --desktop-logo-height: 42.2833px;
  --desktop-frame-max-width: 80rem;
  --desktop-viewport-gutter: max(0px, calc((100vw - var(--desktop-frame-max-width)) / 2));
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  --admin-support-divider: var(--color-border-white);
  --admin-brand-header-height: 7.25rem;
  --admin-page-header-height: 5.25rem;
  --admin-support-topbar-height: var(--admin-page-header-height);
  --admin-support-panel-header-height: 4.35rem;
  --admin-top-action-button-width: 5.75rem;
  --admin-ui-bg: var(--color-page);
  --admin-ui-surface: var(--color-surface);
  --admin-ui-surface-muted: var(--color-surface-muted);
  --admin-ui-surface-raised: var(--color-control);
  --admin-ui-control: var(--color-control);
  --admin-ui-control-hover: var(--color-control-hover);
  --admin-ui-border: var(--color-border-hairline);
  --admin-ui-border-hover: var(--color-border-hairline-hover);
  --admin-ui-radius: 14px;
  --admin-ui-radius-sm: 10px;
  --admin-ui-radius-lg: 24px;
  --admin-ui-card-shadow:
    0 1px 3px 0 var(--color-shadow-faint),
    inset 0 1px 0 0 var(--color-tint),
    inset 0 0 0 1px var(--color-shadow-inset),
    inset 0 -1px 0 0 var(--color-shadow-inset),
    inset 0 0 0 1px var(--color-highlight-soft);
  --admin-ui-inner-outline: inset 0 0 0 1px var(--color-border-hairline);
  --buy-surface: var(--color-surface-deepest);
  --buy-surface-muted: var(--color-surface-low);
  --buy-border: var(--color-border-white);
  --app-border: var(--buy-border);
  --app-border-width: 2px;
  --buy-radius: 0.9rem;
  --buy-radius-sm: 0.75rem;
  --buy-shadow: 0 24px 70px var(--color-shadow-medium);
  --mobile-settings-panel-surface: var(--color-surface-active);
  --mobile-settings-panel-border: var(--color-border);
  --mobile-settings-panel-radius: 24px;
  --mobile-settings-panel-shadow: 0 1px 3px 0 var(--color-shadow-faint);
  --value-pop-dur: 220ms;
  --value-pop-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

body,
button,
input,
textarea,
select,
.font-sans {
  font-family: var(--font-body-stack);
}

h1,
h2,
h3,
h4,
h5,
h6,
.support-empty-state-chat__title,
.support-photo-missing-placeholder__title,
.admin-support-section-heading,
.admin-page-titlebar,
.admin-news-titlebar,
.admin-news-section-heading,
.admin-stats-titlebar,
.login-guest-card__title,
.user-surface .news-feed__title,
.user-surface .information-guide-card__title,
.user-surface .dashboard-summary-title,
.user-surface .dashboard-promocode-title,
.user-surface .settings-sync-main h3,
.user-surface .key-renew-title,
.user-surface .key-device-title,
.user-surface .key-progress-title {
  font-family: var(--font-heading-stack);
}

code,
pre,
kbd,
samp,
.font-mono,
.settings-sync-code,
.profile-copy-field__value,
.admin-support-copy-field__value,
.admin-news-textarea {
  font-family: var(--font-mono-stack);
}

.admin-app-shell,
.admin-main {
  background: var(--admin-ui-bg);
}

.admin-sidebar {
  border-right: 1px solid var(--admin-ui-border);
  background: var(--color-sidebar);
}

.admin-sidebar__brand {
  display: flex;
  height: var(--admin-brand-header-height);
  min-height: var(--admin-brand-header-height);
  align-items: center;
  padding: 1rem;
}

.admin-sidebar__brand-link {
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 1;
  align-items: center;
  color: var(--color-text-primary);
}

.admin-sidebar__logo {
  display: block;
  width: 100%;
  max-width: 13.5rem;
  height: auto;
}

.admin-sidebar__nav {
  display: grid;
  align-content: start;
  gap: 1.15rem;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem;
}

.admin-sidebar__group {
  display: grid;
  gap: 0.35rem;
}

.admin-sidebar__group-label {
  padding: 0 0.55rem;
  color: var(--color-text-subtle);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-sidebar-link {
  display: flex;
  min-height: 2.65rem;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.65rem 0.7rem;
  color: var(--color-text-prose);
  font-size: 0.92rem;
  font-weight: 600;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.admin-sidebar-link:hover,
.admin-sidebar-link:focus-visible {
  border-color: var(--admin-ui-border-hover);
  background: var(--color-tint-hover);
  color: var(--color-text-primary);
  outline: none;
}

.admin-sidebar-link.is-active {
  border-color: var(--color-border-white-strong);
  background: var(--color-control-hover);
  color: var(--color-text-primary);
}

.admin-sidebar-link__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: currentColor;
}

.admin-sidebar__account {
  position: relative;
  height: 5.25rem;
  min-height: 5.25rem;
  flex: 0 0 auto;
  margin-top: auto;
  padding: 1rem 0.75rem;
}

.admin-sidebar__account-trigger {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  padding: 0.625rem 0.75rem;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  transition: background-color 160ms ease, color 160ms ease;
}

.admin-sidebar__account-trigger:hover,
.admin-sidebar__account-trigger:focus-visible,
.admin-sidebar__account-trigger[aria-expanded="true"] {
  background: var(--admin-ui-control);
  color: var(--color-text-primary);
  outline: none;
}

.admin-sidebar__avatar {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background: var(--color-control-hover);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-sidebar__account-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-sidebar__account-chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: var(--color-text-secondary);
}

.admin-sidebar__account-menu {
  position: absolute;
  right: 0.75rem;
  bottom: calc(100% + 0.5rem);
  left: 0.75rem;
  z-index: 30;
  overflow: hidden;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface);
  box-shadow: var(--admin-ui-card-shadow);
  transform-origin: 50% 100%;
}

.admin-sidebar__account-menu-action {
  display: flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  background: transparent;
  padding: 0.75rem;
  color: var(--color-text-control);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  transition: background-color 160ms ease, color 160ms ease;
}

.admin-sidebar__account-menu-action:hover,
.admin-sidebar__account-menu-action:focus-visible {
  background: var(--color-admin-tint-hover);
  color: var(--color-text-primary);
  outline: none;
}

.admin-mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  min-height: 4rem;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--admin-ui-border);
  background: var(--color-sidebar-overlay);
  padding: 0.7rem 0.85rem;
  backdrop-filter: blur(16px);
}

.admin-mobile-icon-button {
  display: inline-flex;
  width: 2.55rem;
  height: 2.55rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-ui-border);
  border-radius: 0.5rem;
  background: var(--admin-ui-control);
  color: var(--color-text-primary);
}

.admin-mobile-icon-button:hover,
.admin-mobile-icon-button:focus-visible {
  border-color: var(--admin-ui-border-hover);
  background: var(--admin-ui-control-hover);
  outline: none;
}

.admin-mobile-topbar__brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-primary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-mobile-topbar__spacer {
  width: 2.55rem;
  margin-left: auto;
}

.admin-mobile-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--color-backdrop-photo);
  backdrop-filter: blur(8px);
}

.admin-mobile-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  width: min(20rem, calc(100vw - 2rem));
  flex-direction: column;
  border-right: 1px solid var(--admin-ui-border);
  background: var(--color-sidebar);
  transition: transform 200ms ease;
}

.admin-mobile-sidebar__header {
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--admin-ui-border);
  padding: 1rem;
}

body.admin-mobile-sidebar-open {
  overflow: hidden;
}

.admin-page-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.875rem;
  min-height: var(--admin-support-topbar-height);
}

.admin-page-topbar--support {
  grid-template-columns: minmax(260px, 340px) minmax(360px, 1fr);
}

.admin-page-titlebar,
.admin-page-actions {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--admin-support-topbar-height);
  border: 1px solid transparent;
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface);
  box-shadow: var(--admin-ui-card-shadow);
}

.admin-page-titlebar {
  display: flex;
  height: var(--admin-page-header-height);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
}

.admin-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.45rem;
}

.admin-page-header-pill {
  display: inline-flex;
  min-height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid var(--admin-ui-border);
  border-radius: 999px;
  padding: 0 0.7rem;
  background: var(--admin-ui-control);
  color: var(--color-text-prose);
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-page-header-pill--positive {
  border-color: var(--color-success-progress-border);
  background: var(--color-success-pill-surface);
  color: var(--color-success-text-bright);
}

.admin-page-topbar--support .admin-support-search {
  min-height: var(--admin-support-topbar-height);
}

@media (max-width: 1023px) {
  .admin-page-topbar,
  .admin-page-topbar--support {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .admin-page-titlebar,
  .admin-page-actions,
  .admin-page-topbar--support .admin-support-search {
    height: auto;
    min-height: var(--support-control-height);
  }

  .admin-page-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@keyframes t-value-scale-pop {
  0% {
    transform: scale(0.96);
    opacity: 0;
  }

  65% {
    transform: scale(1.035);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.t-value-pop.is-animating {
  display: inline-block;
  transform-origin: center;
  animation: t-value-scale-pop var(--value-pop-dur) var(--value-pop-ease) both;
  will-change: transform, opacity;
}

@keyframes menu-popover-in {
  0% {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(var(--menu-popover-y, 0.3rem)) scale(0.97);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes menu-popover-out {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(1px);
    transform: translateY(var(--menu-popover-y, 0.3rem)) scale(0.97);
  }
}

.diagonal-strike {
  position: relative;
  display: inline-block;
  text-decoration: none !important;
}

.diagonal-strike::after,
.diagonal-strike .t-value-pop::after {
  content: "";
  position: absolute;
  left: -0.08em;
  right: -0.08em;
  top: 50%;
  height: 3px;
  background: currentColor;
  opacity: 0.65;
  transform: none;
  transform-origin: center;
}

.diagonal-strike > .t-value-pop {
  position: relative;
  display: inline-block;
}

.diagonal-strike:has(.t-value-pop)::after {
  content: none;
}

.t-icon-swap {
  position: relative;
  display: inline-grid;
}

.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity var(--icon-swap-dur) var(--icon-swap-ease),
    filter var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}

.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-value-pop.is-animating {
    animation: none !important;
  }

  .t-icon-swap .t-icon {
    transition: none !important;
  }

  .desktop-settings-menu,
  #mobile-settings-menu,
  .support-chat-actions-menu {
    animation: none !important;
  }
}

body.mobile-sidebar-open {
  overflow: hidden;
  touch-action: none;
}

.mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  border-bottom: 1px solid var(--color-tint-control);
  background: var(--color-page-overlay-mobile);
  backdrop-filter: blur(18px);
}

.mobile-topbar__inner {
  display: grid;
  min-height: calc(4rem + env(safe-area-inset-top, 0px));
  grid-template-columns: 3rem minmax(0, 1fr) minmax(3rem, auto);
  align-items: center;
  gap: 0.5rem;
  padding: env(safe-area-inset-top, 0px) 1rem 0;
}

.mobile-icon-button,
.mobile-header-action,
.mobile-account-link,
.mobile-topbar__spacer {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  font-weight: 750;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.mobile-topbar__spacer {
  justify-self: end;
}

.mobile-icon-button {
  border: 1px solid var(--color-border-white);
  background: var(--color-tint-low);
  color: var(--color-text-soft);
}

.mobile-menu-trigger {
  width: 2.75rem;
  min-width: 2.75rem;
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.mobile-menu-trigger:hover,
.mobile-menu-trigger:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-primary);
}

.mobile-menu-trigger svg {
  width: 1.5rem;
  height: 1.5rem;
}

.mobile-icon-button:active,
.mobile-header-action:active,
.mobile-account-link:active,
.mobile-sidebar__link:active,
.mobile-account-trigger:active,
.mobile-settings-panel__item:active {
  transform: scale(0.98);
}

.mobile-topbar__brand {
  display: inline-flex;
  min-width: 0;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  justify-self: center;
  padding: 0 0.5rem;
}

.mobile-topbar__brand img {
  width: min(7.7rem, 38vw);
  height: auto;
  object-fit: contain;
}

.mobile-header-action {
  justify-self: end;
  min-height: 2.25rem;
  border: 1px solid transparent;
  background: var(--color-action);
  padding: 0 0.8rem;
  color: var(--color-surface-low);
  font-size: 0.875rem;
}

.mobile-account-link {
  justify-self: end;
  border: 1px solid var(--color-border-white);
  background: var(--color-tint-hover);
  color: var(--color-text-primary);
  font-size: 0.9rem;
}

.mobile-account-link span {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 0.55rem;
  background: var(--color-control-raised);
}

.mobile-sidebar-backdrop {
  background: var(--color-backdrop-soft);
  backdrop-filter: blur(5px);
}

.mobile-sidebar {
  display: flex;
  width: min(18rem, calc(100vw - 0.75rem));
  max-width: calc(100vw - 0.75rem);
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--color-border-white);
  background: var(--color-surface-sidebar);
  box-shadow: none;
}

body.mobile-sidebar-open .mobile-sidebar {
  box-shadow: 24px 0 70px var(--color-shadow-raised);
}

.mobile-sidebar__header {
  display: flex;
  min-height: calc(4.15rem + env(safe-area-inset-top, 0px));
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: calc(0.7rem + env(safe-area-inset-top, 0px)) 0.75rem 0.3rem 1rem;
}

.mobile-sidebar__brand {
  display: inline-flex;
  min-width: 0;
  min-height: 2.75rem;
  align-items: center;
}

.mobile-sidebar__brand img {
  width: min(9.75rem, 58vw);
  height: auto;
  object-fit: contain;
}

.mobile-sidebar__close {
  flex: 0 0 auto;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.mobile-sidebar__close svg {
  width: 1.5rem;
  height: 1.5rem;
}

.mobile-sidebar__close:hover,
.mobile-sidebar__close:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.guest-sidebar-notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  justify-items: stretch;
  margin: 0.7rem 0.75rem 0.9rem;
  border: 0;
  border-radius: 0.9rem;
  background:
    linear-gradient(180deg, var(--color-tint) 0%, transparent 62%),
    var(--color-surface-active);
  color: var(--color-text-guest);
  padding: 0.8rem;
  box-shadow:
    0 1px 3px 0 var(--color-shadow-faint),
    inset 0 1px 0 0 var(--color-tint),
    inset 0 0 0 1px var(--color-shadow-inset),
    inset 0 -1px 0 0 var(--color-shadow-inset),
    inset 0 0 0 1px var(--color-highlight-soft);
  text-align: left;
}

.guest-sidebar-notice__icon {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
}

.guest-sidebar-notice__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.guest-sidebar-notice__content {
  display: grid;
  align-content: center;
  gap: 0.25rem;
  min-width: 0;
  text-align: center;
}

.guest-sidebar-notice__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.guest-sidebar-notice__content strong {
  color: var(--color-text-primary);
  font-size: 0.875rem;
  line-height: 1.2;
}

.guest-sidebar-notice__content small {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.guest-sidebar-notice__actions {
  display: grid;
  grid-column: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
}

.guest-sidebar-notice__actions a {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-hairline-strong);
  border-radius: 0.625rem;
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  padding: 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  transition: background-color 160ms ease, color 160ms ease;
}

.guest-sidebar-notice__actions a:hover,
.guest-sidebar-notice__actions a:focus-visible {
  background: var(--color-control-raised);
  color: var(--color-text-primary);
}

.guest-sidebar-notice__actions a:not(.guest-sidebar-notice__primary) {
  border: 0;
  background: var(--color-control-secondary);
  color: var(--color-text-soft);
  box-shadow: none;
  font-weight: 750;
}

.guest-sidebar-notice__actions a:not(.guest-sidebar-notice__primary):hover,
.guest-sidebar-notice__actions a:not(.guest-sidebar-notice__primary):focus-visible {
  border: 0;
  background: var(--color-tint-control);
  color: var(--color-text-primary);
  box-shadow: none;
}

.guest-sidebar-notice__actions .guest-sidebar-notice__primary {
  border-color: transparent;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.guest-sidebar-notice__actions .guest-sidebar-notice__primary:hover,
.guest-sidebar-notice__actions .guest-sidebar-notice__primary:focus-visible {
  border-color: transparent;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  filter: brightness(0.92);
}

.guest-sidebar-notice--mobile {
  margin: 0.5rem 0.75rem;
}

.guest-sidebar-notice--mobile .guest-sidebar-notice__content strong {
  font-size: 0.9375rem;
}

.guest-sidebar-notice--mobile .guest-sidebar-notice__content small,
.guest-sidebar-notice--mobile .guest-sidebar-notice__actions a {
  font-size: 0.8125rem;
}

.guest-sidebar-notice--mobile .guest-sidebar-notice__actions a {
  min-height: 2.5rem;
  border-radius: 0.75rem;
}

.mobile-sidebar__nav.guest-sidebar-nav {
  padding-top: 0;
}

.mobile-sidebar__nav {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  align-content: start;
  gap: 0.35rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem;
  scrollbar-width: none;
}

.mobile-sidebar__nav::-webkit-scrollbar {
  display: none;
}

.mobile-sidebar__link {
  display: flex;
  min-height: 2.875rem;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  color: var(--color-text-secondary);
  padding: 0.7rem 0.85rem;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-sidebar__link-main {
  display: inline-flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.75rem;
}

.mobile-sidebar__link-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  color: var(--color-text-secondary);
}

.mobile-sidebar__link.is-active .mobile-sidebar__link-icon {
  color: var(--color-text-primary);
}

.mobile-sidebar__link:hover,
.mobile-sidebar__link:focus-visible {
  background: var(--color-tint-hover);
  color: var(--color-text-primary);
}

.mobile-sidebar__link.is-active {
  border-color: var(--color-tint-selected);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.mobile-sidebar__account {
  flex: 0 0 auto;
  padding: 0.75rem 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
}

.mobile-settings-panel {
  overflow: hidden;
  margin-bottom: 0.55rem;
  border: 1px solid var(--mobile-settings-panel-border);
  border-radius: var(--mobile-settings-panel-radius);
  background: var(--mobile-settings-panel-surface);
  box-shadow: var(--mobile-settings-panel-shadow);
}

.mobile-settings-panel__identity {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
  padding: 0.75rem;
}

.mobile-settings-panel__avatar {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--color-surface-low);
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: 800;
}

.mobile-settings-panel__item {
  display: flex;
  min-height: 2.875rem;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  border-top: 1px solid var(--mobile-settings-panel-border);
  padding: 0.75rem;
  color: var(--color-text-prose-quote);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.mobile-settings-panel__identity + .mobile-settings-panel__item {
  border-top: 0;
}

.mobile-settings-panel__identity + .mobile-settings-panel__item--with-divider {
  border-top: 1px solid var(--mobile-settings-panel-border);
}

.guest-buy-disabled-card {
  border: 0;
  background:
    linear-gradient(180deg, var(--color-tint) 0%, transparent 62%),
    var(--color-surface-active);
  box-shadow:
    0 1px 3px 0 var(--color-shadow-faint),
    inset 0 1px 0 0 var(--color-tint),
    inset 0 0 0 1px var(--color-shadow-inset),
    inset 0 -1px 0 0 var(--color-shadow-inset),
    inset 0 0 0 1px var(--color-highlight-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.admin-page-topbar--single {
  grid-template-columns: minmax(0, 1fr);
}

.mobile-settings-panel__item--with-divider {
  border-top: 1px solid var(--mobile-settings-panel-border);
}

.mobile-settings-panel__item:hover {
  background: var(--color-tint);
}

.mobile-settings-panel__item--danger {
  color: var(--color-text-prose-quote);
}

.mobile-account-trigger {
  display: flex;
  min-height: 2.75rem;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  padding: 0.625rem 0.75rem;
  color: var(--color-text-soft);
  font-size: 0.94rem;
  font-weight: 600;
  text-align: left;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-account-trigger:hover,
.mobile-account-trigger:focus-visible,
.mobile-account-trigger:active {
  background: var(--color-surface);
  color: var(--color-text-softest);
}

@media (max-width: 359px) {
  .mobile-topbar__inner {
    grid-template-columns: 2.75rem minmax(0, 1fr) minmax(2.75rem, auto);
    gap: 0.35rem;
    padding-inline: 0.75rem;
  }

  .mobile-sidebar {
    width: min(18rem, calc(100vw - 0.5rem));
    max-width: calc(100vw - 0.5rem);
  }

  .mobile-sidebar__header,
  .mobile-sidebar__account {
    padding-inline: 0.75rem;
  }
}

.support-shell {
  --support-control-height: 53.6px;
  --support-control-offset: calc(84px - var(--support-control-height));
  --support-control-gap: 0.5rem;
  --support-header-side-reserve: 123.2px;
  --support-delete-selection-bg: var(--color-tint-middle);
}

.support-main {
  height: var(--support-visible-height, 100dvh) !important;
}

@media (min-width: 1024px) {
  .support-main {
    height: 100vh !important;
  }
}

@media (max-width: 1023px) {
  html.support-user-document,
  html.support-user-document body.support-user-surface {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.support-user-surface {
    min-height: 0;
  }

  body.support-user-surface .desktop-app-frame,
  body.support-user-surface .desktop-content-shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.support-user-surface .support-main {
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.support-user-surface .support-shell {
    --support-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.support-user-surface .support-chat-header-panel {
    position: relative;
    flex: 0 0 auto;
  }

  body.support-user-surface .support-scroll-area {
    min-height: 0;
    flex: 1 1 auto;
    margin-top: -84px;
    margin-bottom: calc(
      0px - var(--support-control-offset, 32px) -
      var(--support-safe-area-bottom, 0px) -
      var(--support-composer-height, var(--support-control-height, 3rem))
    );
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: 92px !important;
    padding-bottom: calc(
      var(--support-control-offset, 32px) +
      var(--support-safe-area-bottom, 0px) +
      var(--support-composer-height, var(--support-control-height, 3rem)) +
      32px
    ) !important;
  }

  body.support-user-surface .support-input-wrap,
  body.support-user-surface .support-composer-panel {
    min-height: calc(
      var(--support-control-offset, 32px) +
      var(--support-safe-area-bottom, 0px) +
      var(--support-composer-height, var(--support-control-height, 3rem))
    );
  }

  body.support-user-surface .support-composer-panel {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
  }

  body.support-user-surface .support-composer-box {
    bottom: calc(var(--support-control-offset, 32px) + var(--support-safe-area-bottom, 0px));
  }

  body.support-user-surface .support-attachment-preview {
    bottom: calc(
      var(--support-control-offset, 32px) +
      var(--support-safe-area-bottom, 0px) +
      var(--support-composer-height, var(--support-control-height, 3rem)) +
      0.55rem
    );
  }

  body.support-user-surface .support-error-pill {
    bottom: calc(
      var(--support-control-offset, 32px) +
      var(--support-safe-area-bottom, 0px) +
      var(--support-composer-height, var(--support-control-height, 3rem)) +
      0.65rem
    );
  }

  body.support-user-surface .support-scroll-bottom-button {
    bottom: calc(
      var(--support-control-offset, 32px) +
      var(--support-safe-area-bottom, 0px) +
      var(--support-composer-height, var(--support-control-height, 3rem)) +
      0.75rem
    );
  }

  body.support-user-surface .support-scroll-bottom-button.is-shifted-for-error {
    bottom: calc(
      var(--support-control-offset, 32px) +
      var(--support-safe-area-bottom, 0px) +
      var(--support-composer-height, var(--support-control-height, 3rem)) +
      0.65rem + 2.5rem + 0.65rem
    );
  }
}

.support-empty-messages {
  align-self: stretch;
  min-height: 100%;
}

.support-empty-state-chat {
  align-self: center;
  justify-self: center;
  transform: translateY(-1.75rem);
}

.support-empty-state-chat__icon {
  width: 6rem;
  height: 6rem;
  background: transparent;
}

.support-empty-state-chat__icon svg {
  display: block;
  width: 4rem;
  height: 4rem;
}

.support-empty-state-chat__title {
  font-size: clamp(1.65rem, 1.35rem + 0.8vw, 2rem);
  line-height: 1.15;
  letter-spacing: 0;
}

.support-empty-state-chat__subtitle {
  margin: 0.85rem auto 0;
  max-width: 22rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.admin-support-workspace {
  background: var(--color-page-deep);
}

.admin-support-topbar {
  display: grid;
  grid-template-columns: minmax(360px, 410px) minmax(420px, 1fr) minmax(360px, 410px);
  align-items: stretch;
  gap: 0.875rem;
  height: var(--admin-support-topbar-height);
  min-height: var(--admin-support-topbar-height);
}

.admin-support-brand {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  height: var(--admin-support-topbar-height);
  min-height: var(--admin-support-topbar-height);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-support-divider);
  border-radius: 1rem;
  background: var(--color-surface-deepest);
  padding: 0.55rem 0.75rem;
}

.admin-support-brand-logo {
  display: block;
  width: min(11.5rem, 76%);
  height: auto;
  object-fit: contain;
}

.admin-support-search {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  height: var(--admin-support-topbar-height);
  min-height: var(--admin-support-topbar-height);
  min-width: 0;
  border: 1px solid var(--admin-support-divider);
  border-radius: 1rem;
  background: var(--color-surface-deepest);
  padding: 0.45rem;
}

.admin-support-search .admin-support-button {
  height: var(--support-control-height);
  min-height: var(--support-control-height);
  border-radius: 26px;
}

.admin-support-search .admin-support-search-field {
  height: 53.6px;
  min-height: 53.6px;
}

.admin-support-top-actions {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  height: var(--admin-support-topbar-height);
  min-height: var(--admin-support-topbar-height);
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--admin-support-divider);
  border-radius: 1rem;
  background: var(--color-surface-deepest);
  padding: 0.45rem;
  scrollbar-width: none;
}

.admin-support-top-actions::-webkit-scrollbar,
.admin-news-top-actions::-webkit-scrollbar,
.admin-stats-top-actions::-webkit-scrollbar {
  display: none;
}

.admin-support-top-actions form,
.admin-news-top-actions form,
.admin-stats-top-actions form {
  display: flex;
  flex: 0 0 auto;
}

.admin-top-action-button {
  box-sizing: border-box;
  width: var(--admin-top-action-button-width);
  min-width: var(--admin-top-action-button-width);
  height: var(--support-control-height);
  min-height: var(--support-control-height);
  flex: 0 0 auto;
  border-radius: 26px;
  padding: 0 0.55rem;
  white-space: nowrap;
}

.admin-top-action-logout {
  box-sizing: border-box;
  width: var(--support-control-height);
  min-width: var(--support-control-height);
  height: var(--support-control-height);
  min-height: var(--support-control-height);
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0;
}

.admin-top-action-logout-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.admin-news-top-actions .admin-top-action-button,
.admin-stats-top-actions .admin-top-action-button {
  height: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--admin-ui-radius-sm);
}

.admin-news-top-actions .admin-top-action-logout,
.admin-stats-top-actions .admin-top-action-logout {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--admin-ui-radius-sm);
}

.admin-support-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(360px, 1fr) minmax(280px, 340px);
  gap: 0.875rem;
  min-height: 0;
  flex: 1;
}

.admin-support-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--admin-support-divider);
  border-radius: 0.9rem;
  background: var(--color-surface-deepest);
}

.admin-support-panel-header {
  box-sizing: border-box;
  display: flex;
  height: var(--admin-support-panel-header-height);
  min-height: var(--admin-support-panel-header-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--admin-support-divider);
  background: var(--color-surface);
  padding: 0.65rem 0.8rem;
  overflow: hidden;
}

.admin-support-chat-panel .admin-support-panel-header > .flex {
  max-width: min(54%, 31rem);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.admin-support-chat-panel .admin-support-panel-header > .flex::-webkit-scrollbar {
  display: none;
}

.admin-support-chat-panel .admin-support-panel-header .admin-support-button--small {
  flex: 0 0 auto;
}

.admin-support-panel-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.admin-support-header-pill {
  display: inline-flex;
  height: 1.9rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-support-divider);
  border-radius: 999px;
  background: var(--color-control-raised);
  padding: 0 0.7rem;
  color: var(--color-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.admin-support-header-pill--positive {
  border: 0;
  background: var(--color-warning-surface-admin);
  color: var(--color-warning-admin);
}

.admin-support-header-pill--guest {
  background: var(--color-control-raised);
  color: var(--color-text-soft);
}

.admin-support-header-pill--burning {
  border-color: var(--color-border-white-strong);
  background: var(--color-control-raised);
  color: var(--color-text-soft);
}

.admin-support-header-pill--burning.is-hot {
  border-color: var(--color-warning-border-admin-strong);
  background: var(--color-warning-surface-admin);
  color: var(--color-warning-admin);
}

.guest-support-lifetime-pill {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  z-index: 2;
  display: inline-flex;
  min-height: 2.5rem;
  width: fit-content;
  max-width: min(calc(100vw - 2rem), 32rem);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--color-border-white);
  border-radius: 999px;
  background: var(--color-control-raised);
  padding: 0.55rem 1rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: auto;
}

.guest-support-lifetime-pill__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
}

.guest-support-lifetime-pill[hidden] {
  display: none;
}

.support-error-pill {
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: calc(var(--support-control-offset, 32px) + var(--support-composer-height, var(--support-control-height, 3rem)) + 0.65rem);
  left: 50%;
  z-index: 21;
  display: inline-flex;
  min-height: 2.5rem;
  width: fit-content;
  max-width: min(calc(100vw - 2rem), 32rem);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--color-danger-border-pill);
  border-radius: 999px;
  background: var(--color-danger-surface-solid-pill);
  padding: 0.55rem 1rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
  will-change: transform;
}

.support-error-pill.is-shaking {
  animation: support-error-shake calc(
      var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
    ) linear;
}

@keyframes support-error-shake {
  0% {
    transform: translateX(-50%);
    animation-timing-function: var(--shake-ease);
  }

  28.57% {
    transform: translateX(calc(-50% + var(--shake-distance)));
    animation-timing-function: var(--shake-ease);
  }

  57.14% {
    transform: translateX(calc(-50% - var(--shake-distance)));
    animation-timing-function: var(--shake-ease);
  }

  78.57% {
    transform: translateX(calc(-50% + var(--shake-overshoot)));
    animation-timing-function: var(--shake-ease);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-error-pill.is-shaking {
    animation: none !important;
    transform: translateX(-50%) !important;
  }
}

.support-error-pill__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
}

.support-error-pill[hidden] {
  display: none;
}

.support-scroll-area--empty {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.support-scroll-area--empty .support-empty-state-chat {
  transform: translateY(-1.25rem);
}

.support-scroll-area {
  padding-bottom: 116px !important;
}

@media (max-width: 1023px) {
  .guest-support-lifetime-pill,
  .support-error-pill {
    min-height: 2.5rem;
    padding: 0.55rem 0.85rem;
  }

  .guest-support-lifetime-pill {
    width: fit-content;
    max-width: calc(100vw - 2rem);
    white-space: nowrap;
  }

  .support-error-pill {
    width: max-content;
    max-width: min(calc(100vw - 2rem), 20rem);
    white-space: normal;
  }

  .guest-support-lifetime-pill > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .support-error-pill > span {
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: pre-line;
  }

  .guest-support-lifetime-pill > [data-guest-support-expiry-text] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  .support-main #support-scroll-area {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .support-main #support-scroll-area::-webkit-scrollbar {
    display: none;
  }
}

.admin-support-input {
  width: 100%;
  min-width: 0;
  height: 2.65rem;
  border: 1px solid var(--color-border-white);
  border-radius: 0.75rem;
  background: var(--color-control-raised);
  padding: 0 0.85rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  outline: none;
}

.admin-support-input:focus {
  border-color: var(--color-border-white);
}

.admin-support-button {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid var(--color-border-white);
  border-radius: 0.75rem;
  background: var(--color-control-raised);
  padding: 0 0.8rem;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 600;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.admin-support-button:hover {
  background: var(--color-avatar);
  color: var(--color-text-primary);
}

.admin-support-button--primary {
  background: var(--color-surface-inverse-accent);
  color: var(--color-text-inverse);
}

.admin-support-button--primary:hover {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.admin-support-button--danger {
  border-color: var(--color-danger-border-hover);
  background: var(--color-danger-surface-hover);
  color: var(--color-danger-text);
}

.admin-support-button--danger:hover {
  background: var(--color-danger-surface-active);
  color: var(--color-text-primary);
}

.admin-support-button--small {
  min-height: 2rem;
  border-radius: 0.65rem;
  padding: 0 0.6rem;
  font-size: 0.75rem;
}

.admin-support-button-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.admin-support-button:disabled,
.admin-support-button.is-disabled {
  cursor: default;
  opacity: 0.42;
  pointer-events: none;
}

.admin-support-filter {
  display: inline-flex;
  height: 1.9rem;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-surface-low);
  padding: 0 0.65rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.admin-support-filter:hover,
.admin-support-filter.is-active {
  background: var(--color-control-raised);
  color: var(--color-text-primary);
}

.admin-support-filter-badge {
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-danger-strong);
  color: var(--color-text-primary);
  padding: 0 0.38rem;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
}

.admin-support-filter-badge--muted {
  background: var(--color-badge-muted);
  color: var(--color-text-soft);
}

.admin-support-user-row {
  box-sizing: border-box;
  display: flex;
  min-height: 8.25rem;
  align-items: stretch;
  padding: 0.8rem;
  color: inherit;
}

.admin-support-user-list {
  border-top: 1px solid var(--admin-support-divider);
  border-bottom: 1px solid var(--admin-support-divider);
}

.admin-support-user-list .admin-support-user-row + .admin-support-user-row {
  border-top: 1px solid var(--admin-support-divider);
}

.admin-support-user-row:hover {
  background: var(--color-tint-raised);
}

.admin-support-user-row.is-active {
  background: var(--color-surface);
}

.admin-support-user-row.is-unread {
  background: var(--color-danger-strong-surface);
  box-shadow: inset 3px 0 0 var(--color-danger-strong);
}

.admin-support-user-row.is-unread:hover {
  background: var(--color-danger-strong-surface-hover);
}

.admin-support-user-row.is-unread.is-active {
  background: var(--color-danger-strong-surface-active);
}

.admin-support-user-row--guest {
  border-left: 2px solid var(--color-tint-active-strong);
}

.admin-support-user-row--guest.is-active {
  border-left-color: var(--color-text-primary);
}

.admin-support-user-row--guest.is-unread {
  border-left-color: var(--color-danger-strong);
  box-shadow: none;
}

.admin-support-user-card-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.7rem;
}

.admin-support-user-main {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1.9rem;
  align-content: space-between;
}

.admin-support-user-meta {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.55rem;
}

.admin-support-user-preview {
  display: block;
  width: 100%;
  align-self: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-user-preview-author {
  color: var(--color-text-soft);
  font-weight: 700;
}

.admin-support-user-row.is-unread .admin-support-user-preview {
  color: var(--color-text-primary);
  font-weight: 650;
}

.admin-support-user-date-pill,
.admin-support-user-pill {
  display: inline-flex;
  min-width: 0;
  height: 1.9rem;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--color-control-raised);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.admin-support-user-date-pill {
  flex: 0 0 auto;
  padding: 0 0.55rem;
}

.admin-support-user-pill {
  gap: 0.35rem;
  justify-content: center;
  padding: 0 0.6rem;
}

.admin-support-user-pill--keys {
  min-width: 1.9rem;
}

.admin-support-user-pill--payments {
  min-width: 3.7rem;
  box-shadow: 0 8px 18px var(--color-shadow-toolbar);
}

.admin-support-user-pill--guest {
  max-width: 7rem;
  border: 1px solid var(--color-border-white);
  color: var(--color-text-soft);
}

.admin-support-user-pill--burning,
.admin-support-user-pill--burning-hot {
  border: 1px solid var(--color-border-white);
  color: var(--color-text-soft);
}

.admin-support-user-pill--burning.is-hot,
.admin-support-user-pill--burning-hot {
  border-color: var(--color-warning-border-admin);
  background: var(--color-warning-surface-admin);
  color: var(--color-warning-admin);
}

.admin-support-user-pill-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.admin-support-unread {
  align-self: flex-end;
  display: inline-flex;
  min-width: 1.9rem;
  height: 1.9rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-surface-inverse-accent);
  color: var(--color-text-inverse);
  padding: 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.admin-support-chat-panel {
  position: relative;
}

.admin-support-chat-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

.admin-support-messages {
  display: grid;
  gap: 0.5rem;
  min-height: 100%;
  align-content: end;
}

.admin-support-message-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  max-width: 88%;
}

.admin-support-message-row.is-admin {
  justify-self: end;
}

.admin-support-message-row.is-user {
  justify-self: start;
}

.admin-support-delete-check {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  align-items: center;
  justify-content: center;
  align-self: end;
  cursor: pointer;
}

.admin-support-delete-check span {
  display: inline-flex;
  width: 1.45rem;
  height: 1.45rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-white-emphasis);
  border-radius: 999px;
  background: var(--color-control-raised);
  color: transparent;
  font-size: 0.75rem;
}

.admin-support-delete-check input:checked + span {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.admin-support-message-bubble {
  min-width: 0;
  overflow: hidden;
  border-radius: 1.1rem;
  padding: 0.55rem 0.75rem;
  box-shadow: 0 10px 22px var(--color-shadow-soft);
}

.admin-support-message-bubble.is-admin {
  border-bottom-right-radius: 0.35rem;
  background: var(--color-message-outgoing);
  color: var(--color-text-primary);
}

.admin-support-message-bubble.is-user {
  border-bottom-left-radius: 0.35rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.admin-support-message-bubble.is-user-deleted {
  border: 1px solid var(--color-danger-border-message);
  background: var(--color-danger-surface-message);
  color: var(--color-danger-text-soft);
}

.admin-support-message-bubble.is-user-deleted p:last-child {
  color: var(--color-danger-text-muted);
}

.admin-support-message-row.is-new .admin-support-message-bubble {
  animation: support-message-enter 220ms ease-out both;
}

.admin-support-scroll-bottom {
  position: absolute;
  right: 1rem;
  bottom: 7.25rem;
  z-index: 3;
  display: inline-flex;
  width: 2.55rem;
  height: 2.55rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-white);
  border-radius: 999px;
  background: var(--color-control-raised);
  color: var(--color-text-primary);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    background-color 160ms ease;
}

.admin-support-scroll-bottom.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.admin-support-composer {
  position: relative;
  flex: 0 0 auto;
  border-top: 1px solid var(--color-border-white);
  padding: 0.65rem 0.75rem 0.75rem;
}

.admin-support-composer-box {
  display: flex;
  min-height: var(--support-control-height);
  align-items: flex-end;
  gap: 0.5rem;
  border: 1px solid var(--color-border-white);
  border-radius: 1.65rem;
  background: var(--color-control-raised);
  padding: 0.4rem;
}

.admin-support-attachment-preview {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--color-border-white);
  border-radius: 1rem;
  background: var(--color-control-raised);
  padding: 0.45rem;
}

.admin-support-attachment-preview[hidden] {
  display: none;
}

.admin-support-user-panel-scroll {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.9rem 0.9rem 0;
}

.admin-support-section {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: 0;
}

.admin-support-section--profile {
  padding-bottom: 0.85rem;
}

.admin-support-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.9rem;
  font-size: 0.875rem;
}

.admin-support-section--divided {
  width: calc(100% + 1.8rem);
  max-width: none;
  margin-right: -0.9rem;
  margin-left: -0.9rem;
  padding-right: 0;
  padding-left: 0;
}

.admin-support-section--keys {
  border-top: 1px solid var(--admin-support-divider);
  padding-top: 0;
}

.admin-support-section--payments {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-support-section--account {
  border-top: 1px solid var(--admin-support-divider);
}

.admin-support-section--payments .admin-support-section-heading {
  border-bottom: 1px solid var(--admin-support-divider);
}

.admin-support-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.admin-support-section--divided .admin-support-section-heading {
  margin-bottom: 0;
  background: var(--color-surface);
  padding: 0.65rem 0.9rem;
}

.admin-support-section-count-pill {
  display: inline-flex;
  min-width: 1.9rem;
  height: 1.9rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-support-divider);
  border-radius: 999px;
  background: var(--color-control-raised);
  color: var(--color-text-soft);
  padding: 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-support-dl-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--admin-support-divider);
  padding-top: 0.45rem;
}

.admin-support-section .admin-support-dl-row:first-child {
  border-top: 0;
}

.admin-support-profile-grid .admin-support-dl-row {
  display: block;
  border-top: 0;
  padding-top: 0;
}

.admin-support-dl-row dt {
  color: var(--color-text-subtle);
}

.admin-support-dl-row dd {
  min-width: 0;
  color: var(--color-text-secondary-strong);
  text-align: right;
}

.admin-support-profile-grid .admin-support-dl-row dd {
  overflow: hidden;
  margin-top: 0.1rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-account-status {
  display: inline-flex;
  max-width: 100%;
  height: 1.55rem;
  align-items: center;
  border-radius: 999px;
  background: var(--color-control-raised);
  color: var(--color-text-secondary);
  padding: 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
}

.admin-support-account-status--admin {
  color: var(--color-info-text);
}

.admin-support-account-status--danger {
  background: var(--color-danger-surface-translucent-pill);
  color: var(--color-danger-text);
}

.admin-support-account-actions {
  display: grid;
  gap: 0.8rem;
  border-top: 1px solid var(--admin-support-divider);
  padding: 0.8rem 0.9rem 0.9rem;
}

.admin-support-account-form {
  display: grid;
  gap: 0.45rem;
}

.admin-support-account-label {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-support-account-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.admin-support-account-number {
  height: 2.25rem;
}

.admin-support-account-submit {
  height: 2.25rem;
}

.admin-support-account-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-support-key-list {
  margin-right: 0;
  margin-left: 0;
}

.admin-support-data-row {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  border-top: 1px solid var(--admin-support-divider);
  background: transparent;
  padding: 0.8rem 0.9rem;
}

.admin-support-data-row:hover {
  background: var(--color-tint-soft);
}

.admin-support-key-list .admin-support-data-row:last-child {
  border-bottom: 1px solid var(--admin-support-divider);
}

.admin-support-key-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-support-key-meta p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--admin-support-divider);
  border-radius: 0.75rem;
  background: transparent;
  padding: 0.35rem;
}

.admin-support-copy-field__value {
  min-width: 0;
  overflow: hidden;
  padding: 0 0.45rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-copy-field__button {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: var(--color-message-outgoing);
  color: var(--color-text-primary);
  transition:
    background-color 160ms ease,
    opacity 160ms ease;
}

.admin-support-copy-field__button:hover {
  background: var(--color-control-disabled);
}

.admin-support-copy-field__button:disabled {
  cursor: default;
  opacity: 0.4;
}

.admin-support-user-panel-scroll .overflow-x-auto {
  max-width: 100%;
}

.admin-support-payment-list {
  display: grid;
  gap: 0;
  min-width: 0;
}

.admin-support-payment-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.45rem;
  padding-top: 0.85rem;
  padding-right: 0.9rem;
  padding-bottom: 0.2rem;
  padding-left: 0.9rem;
  font-size: 0.75rem;
}

.admin-support-payment-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  border-bottom: 1px solid var(--admin-support-divider);
  padding: 0.7rem 0.9rem;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}

.admin-support-payment-row:last-child {
  border-bottom: 0;
}

.admin-support-section--divided > .admin-support-empty-inline {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
  padding: 1rem 0.9rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: left;
}

.admin-support-section--keys > .admin-support-empty-inline {
  border-top: 1px solid var(--admin-support-divider);
  border-bottom: 1px solid var(--admin-support-divider);
}

.admin-support-section--payments > .admin-support-empty-inline {
  border-bottom: 1px solid var(--admin-support-divider);
}

.admin-support-payment-main {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.admin-support-payment-date {
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-payment-note {
  overflow: hidden;
  color: var(--color-text-subtle);
  font-size: 0.75rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-payment-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.admin-support-payment-amount {
  color: var(--color-text-soft);
  font-weight: 650;
  white-space: nowrap;
}

.admin-support-payment-status-dot {
  width: 0.45rem;
  height: 0.45rem;
  align-self: center;
  border-radius: 50%;
  background: currentColor;
  color: var(--color-text-muted);
}

.admin-support-payment-status-dot--success {
  color: var(--color-success);
}

.admin-support-payment-status-dot--pending {
  color: var(--color-warning-admin);
}

.admin-support-alert {
  border: 1px solid var(--color-danger-border);
  border-radius: 0.75rem;
  background: var(--color-danger-surface);
  padding: 0.6rem 0.8rem;
  color: var(--color-danger-text);
  font-size: 0.875rem;
}

.admin-support-alert--success {
  border-color: var(--color-success-border-strong);
  background: var(--color-success-surface-medium);
  color: var(--color-success-text-soft);
}

.admin-support-empty-state,
.admin-support-empty-inline {
  border: 1px solid var(--color-border-white);
  border-radius: 0.75rem;
  background: var(--color-surface-low);
  padding: 1rem;
  color: var(--color-text-muted);
  text-align: center;
}

.admin-support-empty-state {
  align-self: center;
  justify-self: center;
  width: min(100%, 24rem);
}

@media (max-width: 1180px) {
  .admin-support-grid {
    grid-template-columns: minmax(260px, 320px) minmax(340px, 1fr) minmax(260px, 320px);
  }

  .admin-support-topbar {
    grid-template-columns: minmax(260px, 320px) minmax(340px, 1fr) minmax(260px, 320px);
  }
}

@media (max-width: 1023px) {
  .admin-support-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-support-brand {
    min-height: var(--support-control-height);
  }

  .admin-support-top-actions {
    justify-content: flex-start;
  }

  .admin-support-search {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-support-search .admin-support-button:not(.admin-support-button--primary) {
    grid-column: 1 / -1;
  }

  .admin-support-grid {
    display: grid;
    grid-template-columns: 1fr;
    overflow-y: auto;
    padding-bottom: 1rem;
  }

  .admin-support-panel {
    min-height: 34rem;
  }

  .admin-support-chat-panel {
    min-height: 42rem;
  }
}

@media (min-width: 1024px) {
  .desktop-app-frame {
    border-left: var(--app-border-width) solid var(--app-border);
    overflow: visible !important;
  }

  .desktop-sidebar-frame {
    border-right: var(--app-border-width) solid var(--app-border);
  }

  .desktop-content-shell {
    overflow: visible !important;
  }

  .app-main.lg\:overflow-y-auto {
    box-sizing: border-box;
    width: calc(100% + var(--desktop-viewport-gutter)) !important;
    padding-right: calc(1.5rem + var(--desktop-viewport-gutter)) !important;
  }

  .support-main {
    overflow: visible !important;
  }

  .support-main #support-scroll-area {
    box-sizing: border-box;
    width: calc(100% + var(--desktop-viewport-gutter)) !important;
    padding-right: calc(1.5rem + var(--desktop-viewport-gutter)) !important;
  }
}

.desktop-sidebar-logo-slot .desktop-sidebar-logo-link {
  position: absolute;
  right: 1.25rem;
  bottom: calc((var(--support-control-height) - var(--desktop-logo-height)) / 2);
  left: 1.25rem;
  height: var(--desktop-logo-height);
}

.desktop-sidebar-account-slot .desktop-account-trigger {
  position: absolute;
  right: 0.75rem;
  left: 0.75rem;
  top: calc((var(--support-control-height) - 2.75rem) / 2);
}

.desktop-sidebar-account-slot .desktop-settings-menu {
  --menu-popover-y: 0.3rem;
  bottom: calc(100% + 0.5rem);
  transform-origin: 50% 100%;
}

.desktop-settings-menu:not(.hidden),
#mobile-settings-menu:not(.hidden) {
  animation: menu-popover-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, filter, transform;
}

.desktop-settings-menu.is-closing,
#mobile-settings-menu.is-closing {
  animation: menu-popover-out 130ms ease-in both;
  pointer-events: none;
}

#mobile-settings-menu {
  --menu-popover-y: 0.3rem;
  transform-origin: 50% 100%;
}

body.theme-mono .desktop-account-avatar {
  border-radius: 0.375rem !important;
  transform: scale(1.16);
  transform-origin: center;
}

.support-attachment-preview {
  position: absolute;
  left: 0;
  bottom: calc(var(--support-control-offset, 32px) + var(--support-composer-height, var(--support-control-height, 3rem)) + 0.55rem);
  z-index: 18;
  display: flex;
  width: min(88vw, 21rem);
  min-height: 4.75rem;
  align-items: center;
  gap: 0.8rem;
  overflow: hidden;
  border: 1px solid var(--color-border-white);
  border-radius: 1.45rem;
  background: var(--color-control-raised);
  padding: 0.55rem 3rem 0.55rem 0.55rem;
  box-shadow: none;
}

.support-attachment-preview[hidden] {
  display: none;
}

.support-attachment-preview__thumb {
  position: relative;
  width: 3.65rem;
  height: 3.65rem;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--color-surface-low);
}

.support-attachment-preview__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support-attachment-preview__meta {
  min-width: 0;
  flex: 1;
}

.support-attachment-preview__name {
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-attachment-preview__status {
  margin-top: 0.15rem;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.15rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-attachment-preview__remove {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  display: inline-flex;
  width: 1.65rem;
  height: 1.65rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-tint-text-max);
  color: var(--color-text-inverse);
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.support-attachment-preview__remove:hover {
  background: var(--color-surface-inverse);
  transform: scale(1.04);
}

@media (max-width: 639px) {
  .support-attachment-preview {
    width: fit-content;
    max-width: min(74vw, 14rem);
    min-height: 2.45rem;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.32rem 2.05rem 0.32rem 0.38rem;
  }

  .support-attachment-preview__thumb {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
  }

  .support-attachment-preview__name {
    display: none;
  }

  .support-attachment-preview__status {
    margin-top: 0;
    max-width: 7.5rem;
    color: var(--color-text-secondary-strong);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
  }

  .support-attachment-preview__remove {
    top: 50%;
    right: 0.38rem;
    width: 1.35rem;
    height: 1.35rem;
    transform: translateY(-50%);
  }

  .support-attachment-preview__remove:hover {
    transform: translateY(-50%);
  }
}

.support-upload-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.2rem;
  overflow: hidden;
  border-radius: 0 0 1.45rem 1.45rem;
  background: var(--color-shadow-raised);
}

.support-upload-progress[hidden] {
  display: none;
}

.support-upload-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--color-surface-inverse-soft);
  transition: width 140ms ease;
}

.support-input-wrap {
  position: relative;
  --support-composer-height: var(--support-control-height, 3rem);
  z-index: 1;
}

.support-composer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--color-transparent), var(--color-page-deep) 45%);
}

.support-composer-box {
  position: absolute;
  right: 0;
  bottom: var(--support-control-offset, 32px);
  left: 0;
  box-sizing: border-box;
  min-height: var(--support-control-height) !important;
  border: 1px solid var(--color-border-white);
  background: var(--color-control-raised);
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
  box-shadow: none;
}

.support-composer-box:focus-within {
  border-color: var(--color-border-white);
  background: var(--color-control-raised);
  box-shadow: none;
}

.support-chat-header-panel {
  pointer-events: none;
}

.support-chat-header-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: -46px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--color-page-deep) 0%,
    var(--color-page-deep) 30%,
    var(--color-transparent) 100%
  );
}

.support-chat-header-frame {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.support-chat-header {
  position: absolute;
  bottom: 0;
  left: 50%;
  box-sizing: border-box;
  height: var(--support-control-height);
  min-height: var(--support-control-height);
  width: min(
    16rem,
    calc(100% - var(--support-header-side-reserve))
  );
  pointer-events: auto;
  border: 1px solid var(--color-border-white);
  background: var(--color-control-raised);
  box-shadow: none;
  transform: translateX(-50%);
}

.support-chat-avatar {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 9px;
  background: var(--color-surface-deepest);
  object-fit: contain;
}

.support-presence-status {
  color: var(--color-text-muted);
}

.support-presence-status.is-online {
  color: var(--color-product-boost);
}

.support-chat-side-button,
.support-chat-menu-button {
  position: absolute;
  bottom: 0;
  display: inline-flex;
  box-sizing: border-box;
  width: var(--support-control-height);
  height: var(--support-control-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-white);
  border-radius: 999px;
  background: var(--color-control-raised);
  color: var(--color-text-primary);
  box-shadow: none;
  pointer-events: auto;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.support-chat-side-button--left {
  left: 0;
}

.support-chat-menu-button {
  right: 0;
}

.support-chat-side-button:hover,
.support-chat-menu-button:hover {
  background: var(--color-avatar);
  color: var(--color-text-primary);
}

.support-chat-side-button--left .t-icon-swap,
.support-chat-menu-button .t-icon-swap {
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
}

.support-chat-side-button--left .t-icon,
.support-chat-menu-button .t-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
}

.support-chat-menu-button .support-close-delete-icon svg {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  max-width: none;
}

.support-chat-actions-menu {
  --menu-popover-y: -0.3rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 4;
  min-width: 12.5rem;
  overflow: hidden;
  border: 1px solid var(--color-border-white);
  border-radius: 1rem;
  background: var(--color-control-raised);
  box-shadow: 0 18px 44px var(--color-shadow-raised);
  pointer-events: auto;
  transform-origin: 100% 0;
}

.support-chat-actions-menu:not([hidden]) {
  animation: menu-popover-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, filter, transform;
}

.support-chat-actions-menu.is-closing {
  animation: menu-popover-out 130ms ease-in both;
  pointer-events: none;
}

.support-chat-actions-menu[hidden] {
  display: none;
}

.support-chat-actions-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-start;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.support-chat-actions-menu__item svg {
  width: 1.5rem;
  height: 1.5rem;
}

.support-chat-actions-menu__item:hover {
  background: var(--color-tint-selected-strong);
}

.support-chat-actions-menu__item--sound {
  justify-content: flex-start;
  gap: 1rem;
}

.support-sound-menu-item__main {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.support-sound-menu-item__main [data-support-sound-label] {
  min-width: 0;
}

.support-sound-menu-item__icon {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  place-items: center;
}

.support-sound-menu-item__icon .t-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
}

.support-sound-menu-item__icon svg {
  display: block;
}

.support-chat-actions-menu__item--sound:not([data-support-sound-enabled]),
.support-chat-actions-menu__item--sound[data-support-sound-enabled="true"] {
  color: var(--color-text-primary);
}

.support-delete-actions-panel {
  filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    filter 180ms ease,
    opacity 180ms ease,
    visibility 180ms ease;
}

.support-shell.is-delete-mode .support-delete-actions-panel {
  filter: blur(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.support-composer-panel {
  transition:
    filter 180ms ease,
    opacity 180ms ease;
}

.support-shell.is-delete-mode .support-composer-panel {
  filter: blur(4px);
  opacity: 0;
  pointer-events: none;
}

.support-delete-actions-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--color-transparent), var(--color-page-deep) 45%);
}

.support-delete-actions-wrap {
  position: relative;
  z-index: 1;
}

.support-delete-actions-box {
  position: absolute;
  right: 0;
  bottom: var(--support-control-offset, 32px);
  left: 0;
  display: flex;
  box-sizing: border-box;
  min-height: var(--support-control-height) !important;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--color-border-white);
  border-radius: 26px;
  background: var(--color-control-raised);
  padding: 0.3rem !important;
  box-shadow: none;
}

.support-delete-cancel,
.support-delete-submit {
  min-height: 2.625rem;
  border-radius: 999px;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: none !important;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.support-delete-cancel {
  color: var(--color-tint-text-strong);
}

.support-delete-cancel:hover {
  background: var(--color-tint-selected-strong);
  color: var(--color-text-primary);
}

.support-delete-count {
  min-width: 0;
  flex: 1;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: center;
}

.support-delete-submit {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.support-delete-submit:disabled {
  cursor: default;
  opacity: 0.42;
}

.support-delete-submit:not(:disabled):hover {
  background: var(--color-surface-inverse-soft);
  box-shadow: none !important;
}

.support-delete-checkbox-wrap {
  position: absolute;
  left: -2.75rem;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.92);
  visibility: hidden;
  transition:
    opacity 160ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 160ms ease;
}

.support-shell.is-delete-mode .support-delete-checkbox-wrap {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
  visibility: visible;
}

.support-delete-checkbox-mark {
  display: inline-flex;
  width: 1.65rem;
  height: 1.65rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-white-hover);
  border-radius: 999px;
  background: var(--color-control-raised);
  color: transparent;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.support-delete-checkbox:checked + .support-delete-checkbox-mark {
  border-color: var(--color-border-selected);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.support-shell.is-delete-mode [data-support-selectable-message] {
  cursor: pointer;
}

.support-date-separator {
  background: var(--color-message-outgoing);
}

.support-message-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: -1rem;
  bottom: 0;
  left: -1rem;
  z-index: 0;
  background: var(--support-delete-selection-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.support-message-row::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1rem;
  bottom: 0;
  left: -1rem;
  z-index: 0;
  background: var(--support-delete-selection-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}

.support-message-row.is-unread-highlight[data-support-message-sender="admin"]::after {
  opacity: 1;
}

.support-message-row:is(.is-unread-highlight, .is-unread-highlight-fading)[data-support-message-sender="admin"]:has(
  + .support-message-row:is(.is-unread-highlight, .is-unread-highlight-fading)[data-support-message-sender="admin"]
)::after {
  bottom: -0.25rem;
}

.support-message-row:is(.is-unread-highlight, .is-unread-highlight-fading)[data-support-message-sender="admin"]
  + .support-message-row:is(.is-unread-highlight, .is-unread-highlight-fading)[data-support-message-sender="admin"]::after {
  top: -0.25rem;
}

@media (min-width: 1024px) {
  .support-message-row::before,
  .support-message-row::after {
    right: -1.5rem;
    left: -1.5rem;
  }
}

.support-shell.is-delete-mode [data-support-selectable-message].is-selected::before {
  opacity: 1;
}

.support-message-content {
  z-index: 1;
}

.support-message-lane {
  position: relative;
  z-index: 1;
}

.support-message-bubble {
  --support-chat-photo-max-height: min(58vh, 32rem);
  --support-chat-photo-max-width: min(72vw, 30rem);
  transition:
    background-color 900ms ease,
    transform 160ms ease;
}

.support-message-row.is-unread-highlight[data-support-message-sender="admin"] .support-message-bubble {
  background-color: color-mix(in srgb, var(--color-surface) 93%, var(--color-text-primary) 7%) !important;
}

.support-message-row.is-new .support-message-bubble,
.admin-support-message.is-new > div:last-child {
  animation: support-message-enter 220ms ease-out both;
}

@keyframes support-message-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.support-input-wrap > p {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--support-control-offset, 32px);
}

.support-message-input {
  min-height: 2.625rem;
  max-height: 8.75rem;
  overflow-y: hidden;
  font-size: 1rem !important;
  line-height: 1.5rem;
  padding-top: 0.5625rem !important;
  padding-bottom: 0.5625rem !important;
  scrollbar-width: none;
}

.support-message-input::-webkit-scrollbar {
  display: none;
}

.support-composer-button {
  display: inline-flex;
  width: 2.625rem;
  height: 2.625rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.support-composer-button--ghost {
  cursor: pointer;
  background: transparent;
  color: var(--color-tint-text-strong);
}

.support-composer-button--ghost:hover {
  background: var(--color-tint-selected-strong);
  color: var(--color-text-primary);
  transform: none;
}

.support-composer-button--send {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: none !important;
}

.support-composer-button--send:hover {
  background: var(--color-surface-inverse-soft);
  box-shadow: none !important;
}

.support-composer-button--send:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}

.support-send-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  transition:
    opacity 150ms ease,
    transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.support-composer-button--send.is-ready .support-send-icon {
  transform: translate(-50%, -50%) rotate(-90deg) scale(1);
}

.support-photo-button {
  width: min(72vw, 520px);
  min-height: 2.75rem;
  max-width: 100%;
  cursor: pointer;
}

.support-message-bubble .support-photo-button {
  width: fit-content;
  max-width: var(--support-chat-photo-max-width);
  max-height: var(--support-chat-photo-max-height);
  background: var(--color-surface-header);
}

.news-detail-cover-button.support-photo-button {
  width: 100%;
}

.support-photo-button.is-lightbox-opening {
  cursor: crosshair;
}

.support-photo-button.is-missing,
.admin-support-photo-link.is-missing {
  cursor: default;
}

.support-photo-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(58vh, 520px);
  object-fit: cover;
}

.support-message-bubble .support-photo-image {
  width: auto;
  height: auto;
  max-width: var(--support-chat-photo-max-width);
  max-height: var(--support-chat-photo-max-height);
  object-fit: contain;
}

.support-message-bubble .support-photo-button.is-missing {
  width: min(72vw, 20rem);
}

.support-media-meta-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  background: var(--color-surface-glass);
  padding: 0.25rem 0.5rem;
  color: var(--color-tint-text);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

.support-media-meta-pill [data-support-time],
.support-media-meta-pill > span {
  color: var(--color-tint-text) !important;
}

.support-photo-button.is-missing .support-photo-image,
.admin-support-photo-link.is-missing img {
  display: none;
}

.support-photo-missing-placeholder {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.75rem 1.25rem;
  background: var(--color-message-outgoing);
  color: var(--color-tint-text-high);
  text-align: center;
}

.support-message-bubble .support-photo-missing-placeholder {
  min-height: 11rem;
  aspect-ratio: 4 / 3;
}

.support-photo-button.is-missing .support-photo-missing-placeholder,
.admin-support-photo-link.is-missing .support-photo-missing-placeholder {
  display: flex;
}

.support-photo-missing-placeholder__icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-tint-selected);
  color: var(--color-tint-text);
}

.support-photo-missing-placeholder__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25rem;
}

.support-photo-missing-placeholder__hint {
  max-width: 14rem;
  color: var(--color-tint-text-faded);
  font-size: 0.78rem;
  line-height: 1.1rem;
}

.admin-support-photo-link {
  max-width: 28rem;
}

.admin-support-photo-link .support-photo-missing-placeholder {
  border-radius: 0.75rem;
}

.support-scroll-bottom-button {
  bottom: calc(var(--support-control-offset, 32px) + var(--support-composer-height, var(--support-control-height, 3rem)) + 0.75rem);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px) scale(0.94);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    background-color 160ms ease;
}

.support-scroll-bottom-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.support-scroll-bottom-button.is-shifted-for-error {
  bottom: calc(var(--support-control-offset, 32px) + var(--support-composer-height, var(--support-control-height, 3rem)) + 0.65rem + 2.5rem + 0.65rem);
}

.support-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.support-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.support-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-backdrop-strong);
  backdrop-filter: blur(12px);
}

.support-lightbox__stage {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  max-width: min(94vw, 1100px);
  max-height: 92vh;
  padding: 1rem;
  transform: scale(0.96) translateY(10px);
  transition: transform 180ms ease;
}

.support-lightbox.is-open .support-lightbox__stage {
  transform: scale(1) translateY(0);
}

.support-lightbox__image-frame {
  position: relative;
  max-width: min(92vw, 1040px);
  max-height: 82vh;
  overflow: hidden;
  border-radius: 18px;
  background: var(--color-surface-deepest);
  box-shadow: 0 24px 80px var(--color-shadow-modal);
  line-height: 0;
}

.support-lightbox__image {
  display: block;
  max-width: min(92vw, 1040px);
  max-height: 82vh;
  object-fit: contain;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 0 0;
  transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  will-change: transform;
  -webkit-user-drag: none;
}

.support-lightbox__image-frame.is-panning .support-lightbox__image {
  transition: none;
}

.support-lightbox__actions {
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}

.support-lightbox__action {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-white-emphasis);
  border-radius: 999px;
  background: var(--color-tint-control-hover);
  color: var(--color-text-primary);
  backdrop-filter: blur(10px);
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.support-lightbox__action:hover {
  background: var(--color-border-white-emphasis);
}

.support-lightbox__caption {
  min-height: 1rem;
  max-width: min(84vw, 720px);
  color: var(--color-tint-text-medium);
  font-size: 0.8125rem;
  text-align: center;
}

body.support-lightbox-open {
  overflow: hidden;
}

body.support-lightbox-crosshair-cursor {
  cursor: crosshair;
}

body.support-lightbox-crosshair-cursor .support-lightbox,
body.support-lightbox-crosshair-cursor .support-lightbox__backdrop,
body.support-lightbox-crosshair-cursor .support-lightbox__stage,
body.support-lightbox-crosshair-cursor .support-lightbox__image-frame,
body.support-lightbox-crosshair-cursor .support-lightbox__image {
  cursor: crosshair;
}

body.support-lightbox-crosshair-cursor .support-lightbox__action {
  cursor: pointer;
}

@media (max-width: 1023px) {
  .support-lightbox__actions {
    right: 0.75rem;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .support-lightbox__image-frame {
    cursor: crosshair;
  }

  .support-lightbox__image-frame.is-zoomed {
    cursor: crosshair;
  }
}

.support-unread-badge {
  display: inline-flex;
  width: 1.4rem;
  min-width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 1.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-admin-notification);
  color: var(--color-admin-notification-text);
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform: translateY(0);
}

.admin-surface header {
  border-bottom-color: var(--admin-ui-border) !important;
  background-color: var(--admin-ui-bg) !important;
}

.admin-surface header a[class~="rounded-md"],
.admin-surface header button[class~="rounded-md"],
.admin-surface header span[class~="rounded-md"] {
  min-height: 2.5rem;
  border-width: 1px !important;
  border-color: transparent !important;
  border-radius: var(--admin-ui-radius-sm) !important;
  box-shadow: var(--admin-ui-inner-outline);
}

.admin-surface header a[class~="rounded-md"],
.admin-surface header button[class~="rounded-md"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--admin-ui-control) !important;
  padding-inline: 0.8rem;
  color: var(--color-text-secondary-strong) !important;
}

.admin-surface header a[class~="rounded-md"]:hover,
.admin-surface header button[class~="rounded-md"]:hover {
  background-color: var(--admin-ui-control-hover) !important;
  color: var(--color-text-primary) !important;
}

body.theme-mono.support-surface {
  --support-layout-bg: var(--color-page);
  --support-sidebar-surface: var(--color-surface);
  --support-sidebar-control: var(--color-control);
  --support-sidebar-control-hover: var(--color-surface-raised);
  --support-layout-border: var(--color-border);
  --app-border: var(--support-layout-border);
  --app-border-width: 1px;
  background-color: var(--support-layout-bg) !important;
}

.support-surface .desktop-app-frame,
.support-surface .desktop-content-shell,
.support-surface .app-main,
.support-surface .support-shell,
.support-surface .desktop-sidebar-frame {
  background-color: var(--support-layout-bg) !important;
}

.support-surface .desktop-sidebar-frame {
  border-right-color: var(--support-layout-border) !important;
}

.support-surface .desktop-sidebar-frame nav > a {
  border-radius: 10px;
}

.support-surface .desktop-sidebar-account-slot .desktop-settings-menu {
  border-width: 1px !important;
  border-color: var(--support-layout-border) !important;
  background-color: var(--support-sidebar-surface) !important;
}

/* Keep the shared guest sidebar independent from page-specific surface layers. */
body.guest-surface {
  --guest-sidebar-control-radius: 10px;
  --guest-sidebar-menu-radius: 24px;
}

body.guest-surface .desktop-sidebar-frame .guest-sidebar-nav > a,
body.guest-surface .desktop-sidebar-account-slot .desktop-account-trigger {
  border-radius: var(--guest-sidebar-control-radius) !important;
}

body.guest-surface .desktop-sidebar-frame a:focus-visible,
body.guest-surface .desktop-sidebar-frame button:focus-visible,
body.guest-surface #mobile-sidebar a:focus-visible,
body.guest-surface #mobile-sidebar button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

body.guest-surface .desktop-sidebar-account-slot .desktop-settings-menu,
body.guest-surface #mobile-settings-menu {
  border-color: var(--color-border) !important;
  border-radius: var(--guest-sidebar-menu-radius) !important;
  background-color: var(--color-surface-active) !important;
  box-shadow: 0 1px 3px 0 var(--color-shadow-faint) !important;
}

body.guest-surface .desktop-settings-menu .border-t,
body.guest-surface #mobile-settings-menu .border-t,
body.guest-surface .mobile-settings-panel__item--with-divider {
  border-top-color: var(--color-border) !important;
}

.support-surface .support-chat-header-panel::before {
  content: "";
  display: block;
  bottom: -46px;
  background: linear-gradient(
    to bottom,
    var(--support-layout-bg) 0%,
    var(--support-layout-bg) 30%,
    var(--color-transparent) 100%
  );
}

.support-surface .support-composer-panel::before,
.support-surface .support-delete-actions-panel::before {
  background: linear-gradient(to bottom, var(--color-transparent), var(--support-layout-bg) 45%);
}

.theme-mono .border {
  border-width: 2px !important;
}

.theme-mono .border-x {
  border-left-width: 2px !important;
  border-right-width: 2px !important;
}

.theme-mono .border-y {
  border-top-width: 2px !important;
  border-bottom-width: 2px !important;
}

.theme-mono .border-t {
  border-top-width: 2px !important;
}

.theme-mono .desktop-settings-menu .border-t,
.theme-mono #mobile-settings-menu .border-t {
  border-top-width: 1px !important;
}

.theme-mono .border-r {
  border-right-width: 2px !important;
}

.theme-mono .border-b {
  border-bottom-width: 2px !important;
}

.theme-mono .border-l {
  border-left-width: 2px !important;
}

.theme-mono .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 2px !important;
}

@media (min-width: 1024px) {
  .theme-mono .lg\:border-x {
    border-left-width: 2px !important;
    border-right-width: 2px !important;
  }
}

.prose-news {
  color: var(--color-prose);
  line-height: 1.75;
}

.prose-news h1,
.prose-news h2,
.prose-news h3,
.prose-news h4 {
  color: var(--color-text-primary);
  font-weight: 700;
  margin: 1.4em 0 0.6em;
}

.prose-news h1 {
  font-size: 1.875rem;
}

.prose-news h2 {
  font-size: 1.5rem;
}

.prose-news h3 {
  font-size: 1.25rem;
}

.prose-news p,
.prose-news ul,
.prose-news ol,
.prose-news blockquote,
.prose-news pre {
  margin: 1em 0;
}

.prose-news ul,
.prose-news ol {
  padding-left: 1.5rem;
}

.prose-news ul {
  list-style: disc;
}

.prose-news ol {
  list-style: decimal;
}

.prose-news a {
  color: var(--color-text-soft);
  text-decoration: underline;
  text-decoration-color: var(--color-tint-decoration);
  text-underline-offset: 0.2em;
}

.prose-news blockquote {
  border-left: 3px solid var(--color-tint-border-focus);
  color: var(--color-prose-quote);
  padding-left: 1rem;
}

.prose-news code {
  background: var(--color-surface-deepest);
  border: 1px solid var(--color-border-white-emphasis);
  border-radius: 0.25rem;
  color: var(--color-text-soft);
  padding: 0.1rem 0.25rem;
}

.prose-news pre {
  background: var(--color-surface-deepest);
  border: 1px solid var(--color-border-white-emphasis);
  border-radius: 0.5rem;
  overflow-x: auto;
  padding: 1rem;
}

.prose-news pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

.user-surface .prose-news.news-detail-prose {
  color: var(--color-text-secondary);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.user-surface .prose-news.news-detail-prose * {
  max-width: 100%;
  min-width: 0;
}

.user-surface .prose-news.news-detail-prose > :first-child {
  margin-top: 0;
}

.user-surface .prose-news.news-detail-prose > :last-child {
  margin-bottom: 0;
}

.user-surface .prose-news.news-detail-prose h1,
.user-surface .prose-news.news-detail-prose h2,
.user-surface .prose-news.news-detail-prose h3,
.user-surface .prose-news.news-detail-prose h4 {
  color: var(--color-text-primary);
}

.user-surface .prose-news.news-detail-prose p,
.user-surface .prose-news.news-detail-prose ul,
.user-surface .prose-news.news-detail-prose ol,
.user-surface .prose-news.news-detail-prose li {
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.user-surface .prose-news.news-detail-prose p {
  font-size: 1rem;
  line-height: 1.72;
}

.user-surface .prose-news.news-detail-prose strong {
  color: var(--color-text-soft);
}

.user-surface .prose-news.news-detail-prose a {
  color: var(--color-text-soft);
  overflow-wrap: anywhere;
  text-decoration-color: var(--color-prose-decoration);
}

.user-surface .prose-news.news-detail-prose blockquote {
  border-left-color: var(--color-divider-prose);
  color: var(--color-text-secondary);
}

.user-surface .prose-news.news-detail-prose code,
.user-surface .prose-news.news-detail-prose pre {
  border-color: var(--color-prose-border);
  background: var(--color-surface-deeper);
  color: var(--color-text-secondary-strong);
}

.user-surface .prose-news.news-detail-prose hr {
  border-color: var(--color-prose-border-soft);
}

.user-surface .prose-news.news-detail-prose img {
  width: 100%;
  border: 1px solid var(--color-border-white);
  border-radius: var(--buy-radius-sm);
  margin: 1.25rem 0;
}

@media (max-width: 640px) {
  .user-surface .prose-news.news-detail-prose p {
    line-height: 1.68;
  }
}

/* Refined controls and card interiors for editorial admin screens. */
.admin-news-field-group {
  gap: 0.5rem;
}

.admin-news-field-group > span:first-child {
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body .admin-news-input,
body .admin-news-textarea {
  border: 1px solid var(--admin-ui-border);
  border-radius: 0.7rem;
  background: var(--admin-ui-surface);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.03);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body .admin-news-input:hover,
body .admin-news-textarea:hover {
  border-color: var(--admin-ui-control-hover);
  background: var(--admin-ui-control);
}

body .admin-news-input:focus,
body .admin-news-textarea:focus {
  border-color: var(--color-highlight-strong);
  background: var(--admin-ui-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-highlight-strong) 18%, transparent);
}

body select.admin-news-input {
  cursor: pointer;
}

.admin-news-media-dropzone {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  min-height: 6.5rem;
  overflow: hidden;
  border: 1px dashed var(--admin-ui-border);
  border-radius: 0.8rem;
  background: var(--admin-ui-bg);
  padding: 1rem;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.admin-news-media-dropzone:hover {
  border-color: var(--color-highlight-strong);
  background: var(--admin-ui-control);
}

.admin-news-media-dropzone.is-selected {
  border-style: solid;
  border-color: var(--color-success-border-strong);
  background: var(--color-success-surface-soft);
}

.admin-news-media-dropzone.is-selected .admin-news-media-icon {
  background: var(--color-success-surface-strong);
  color: var(--color-success-text-soft);
}

.admin-news-media-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-news-media-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--admin-ui-control-hover);
  color: var(--color-text-primary);
  font-size: 1.4rem;
  font-weight: 400;
}

.admin-news-media-icon.material-symbols-outlined,
body .admin-news-post-thumb--empty.material-symbols-outlined {
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

.admin-news-media-copy {
  display: grid;
  gap: 0.2rem;
}

.admin-news-media-copy strong {
  color: var(--color-text-primary);
  font-size: 0.9rem;
}

.admin-news-media-copy small {
  color: var(--color-text-subtle);
  font-size: 0.75rem;
}

body .admin-news-media-dropzone .admin-news-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.admin-news-cover-preview {
  border-radius: 0.8rem;
  padding: 0.35rem;
}

.admin-news-cover-preview img {
  border-radius: 0.55rem;
}

body .admin-promocode-editor-row {
  gap: 1.25rem;
  border-radius: 0.9rem;
  padding: 1.15rem;
}

.admin-promocode-editor-head {
  border-bottom: 1px solid var(--admin-ui-border);
  padding-bottom: 1rem;
}

.admin-promocode-editor-head h3 {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.admin-promocode-row-stats {
  gap: 0.7rem;
}

body .admin-promocode-row-stats div {
  border: 0;
  border-radius: 0.7rem;
  background: var(--admin-ui-bg);
  padding: 0.75rem;
}

.admin-promocode-row-stats dt {
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-promocode-row-stats dd {
  margin-top: 0.35rem;
  font-size: 1rem;
}

.admin-promocode-inline-form {
  gap: 0.9rem;
  border-radius: 0.8rem;
  background: var(--admin-ui-bg);
  padding: 1rem;
}

body .admin-promocode-inline-form .admin-news-input,
body .admin-promocode-create-panel .admin-news-input {
  border-color: var(--admin-ui-border);
  background: var(--admin-ui-surface);
}

body .admin-promocode-switch,
body .admin-promocode-create-panel .admin-news-switch {
  border-color: var(--admin-ui-border);
  border-radius: 0.7rem;
  background: var(--admin-ui-surface);
}

.admin-promocode-card-actions {
  border-top: 0;
  border-radius: 0.8rem;
  background: var(--admin-ui-bg);
  padding: 0.75rem;
}

.admin-promocode-create-panel .admin-news-editor-form > .admin-news-button--primary {
  width: 100%;
  min-height: 2.75rem;
}

/* Clean editorial layout for news and promocodes. */
@media (min-width: 1024px) {
  .admin-news-grid {
    grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .admin-news-grid > .admin-news-preview-panel,
  .admin-news-grid > .admin-news-editor-panel {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .admin-news-grid > #admin-news-info-panel,
  .admin-news-grid > #admin-news-settings-panel {
    grid-column: 1;
  }

  .admin-news-grid > #admin-news-info-panel {
    max-height: 23rem;
  }

  .admin-promocode-grid {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .admin-promocode-list-panel {
    grid-column: 1 / -1;
    max-height: 10.5rem;
  }

  .admin-promocode-list-panel .admin-promocode-list {
    display: grid;
    grid-auto-columns: minmax(15rem, 19rem);
    grid-auto-flow: column;
    overflow-x: auto;
    border: 0;
    padding: 0.65rem;
  }

  .admin-promocode-list-panel .admin-promocode-list-row {
    min-height: 4.2rem;
    border: 1px solid var(--admin-ui-border);
    border-radius: var(--admin-ui-radius-sm);
  }

  .admin-promocode-list-panel .admin-promocode-list-row + .admin-promocode-list-row {
    margin-left: 0.55rem;
  }
}

.admin-news-panel {
  border-color: var(--admin-ui-border);
  box-shadow: none;
}

.admin-news-panel-header {
  background: var(--admin-ui-surface);
  padding-inline: 1rem;
}

.admin-news-post-list {
  border: 0;
  padding: 0.5rem;
}

.admin-news-post-row,
.admin-news-new-row {
  min-height: 5.75rem;
  border-radius: var(--admin-ui-radius-sm);
  padding: 0.65rem;
}

.admin-news-post-list .admin-news-post-row + .admin-news-post-row {
  border-top: 0;
  margin-top: 0.25rem;
}

.admin-news-post-row.is-active {
  background: var(--admin-ui-control-hover);
  box-shadow: inset 3px 0 0 var(--color-highlight-strong);
}

.admin-news-post-thumb {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: var(--admin-ui-radius-sm);
}

.admin-news-article-scroll,
.admin-news-editor-scroll,
.admin-news-info-scroll {
  padding: 1.1rem;
}

.admin-news-input,
.admin-news-file-input,
.admin-news-textarea,
.admin-news-switch {
  border-color: var(--admin-ui-border);
  background: var(--admin-ui-bg);
}

.admin-promocode-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.admin-promocode-overview > div {
  min-width: 0;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface);
  padding: 0.75rem 0.9rem;
}

.admin-promocode-overview dt {
  color: var(--color-text-subtle);
  font-size: 0.72rem;
}

.admin-promocode-overview dd {
  margin-top: 0.2rem;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 1.05rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-promocode-editor-row {
  border-color: var(--admin-ui-border);
  background: var(--admin-ui-surface);
  box-shadow: none;
}

.admin-promocode-row-stats div {
  background: var(--admin-ui-bg);
}

@media (max-width: 1023px) {
  .admin-promocode-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-promocode-overview > div:last-child {
    grid-column: 1 / -1;
  }
}

/* Admin support workspace refinements. Kept at the end to override the earlier workspace defaults. */
.admin-support-input {
  height: var(--support-control-height);
  border-radius: 26px;
  background: var(--color-control-raised);
  padding: 0 1rem;
  font-size: 0.9375rem;
  outline: none;
  box-shadow: none;
}

.admin-support-input:focus,
.admin-support-input:focus-visible {
  border-color: var(--color-border-white);
  background: var(--color-control-raised);
  outline: none;
  box-shadow: none;
}

.admin-support-input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}

.admin-support-inline-search {
  display: block;
  min-width: 0;
}

.admin-support-search-field {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: var(--support-control-height);
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--color-border-white);
  border-radius: 26px;
  background: var(--color-control-raised);
  padding: 0.4rem;
  padding-left: 1rem;
  box-shadow: 0 14px 36px var(--color-shadow-card);
}

.admin-support-search-field:focus-within {
  border-color: var(--color-border-white);
  background: var(--color-control-raised);
  box-shadow: 0 14px 36px var(--color-shadow-card);
}

.admin-support-search-input.admin-support-input {
  min-height: 2.5rem;
  flex: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--color-text-primary);
  font-size: 15px;
  line-height: 1.5rem;
  box-shadow: none;
}

.admin-support-search-input.admin-support-input:focus,
.admin-support-search-input.admin-support-input:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-support-search-input::-webkit-search-cancel-button,
.admin-support-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.admin-support-search-input::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

.admin-support-inline-search .admin-support-search-field {
  height: var(--support-control-height);
  min-height: var(--support-control-height);
  padding: 0.4rem;
  padding-left: 1rem;
}

.admin-support-inline-search .admin-support-search-input.admin-support-input {
  min-height: 2.5rem;
}

.admin-support-inline-search .admin-support-search-submit {
  width: 2.5rem;
  height: 2.5rem;
}

.admin-support-search-submit {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: none;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.admin-support-search-submit:hover {
  background: var(--color-surface-inverse-soft);
  color: var(--color-text-inverse);
  box-shadow: none;
}

.admin-support-search-submit:focus-visible {
  outline: 2px solid var(--color-tint-border-focus);
  outline-offset: 2px;
}

.admin-support-search-submit-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.admin-support-unread {
  min-width: 1.9rem;
  height: 1.9rem;
  border: 0;
  background: var(--color-danger-strong);
  color: var(--color-text-primary);
  padding: 0 0.55rem;
  font-size: 0.75rem;
  box-shadow: none;
}

.admin-support-message-row {
  display: block;
  width: 100%;
  max-width: none;
}

.admin-support-message-row::before {
  content: "";
  position: absolute;
  top: -0.15rem;
  right: -0.75rem;
  bottom: -0.15rem;
  left: -0.75rem;
  z-index: 0;
  background: var(--color-border-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.admin-support-chat-panel.is-delete-mode [data-admin-support-selectable-message] {
  cursor: pointer;
}

.admin-support-chat-panel.is-delete-mode [data-admin-support-selectable-message].is-selected::before {
  opacity: 1;
}

.admin-support-message-lane {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
}

.admin-support-message-content {
  position: relative;
  display: flex;
  max-width: min(88%, 44rem);
  align-items: center;
}

.admin-support-message-row.is-admin .admin-support-message-lane {
  justify-content: flex-end;
}

.admin-support-message-row.is-user .admin-support-message-lane {
  justify-content: flex-start;
}

.admin-support-chat-panel.is-delete-mode .admin-support-message-row.is-admin .admin-support-message-content {
  margin-left: 2.75rem;
}

.admin-support-chat-panel.is-delete-mode .admin-support-message-row.is-user .admin-support-message-content {
  margin-right: 2.75rem;
}

.admin-support-delete-check {
  display: none;
}

.admin-support-delete-checkbox-wrap {
  position: absolute;
  left: -2.75rem;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.92);
  visibility: hidden;
  transition:
    opacity 160ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 160ms ease;
}

.admin-support-message-row.is-user .admin-support-delete-checkbox-wrap {
  right: -2.75rem;
  left: auto;
}

.admin-support-chat-panel.is-delete-mode .admin-support-delete-checkbox-wrap {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
  visibility: visible;
}

.admin-support-delete-checkbox-mark {
  display: inline-flex;
  width: 1.65rem;
  height: 1.65rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-white-hover);
  border-radius: 999px;
  background: var(--color-control-raised);
  color: transparent;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.admin-support-delete-checkbox:checked + .admin-support-delete-checkbox-mark {
  border-color: var(--color-border-selected);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.admin-support-composer {
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-support-chat-panel.is-delete-mode .admin-support-composer {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.985);
}

.admin-support-composer .support-composer-box.admin-support-composer-box {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  display: flex;
  min-height: var(--support-control-height);
  border: 1px solid var(--color-border-white);
  border-radius: 26px;
  background: var(--color-control-raised);
  box-shadow: 0 14px 36px var(--color-shadow-card);
}

.admin-support-composer .support-composer-box.admin-support-composer-box:focus-within {
  border-color: var(--color-border-white);
  background: var(--color-control-raised);
  box-shadow: 0 14px 36px var(--color-shadow-card);
}

.admin-support-composer .support-attachment-preview.admin-support-attachment-preview {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(100%, 21rem);
  margin-bottom: 0.55rem;
}

.admin-support-delete-actions-panel {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.985);
  visibility: hidden;
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 180ms ease;
}

.admin-support-chat-panel.is-delete-mode .admin-support-delete-actions-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.admin-support-delete-actions-box {
  display: flex;
  box-sizing: border-box;
  min-height: var(--support-control-height) !important;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--color-border-white);
  border-radius: 26px;
  background: var(--color-control-raised);
  padding: 0.3rem !important;
  box-shadow: none;
}

.admin-support-delete-cancel,
.admin-support-delete-submit {
  min-height: 2.625rem;
  border-radius: 999px;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: none !important;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.admin-support-delete-cancel {
  color: var(--color-tint-text-strong);
}

.admin-support-delete-cancel:hover {
  background: var(--color-tint-selected-strong);
  color: var(--color-text-primary);
}

.admin-support-delete-count {
  min-width: 0;
  flex: 1;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: center;
}

.admin-support-delete-submit {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.admin-support-delete-submit:disabled {
  cursor: default;
  opacity: 0.42;
}

.admin-support-chat-panel .support-scroll-bottom-button.admin-support-scroll-bottom {
  right: auto;
  bottom: 7.25rem;
  left: 50%;
  width: 3rem;
  height: 3rem;
  border: 0;
  background: var(--color-tint-control);
  box-shadow: 0 10px 15px -3px var(--color-shadow-medium), 0 4px 6px -4px var(--color-shadow-medium);
  backdrop-filter: blur(12px);
  transform: translate(-50%, 12px) scale(0.94);
}

.admin-support-chat-panel .support-scroll-bottom-button.admin-support-scroll-bottom:hover {
  background: var(--color-tint-active);
}

.admin-support-chat-panel .support-scroll-bottom-button.admin-support-scroll-bottom.is-visible {
  transform: translate(-50%, 0) scale(1);
}

.admin-login-workspace {
  display: grid;
  min-height: 0;
  height: 100%;
  place-items: center;
  background: var(--admin-ui-bg);
}

.admin-login-stack {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 25rem);
  min-width: 0;
  align-self: center;
  justify-self: center;
}

.admin-login-panel {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--admin-ui-radius-lg);
  background: var(--admin-ui-surface);
  padding: 1.1rem;
  box-shadow: var(--admin-ui-card-shadow);
}

.admin-login-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--admin-ui-radius-lg);
  background: var(--admin-ui-surface);
  padding: 1.25rem 1rem;
  box-shadow: var(--admin-ui-card-shadow);
}

.admin-login-logo {
  display: block;
  width: min(15rem, 82%);
  height: auto;
  object-fit: contain;
}

.admin-login-input {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface-muted);
  color: var(--color-text-primary);
  padding: 0 1rem;
  font-size: 0.9375rem;
  outline: none !important;
  box-shadow: var(--admin-ui-inner-outline);
  -webkit-tap-highlight-color: transparent;
}

.admin-login-input::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

.admin-login-input:focus,
.admin-login-input:focus-visible {
  outline: none !important;
  border-color: transparent;
  background: var(--admin-ui-surface-muted);
  box-shadow: inset 0 0 0 1px var(--color-highlight-strong);
}

.admin-login-input:-webkit-autofill,
.admin-login-input:-webkit-autofill:hover,
.admin-login-input:-webkit-autofill:focus {
  border-color: transparent;
  -webkit-text-fill-color: var(--color-text-primary);
  box-shadow:
    0 0 0 1000px var(--admin-ui-surface-muted) inset,
    var(--admin-ui-inner-outline);
  transition: background-color 9999s ease-in-out 0s;
}

.admin-login-submit {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  border-radius: var(--admin-ui-radius);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding: 0 1rem;
  font-size: 0.9375rem;
  font-weight: 800;
  box-shadow: none;
  filter: none;
  transition: transform 140ms ease;
  -webkit-tap-highlight-color: transparent;
}

.admin-login-submit:hover {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: none;
  filter: none;
  opacity: 1;
  transform: translateY(-1px);
}

.admin-login-submit:focus,
.admin-login-submit:focus-visible {
  outline: none;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: none;
  filter: none;
}

.admin-login-submit:active {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  transform: translateY(0);
}

.admin-login-submit-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.admin-login-alert {
  border: 1px solid var(--color-danger-border);
  border-radius: var(--admin-ui-radius);
  background: var(--color-danger-surface);
  padding: 0.6rem 0.8rem;
  color: var(--color-danger-text);
  font-size: 0.875rem;
}

@media (max-width: 1023px) {
  .admin-login-workspace {
    place-items: center;
  }
}

.admin-news-workspace {
  background: var(--admin-ui-bg);
}

.admin-news-topbar,
.admin-news-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(360px, 1fr) minmax(280px, 340px);
  gap: 0.875rem;
}

.admin-news-topbar {
  align-items: stretch;
  height: var(--admin-support-topbar-height);
  min-height: var(--admin-support-topbar-height);
}

.admin-news-grid {
  min-height: 0;
  flex: 1;
}

.admin-news-brand,
.admin-news-titlebar,
.admin-news-top-actions,
.admin-news-panel {
  border: 1px solid transparent;
  background: var(--admin-ui-surface);
  box-shadow: var(--admin-ui-card-shadow);
}

.admin-news-brand,
.admin-news-titlebar,
.admin-news-top-actions {
  box-sizing: border-box;
  height: var(--admin-support-topbar-height);
  min-height: var(--admin-support-topbar-height);
  border-radius: var(--admin-ui-radius);
  padding: 0.45rem;
}

.admin-news-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.75rem;
}

.admin-news-brand-logo {
  display: block;
  width: min(11.5rem, 76%);
  height: auto;
  object-fit: contain;
}

.admin-news-titlebar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
}

.admin-news-top-actions {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.admin-news-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--admin-ui-radius);
}

.admin-news-panel-header {
  box-sizing: border-box;
  display: flex;
  height: var(--admin-support-panel-header-height);
  min-height: var(--admin-support-panel-header-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--admin-ui-border);
  background: var(--admin-ui-surface-muted);
  padding: 0.65rem 0.8rem;
  overflow: hidden;
}

.admin-news-panel-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.admin-news-button {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius-sm);
  background: var(--admin-ui-control);
  padding: 0 0.8rem;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 600;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.admin-news-button:hover {
  background: var(--admin-ui-control-hover);
  color: var(--color-text-primary);
}

.admin-news-button--primary {
  background: var(--color-surface-inverse-accent);
  color: var(--color-text-inverse);
}

.admin-news-button--primary:hover {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.admin-news-button--small {
  min-height: 2rem;
  border-radius: var(--admin-ui-radius-sm);
  padding: 0 0.6rem;
  font-size: 0.75rem;
}

.admin-news-header-pill,
.admin-news-section-count-pill,
.admin-news-inline-pill {
  display: inline-flex;
  height: 1.9rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-ui-border);
  border-radius: 999px;
  background: var(--admin-ui-control);
  color: var(--color-text-soft);
  padding: 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.admin-news-post-list {
  border-top: 1px solid var(--admin-ui-border);
  border-bottom: 1px solid var(--admin-ui-border);
}

.admin-news-post-row,
.admin-news-new-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.75rem;
  min-height: 7rem;
  align-items: center;
  padding: 0.8rem;
  color: inherit;
}

.admin-news-post-list .admin-news-post-row + .admin-news-post-row {
  border-top: 1px solid var(--admin-ui-border);
}

.admin-news-new-row {
  border-bottom: 1px solid var(--admin-ui-border);
  background: var(--admin-ui-surface-muted);
}

.admin-news-post-row:hover {
  background: var(--color-tint-raised);
}

.admin-news-post-row.is-active {
  background: var(--admin-ui-surface-muted);
}

.admin-news-post-thumb {
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface-muted);
  object-fit: cover;
}

.admin-news-post-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  font-size: 1rem;
  font-weight: 800;
}

.admin-news-post-main {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
}

.admin-news-post-excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-news-post-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--color-text-subtle);
  font-size: 0.75rem;
}

.admin-news-article-scroll,
.admin-news-editor-scroll,
.admin-news-info-scroll {
  padding: 0.9rem;
}

.admin-news-article {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.admin-news-article-cover {
  display: block;
  width: 100%;
  max-height: 24rem;
  border-radius: var(--admin-ui-radius);
  object-fit: cover;
}

.admin-news-article-head {
  display: grid;
  gap: 0.45rem;
}

.admin-news-article-head h2 {
  color: var(--color-text-primary);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.admin-news-article-head p {
  color: var(--color-text-subtle);
  font-size: 0.8125rem;
}

.admin-news-article-body {
  border-top: 1px solid var(--admin-ui-border);
  padding-top: 1rem;
}

.admin-news-editor-form {
  display: grid;
  gap: 1rem;
}

.admin-news-field-group {
  display: grid;
  min-width: 0;
  gap: 0.45rem;
}

.admin-news-field-group > span {
  color: var(--color-text-secondary-strong);
  font-size: 0.875rem;
  font-weight: 650;
}

.admin-news-input,
.admin-news-file-input,
.admin-news-textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface-muted);
  color: var(--color-text-primary);
  outline: none;
}

.admin-news-input,
.admin-news-file-input {
  min-height: 2.75rem;
  padding: 0 0.9rem;
  font-size: 0.9375rem;
}

.admin-news-file-input {
  padding: 0.55rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.admin-news-file-input::file-selector-button {
  margin-right: 0.75rem;
  min-height: 2.35rem;
  border: 0;
  border-radius: var(--admin-ui-radius);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding: 0 0.9rem;
  font-weight: 700;
}

.admin-news-input:focus,
.admin-news-file-input:focus,
.admin-news-textarea:focus {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-highlight-strong);
}

.admin-news-textarea {
  min-height: 24rem;
  resize: vertical;
  padding: 0.85rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.55;
}

.admin-news-cover-preview {
  overflow: hidden;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface-muted);
}

.admin-news-cover-preview img {
  display: block;
  width: 100%;
  max-height: 20rem;
  object-fit: cover;
}

.admin-news-section {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding-bottom: 0.9rem;
}

.admin-news-section--divided {
  width: calc(100% + 1.8rem);
  margin-right: -0.9rem;
  margin-left: -0.9rem;
  border-top: 1px solid var(--admin-support-divider);
  padding: 0.85rem 0.9rem 0.9rem;
}

.admin-news-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-news-stats {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--admin-ui-border);
}

.admin-news-stats div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--admin-ui-border);
  padding: 0.7rem 0;
}

.admin-news-stats dt {
  color: var(--color-text-subtle);
  font-size: 0.875rem;
}

.admin-news-stats dd {
  color: var(--color-text-soft);
  font-size: 0.95rem;
  font-weight: 800;
}

.admin-news-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface-muted);
  padding: 0.75rem;
  cursor: pointer;
}

.admin-news-switch__control {
  position: relative;
  width: 2.75rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--admin-ui-control-hover);
  transition: background-color 160ms ease;
}

.admin-news-switch__control::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: var(--color-text-muted);
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.admin-news-switch input:checked + .admin-news-switch__control {
  background: var(--color-surface-inverse);
}

.admin-news-switch input:checked + .admin-news-switch__control::after {
  background: var(--color-surface-deepest);
  transform: translateX(1.2rem);
}

.admin-news-switch__text {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.admin-news-switch__text strong {
  color: var(--color-text-primary);
  font-size: 0.9rem;
}

.admin-news-switch__text small {
  color: var(--color-text-subtle);
  font-size: 0.75rem;
  line-height: 1.35;
}

.admin-news-action-stack {
  display: grid;
  gap: 0.55rem;
}

.admin-news-action-stack .admin-news-button {
  width: 100%;
}

.admin-news-alert {
  border: 1px solid var(--color-danger-border);
  border-radius: var(--admin-ui-radius);
  background: var(--color-danger-surface);
  padding: 0.6rem 0.8rem;
  color: var(--color-danger-text);
  font-size: 0.875rem;
}

.admin-news-alert--success {
  border-color: var(--color-success-border-strong);
  background: var(--color-success-surface-medium);
  color: var(--color-success-text-soft);
}

.admin-news-empty-state,
.admin-news-empty-inline {
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface-muted);
  padding: 1rem;
  color: var(--color-text-muted);
  text-align: center;
}

.admin-news-empty-state {
  align-self: center;
  justify-self: center;
  width: min(100%, 24rem);
}

.admin-news-article-scroll--waiting {
  display: grid;
  overflow: hidden;
  place-items: center;
  padding: 0;
}

.admin-news-waiting-state {
  width: 100%;
  padding: 1.5rem;
  color: var(--color-text-muted);
  text-align: center;
}

.admin-selection-waiting-copy {
  font-size: 1rem;
  line-height: 1.5;
}

.admin-news-info-scroll--waiting {
  display: grid;
  place-items: center;
}

.admin-promocode-workspace {
  background: var(--admin-ui-bg);
}

.admin-promocode-grid {
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(560px, 1fr) minmax(300px, 360px);
  gap: 0.875rem;
  min-height: 0;
  flex: 1;
}

.admin-promocode-grid > .admin-news-panel {
  min-width: 0;
}

.admin-promocode-list {
  border-top: 1px solid var(--admin-ui-border);
  border-bottom: 1px solid var(--admin-ui-border);
}

.admin-promocode-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.65rem;
  border-bottom: 1px solid var(--admin-ui-border);
  padding: 0.8rem;
  color: inherit;
}

.admin-promocode-list-row:last-child {
  border-bottom: 0;
}

.admin-promocode-list-row:hover {
  background: var(--color-tint-raised);
}

.admin-promocode-list-row.is-active {
  background: var(--admin-ui-control);
}

.admin-promocode-status {
  display: inline-flex;
  min-width: 5.2rem;
  height: 1.8rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-ui-border);
  border-radius: 999px;
  background: var(--admin-ui-control);
  color: var(--color-text-secondary);
  padding: 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.admin-promocode-status.is-active {
  border-color: var(--color-success-border-medium);
  background: var(--color-success-surface-strong);
  color: var(--color-success-text-soft);
}

.admin-promocode-editor-list {
  display: grid;
  gap: 0.85rem;
}

.admin-promocode-editor-row {
  position: relative;
  display: grid;
  gap: 1rem;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius);
  background: var(--color-surface-sidebar);
  padding: 1rem;
}

.admin-promocode-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-promocode-row-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.admin-promocode-row-stats div {
  min-width: 0;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius-sm);
  background: var(--admin-ui-bg);
  padding: 0.55rem;
}

.admin-promocode-row-stats dt {
  overflow: hidden;
  color: var(--color-text-subtle);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-promocode-row-stats dd {
  margin-top: 0.2rem;
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-promocode-inline-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: end;
}

.admin-promocode-inline-form .admin-news-field-group > span,
.admin-promocode-create-panel .admin-news-field-group > span {
  color: var(--color-text-caption);
}

.admin-promocode-inline-form .admin-news-input,
.admin-promocode-create-panel .admin-news-input {
  border-color: var(--admin-ui-border);
  border-radius: var(--admin-ui-radius-sm);
  background: var(--admin-ui-bg);
}

.admin-promocode-inline-form .admin-news-input[type="date"],
.admin-promocode-create-panel .admin-news-input[type="date"] {
  color-scheme: dark;
}

.admin-promocode-inline-form .admin-news-input::-webkit-calendar-picker-indicator,
.admin-promocode-create-panel .admin-news-input::-webkit-calendar-picker-indicator {
  opacity: 0.7;
  filter: invert(1);
}

.admin-promocode-switch {
  grid-column: span 2;
  min-height: var(--support-control-height);
  background: var(--admin-ui-bg);
}

.admin-promocode-actions {
  display: flex;
  align-items: end;
  grid-column: span 2;
}

.admin-promocode-actions .admin-news-button {
  width: 100%;
  min-height: var(--support-control-height);
}

.admin-promocode-delete-form {
  display: flex;
  justify-content: flex-end;
}

.admin-promocode-danger {
  border-color: var(--color-danger-border-hover);
  background: var(--color-danger-surface-hover);
  color: var(--color-danger-text);
}

.admin-promocode-danger:hover {
  background: var(--color-danger-surface-active);
  color: var(--color-text-primary);
}

.admin-promocode-scope-note {
  border: 1px solid var(--color-success-border-soft);
  border-radius: var(--admin-ui-radius);
  background: var(--color-success-surface-soft);
  padding: 0.75rem;
  color: var(--color-success-text-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 1380px) {
  .admin-promocode-grid {
    grid-template-columns: minmax(250px, 300px) minmax(480px, 1fr) minmax(280px, 320px);
  }
}

@media (max-width: 1180px) {
  .admin-promocode-grid {
    grid-template-columns: minmax(240px, 300px) minmax(420px, 1fr);
  }

  .admin-promocode-create-panel {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .admin-promocode-create-panel .admin-news-panel-scroll {
    overflow: visible;
  }

  .admin-promocode-create-panel .admin-news-editor-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-promocode-create-panel .admin-news-section--divided {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

@media (max-width: 1023px) {
  .admin-promocode-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
    padding-bottom: 1rem;
  }

  .admin-promocode-grid > .admin-news-panel {
    min-height: 32rem;
  }

  .admin-promocode-editor-panel {
    min-height: 42rem;
  }

  .admin-promocode-create-panel .admin-news-editor-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .admin-promocode-row-stats,
  .admin-promocode-inline-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .admin-promocode-row-stats,
  .admin-promocode-inline-form {
    grid-template-columns: 1fr;
  }

  .admin-promocode-switch,
  .admin-promocode-actions {
    grid-column: auto;
  }
}

.admin-stats-workspace {
  background: var(--admin-ui-bg);
}

.admin-stats-topbar {
  display: grid;
  grid-template-columns: minmax(360px, 410px) minmax(420px, 1fr) minmax(360px, 410px);
  align-items: stretch;
  gap: 0.875rem;
  height: var(--admin-support-topbar-height);
  min-height: var(--admin-support-topbar-height);
}

.admin-stats-brand,
.admin-stats-titlebar,
.admin-stats-top-actions,
.admin-stats-card,
.admin-stats-panel {
  border: 1px solid transparent;
  background: var(--admin-ui-surface);
  box-shadow: var(--admin-ui-card-shadow);
}

.admin-stats-brand,
.admin-stats-titlebar,
.admin-stats-top-actions {
  box-sizing: border-box;
  height: var(--admin-support-topbar-height);
  min-height: var(--admin-support-topbar-height);
  border-radius: var(--admin-ui-radius);
  padding: 0.45rem;
}

.admin-stats-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.75rem;
}

.admin-stats-brand-logo {
  display: block;
  width: min(11.5rem, 76%);
  height: auto;
  object-fit: contain;
}

.admin-stats-titlebar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
}

.admin-stats-top-actions {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.admin-stats-top-actions form {
  display: flex;
}

.admin-stats-button {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius-sm);
  background: var(--admin-ui-control);
  padding: 0 0.8rem;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 600;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.admin-stats-button:hover {
  background: var(--admin-ui-control-hover);
  color: var(--color-text-primary);
}

.admin-stats-button--primary {
  background: var(--color-surface-inverse-accent);
  color: var(--color-text-inverse);
}

.admin-stats-button--primary:hover {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.admin-stats-button--small {
  min-height: 2rem;
  border-radius: var(--admin-ui-radius-sm);
  padding: 0 0.6rem;
  font-size: 0.75rem;
}

.admin-stats-header-pill {
  display: inline-flex;
  height: 1.9rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-ui-border);
  border-radius: 999px;
  background: var(--admin-ui-control);
  color: var(--color-text-soft);
  padding: 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.admin-stats-card,
.admin-stats-panel {
  overflow: hidden;
  border-radius: var(--admin-ui-radius);
}

.admin-stats-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.admin-stats-panel-header {
  box-sizing: border-box;
  display: flex;
  min-height: var(--admin-support-panel-header-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--admin-ui-border);
  background: var(--admin-ui-surface-muted);
  padding: 0.65rem 0.8rem;
  overflow: hidden;
}

.admin-stats-panel-scroll {
  min-height: 0;
  flex: 1;
}

.admin-stats-section-divider {
  border-top: 1px solid var(--admin-ui-border);
}

.admin-stats-chart-marker {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--color-surface-inverse-accent);
}

.admin-stats-progress {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--admin-ui-control);
}

.admin-stats-progress__value {
  height: 100%;
  border-radius: inherit;
  background: var(--color-surface-inverse-accent);
}

.admin-analytics-workspace {
  min-width: 0;
}

.admin-workspace-scroll {
  overflow-x: hidden;
}

@media (min-width: 1280px) {
  body.admin-surface .admin-main--workspace-scroll {
    padding-top: 0;
    padding-bottom: 0;
  }

  body.admin-surface .admin-workspace-scroll {
    margin-right: -1rem;
    margin-bottom: 0;
    padding-top: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
  }
}

.admin-analytics-comparison-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-analytics-metric,
.admin-analytics-segment,
.admin-analytics-risk,
.admin-analytics-concentration-band {
  min-width: 0;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius);
}

.admin-analytics-segment,
.admin-analytics-risk,
.admin-analytics-concentration-band {
  padding: 0.9rem;
}

.admin-analytics-metric {
  display: grid;
  min-height: 9rem;
  grid-template-rows: 1rem minmax(3.75rem, 1fr) 1.6rem;
  row-gap: 0.25rem;
}

.admin-analytics-metric-label {
  overflow: hidden;
  line-height: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-analytics-metric-value {
  display: flex;
  align-self: center;
  align-items: center;
}

.admin-analytics-metric-footer {
  min-height: 1.6rem;
  align-self: end;
}

.admin-analytics-risk {
  display: grid;
  grid-template-rows: 1.25rem minmax(2rem, 1fr) auto;
  row-gap: 0.25rem;
  text-align: center;
}

.admin-analytics-risk-label {
  overflow: hidden;
  line-height: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-analytics-risk-value {
  display: flex;
  gap: 0.3rem;
  align-items: baseline;
  justify-content: center;
}

.admin-analytics-risk-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: end;
  justify-content: center;
  gap: 0.25rem;
}

.admin-analytics-change {
  display: inline-flex;
  min-height: 1.6rem;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-analytics-renewal-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-analytics-renewal-summary > div {
  min-width: 0;
  border-right: 1px solid var(--admin-ui-border);
  padding-right: 0.75rem;
  text-align: center;
}

.admin-analytics-renewal-summary > div:last-child {
  border-right: 0;
  padding-right: 0;
}

@media (min-width: 1280px) {
  .admin-analytics-side-content {
    height: 22rem;
    grid-template-rows: 4.75rem minmax(0, 1fr);
  }

  .admin-analytics-side-card-grid {
    min-height: 0;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .admin-analytics-segment,
  .admin-analytics-risk {
    height: 100%;
  }
}

.admin-analytics-table-scroll {
  min-width: 0;
  overflow-x: auto;
}

.admin-analytics-sales-heatmap {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0.3rem;
  text-align: center;
  font-size: 0.75rem;
}

.admin-analytics-sales-heatmap {
  min-width: 88rem;
  table-layout: fixed;
}

.admin-analytics-sales-heatmap th,
.admin-analytics-sales-heatmap td {
  height: 2rem;
  border-radius: 0.35rem;
  font-size: 0.6875rem;
}

.admin-analytics-top-payers {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--admin-ui-radius);
}

.admin-analytics-top-payers-table {
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.admin-analytics-top-payers-table .admin-stats-table {
  height: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .admin-analytics-top-payers-table .admin-stats-table {
    table-layout: fixed;
  }

  .admin-analytics-top-payers-table .admin-stats-table :is(th, td):nth-child(1) {
    width: 46%;
  }

  .admin-analytics-top-payers-table .admin-stats-table :is(th, td):nth-child(2) {
    width: 14%;
  }

  .admin-analytics-top-payers-table .admin-stats-table :is(th, td):nth-child(3) {
    width: 24%;
  }

  .admin-analytics-top-payers-table .admin-stats-table :is(th, td):nth-child(4) {
    width: 16%;
  }

  .admin-analytics-top-payers-table .admin-stats-table :is(th, td):first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-analytics-top-payers-table .admin-stats-table td:first-child :is(a, span) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-analytics-top-payers-table .admin-stats-table :is(th, td):nth-child(n+2) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}

.admin-analytics-payer-pagination {
  flex: 0 0 auto;
  border-top: 1px solid var(--admin-ui-border);
  border-bottom: 0;
}

.admin-analytics-payer-pagination:not(.hidden) {
  display: flex;
}

.admin-analytics-payer-pagination .admin-stats-button:disabled {
  cursor: default;
  opacity: 0.5;
}

.admin-analytics-overview-grid {
  display: grid;
  min-width: 0;
  gap: 0.75rem;
}

.admin-analytics-active-keys {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
}

.admin-analytics-active-keys__tariffs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-analytics-active-keys__duration-section {
  display: grid;
  min-height: 0;
  padding-top: 1rem;
}

.admin-analytics-active-keys__duration-groups {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.admin-analytics-active-keys__duration-group,
.admin-analytics-active-keys__durations {
  min-height: 0;
  height: 100%;
}

.admin-analytics-active-keys__durations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .admin-analytics-active-keys__duration-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-analytics-active-keys__duration {
  display: grid;
  min-width: 0;
  height: 100%;
  grid-template-rows: 1.25rem minmax(2rem, 1fr) auto;
  row-gap: 0.25rem;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface-muted);
  padding: 0.9rem;
  text-align: center;
}

.admin-analytics-active-keys__duration > span {
  overflow: hidden;
  color: var(--color-text-secondary-strong);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-analytics-active-keys__duration > strong {
  align-self: center;
  color: var(--color-text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.admin-analytics-active-keys__duration > small {
  align-self: end;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

@media (min-width: 1280px) {
  .admin-analytics-overview-grid {
    --admin-concentration-height: 22rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .admin-analytics-active-keys {
    height: 22rem;
    grid-template-rows: 4.75rem minmax(0, 1fr);
    gap: 1rem;
  }

  .admin-analytics-active-keys__duration-section {
    padding-top: 0;
  }

  .admin-analytics-concentration-grid {
    align-items: stretch;
  }

  .admin-analytics-concentration-bands {
    height: var(--admin-concentration-height);
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .admin-analytics-top-payers {
    height: var(--admin-concentration-height);
    overflow: hidden;
  }

  .admin-analytics-tariff-card {
    height: var(--admin-concentration-height);
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .admin-analytics-tariff-primary {
    grid-row: span 1;
  }

  .admin-analytics-tariff-durations {
    grid-row: span 2;
  }
}

.admin-analytics-tariff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-analytics-tariff-card {
  display: grid;
  min-width: 0;
  gap: 0.75rem;
}

.admin-analytics-tariff-primary,
.admin-analytics-tariff-durations {
  min-width: 0;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius);
  padding: 0.9rem;
}

.admin-analytics-tariff-primary {
  min-height: 0;
}

.admin-analytics-tariff-durations {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 0.75rem;
}

.admin-analytics-tariff-durations-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-analytics-duration-row + .admin-analytics-duration-row {
  border-top: 1px solid var(--admin-ui-border);
  padding-top: 0.75rem;
}

@media (max-width: 1279px) {
  .admin-analytics-comparison-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .admin-analytics-comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-analytics-renewal-summary {
    grid-template-columns: 1fr;
  }

  .admin-analytics-renewal-summary > div {
    border-right: 0;
    border-bottom: 1px solid var(--admin-ui-border);
    padding-right: 0;
    padding-bottom: 0.75rem;
  }

  .admin-analytics-renewal-summary > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .admin-analytics-tariff-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479px) {
  .admin-analytics-comparison-grid {
    grid-template-columns: 1fr;
  }

}

.admin-stats-empty-inline,
.admin-stats-empty-state {
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface-muted);
  padding: 1rem;
  color: var(--color-text-muted);
  text-align: center;
}

.admin-stats-empty-state {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2.5rem 1rem;
}

.admin-stats-link {
  color: var(--color-text-soft);
  font-weight: 700;
}

.admin-stats-link:hover {
  color: var(--color-text-primary);
}

.admin-stats-table {
  min-width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
}

.admin-stats-table thead {
  background: var(--admin-ui-surface-muted);
  color: var(--color-text-subtle);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.admin-stats-table th,
.admin-stats-table td {
  padding: 0.75rem 1rem;
}

.admin-stats-table th {
  font-weight: 600;
}

.admin-stats-table td {
  color: var(--color-text-secondary);
}

.admin-stats-table tbody tr {
  border-top: 1px solid var(--admin-ui-border);
}

.admin-stats-table tbody tr:hover {
  background: var(--admin-ui-surface-muted);
}

@media (max-width: 1180px) {
  .admin-stats-topbar {
    grid-template-columns: minmax(330px, 380px) minmax(420px, 1fr) minmax(330px, 380px);
  }
}

@media (max-width: 1023px) {
  .admin-stats-topbar {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .admin-stats-brand,
  .admin-stats-titlebar,
  .admin-stats-top-actions {
    height: auto;
    min-height: 3.8rem;
  }

  .admin-stats-top-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .admin-stats-panel-header {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--admin-support-panel-header-height);
  }
}

@media (max-width: 1180px) {
  .admin-news-topbar,
  .admin-news-grid {
    grid-template-columns: minmax(260px, 320px) minmax(340px, 1fr) minmax(260px, 320px);
  }

  .admin-support-top-actions,
  .admin-news-top-actions,
  .admin-stats-top-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1023px) {
  .admin-news-topbar,
  .admin-news-grid {
    grid-template-columns: 1fr;
  }

  .admin-news-topbar {
    height: auto;
    min-height: 0;
  }

  .admin-news-brand,
  .admin-news-titlebar,
  .admin-news-top-actions {
    min-height: var(--support-control-height);
  }

  .admin-news-top-actions {
    justify-content: flex-start;
  }

  .admin-news-grid {
    overflow-y: auto;
    padding-bottom: 1rem;
  }

  .admin-news-panel {
    min-height: 34rem;
  }

  .admin-news-editor-panel,
  .admin-news-preview-panel {
    min-height: 42rem;
  }
}

/* Mobile admin ergonomics. All rules stay scoped to the admin surface. */
.admin-surface :where(a, button, input, textarea, select) {
  -webkit-tap-highlight-color: transparent;
}

.admin-surface :where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--color-tint-text);
  outline-offset: 2px;
}

.admin-mobile-panel-tabs {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  border: 1px solid var(--admin-ui-border);
  border-radius: var(--admin-ui-radius);
  background: var(--admin-ui-surface);
  padding: 0.3rem;
  box-shadow: var(--admin-ui-card-shadow);
}

.admin-mobile-panel-tab {
  display: inline-flex;
  min-width: 0;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--admin-ui-radius-sm);
  padding: 0.35rem 0.45rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.admin-mobile-panel-tab.is-active {
  background: var(--color-surface-inverse-accent);
  color: var(--color-text-inverse);
}

.admin-mobile-action-rail {
  scrollbar-width: none;
}

.admin-mobile-cell-label {
  display: none;
}

.admin-mobile-action-rail::-webkit-scrollbar,
.admin-support-filter-rail::-webkit-scrollbar {
  display: none;
}

.admin-mobile-sidebar {
  height: 100dvh;
}

.admin-login-main {
  height: 100dvh;
  min-height: 100dvh;
  padding-top: max(0.75rem, env(safe-area-inset-top));
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.admin-mobile-sidebar .admin-sidebar__nav {
  flex: 1;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.admin-mobile-sidebar .admin-sidebar__account {
  height: auto;
  min-height: 5.25rem;
  flex: 0 0 auto;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce) {
  .admin-mobile-sidebar {
    transition: none;
  }
}

@media (max-width: 1279px) {
  .admin-content-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .admin-mobile-topbar {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    min-height: calc(3.7rem + env(safe-area-inset-top));
    padding: max(0.55rem, env(safe-area-inset-top)) 0.75rem 0.55rem;
  }

  .admin-mobile-topbar__brand {
    max-width: 100%;
    min-height: 2.75rem;
    justify-self: center;
  }

  .admin-mobile-topbar__brand img {
    flex: 0 0 auto;
  }

  .admin-mobile-topbar__section {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-mobile-topbar__spacer {
    width: 2.75rem;
    margin-left: 0;
  }

  .admin-mobile-icon-button,
  .admin-sidebar-link,
  .admin-sidebar__logout {
    min-height: 2.75rem;
  }

  .admin-mobile-icon-button {
    width: 2.75rem;
    height: 2.75rem;
  }

  .admin-mobile-sidebar__header {
    min-height: calc(4.7rem + env(safe-area-inset-top));
    padding: max(1rem, env(safe-area-inset-top)) 0.85rem 0.85rem;
  }

  .admin-mobile-sidebar .admin-sidebar__group-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
  }

  .admin-mobile-sidebar-backdrop {
    backdrop-filter: none;
  }
}

@media (max-width: 1023px) {
  .admin-mobile-panel-tabs {
    display: grid;
  }

  .admin-main {
    min-height: 0;
    overflow: hidden;
    padding: 0.65rem;
    overscroll-behavior: contain;
  }

  .admin-support-workspace,
  .admin-news-workspace,
  .admin-stats-workspace {
    gap: 0.65rem;
  }

  .admin-page-topbar,
  .admin-page-topbar--support {
    gap: 0.65rem;
  }

  .admin-page-titlebar,
  .admin-page-actions,
  .admin-page-topbar--support .admin-support-search {
    min-height: 3.25rem;
  }

  [data-admin-mobile-panel-workspace].is-mobile-ready {
    display: block;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    padding-bottom: 0;
  }

  [data-admin-mobile-panel-workspace].is-mobile-ready [data-admin-mobile-panel] {
    height: 100%;
    min-height: 0 !important;
  }

  [data-admin-mobile-panel-workspace].is-mobile-ready [data-admin-mobile-panel]:not(.is-mobile-active) {
    display: none !important;
  }

  .admin-support-panel,
  .admin-support-chat-panel,
  .admin-news-panel,
  .admin-news-editor-panel,
  .admin-news-preview-panel,
  .admin-promocode-grid > .admin-news-panel,
  .admin-promocode-editor-panel {
    min-height: 0;
  }

  .admin-support-panel-header,
  .admin-news-panel-header,
  .admin-stats-panel-header {
    height: auto;
    min-height: var(--admin-support-panel-header-height);
  }

  .admin-support-button,
  .admin-support-button--small,
  .admin-news-button,
  .admin-news-button--small,
  .admin-stats-button,
  .admin-stats-button--small,
  .admin-support-filter {
    min-height: 2.75rem;
    touch-action: manipulation;
  }

  .admin-page-actions .admin-news-button {
    flex: 1 1 8rem;
  }

  .admin-mobile-action-rail {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0.15rem;
  }

  .admin-mobile-action-rail > * {
    flex: 0 0 auto;
  }

  .admin-support-inline-search {
    display: none;
  }

  .admin-support-filter-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0.1rem;
    scrollbar-width: none;
  }

  .admin-support-filter-rail > * {
    flex: 0 0 auto;
  }

  .admin-support-user-row {
    min-height: 6rem;
    padding: 0.7rem;
  }

  .admin-support-chat-panel .admin-support-panel-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .admin-support-chat-panel .admin-support-panel-header > .flex {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.1rem;
  }

  .admin-support-chat-body,
  .admin-support-panel-scroll,
  .admin-news-panel-scroll {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .admin-support-composer {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  .admin-support-delete-actions-panel {
    bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  .admin-support-composer .support-composer-button,
  .admin-support-attachment-preview .support-attachment-preview__remove,
  .admin-support-copy-field__button {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }

  .admin-support-message-content {
    max-width: min(94%, 44rem);
  }

  .admin-support-account-number,
  .admin-support-account-submit {
    height: 2.75rem;
  }

  .admin-support-account-button-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-support-account-button-grid form:first-child {
    grid-column: 1 / -1;
  }

  .admin-support-account-button-grid .admin-support-button,
  .admin-support-account-button-grid form {
    width: 100%;
  }

  .admin-news-input,
  .admin-news-file-input,
  .admin-news-textarea,
  .admin-login-input,
  .admin-support-input,
  .admin-support-search-input.admin-support-input,
  .admin-support-composer textarea {
    font-size: 1rem;
  }

  .admin-news-file-input::file-selector-button {
    min-height: 2.75rem;
  }

  .admin-news-textarea {
    min-height: 45dvh;
  }

  .admin-news-article-body,
  .admin-news-article-body :where(p, a, code),
  .admin-support-message-bubble {
    overflow-wrap: anywhere;
  }

  .admin-news-article-body pre {
    max-width: 100%;
    overflow-x: auto;
  }

  .admin-news-article-body :where(img, table) {
    max-width: 100%;
  }

  .admin-promocode-row-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-promocode-editor-row {
    scroll-margin-top: 0.75rem;
  }

  .admin-promocode-delete-form .admin-news-button {
    width: 100%;
    min-height: 2.75rem;
  }

  .admin-stats-chart-scroll {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .admin-stats-breakdown-line {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.25rem 0.75rem;
  }

  .admin-stats-breakdown-line > :last-child {
    margin-left: auto;
    text-align: right;
  }

  .admin-users-pagination {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .admin-mobile-cell-label {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .admin-responsive-table-wrap {
    overflow: visible;
  }

  .admin-responsive-table,
  .admin-responsive-table tbody {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .admin-responsive-table thead {
    display: none;
  }

  .admin-responsive-table tbody {
    display: grid;
    gap: 0.65rem;
    padding: 0.65rem;
  }

  .admin-responsive-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    border: 1px solid var(--admin-ui-border);
    border-radius: var(--admin-ui-radius);
    background: var(--admin-ui-surface-muted);
    padding: 0.8rem;
  }

  .admin-responsive-table tbody tr:hover {
    background: var(--admin-ui-surface-muted);
  }

  .admin-responsive-table td,
  .admin-responsive-table td.text-right {
    display: block;
    min-width: 0;
    max-width: none;
    padding: 0;
    text-align: left;
    white-space: normal;
  }

  .admin-responsive-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.2rem;
    color: var(--color-text-subtle);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .admin-responsive-table td[data-card-heading],
  .admin-responsive-table td[data-card-action],
  .admin-responsive-table td[data-label="Payment ID"] {
    grid-column: 1 / -1;
  }

  .admin-responsive-table td[data-card-heading] {
    border-bottom: 1px solid var(--admin-ui-border);
    padding-bottom: 0.7rem;
  }

  .admin-responsive-table td[data-card-action] .admin-stats-button {
    width: 100%;
    min-height: 2.75rem;
  }
}

@media (max-width: 640px) {
  .admin-main {
    padding: 0.5rem;
  }

  .admin-mobile-topbar__brand {
    gap: 0.45rem;
  }

  .admin-page-titlebar,
  .admin-page-actions,
  .admin-support-panel-header,
  .admin-news-panel-header,
  .admin-stats-panel-header {
    padding-right: 0.65rem;
    padding-left: 0.65rem;
  }

  .admin-stats-chart-scroll {
    overflow: visible;
  }

  .admin-stats-chart-frame {
    min-width: 100% !important;
  }

  .admin-stats-panel-meta {
    width: 100%;
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .admin-users-pagination__info {
    width: 100%;
    text-align: center;
  }

  .admin-users-pagination__actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-users-pagination__actions > * {
    width: 100%;
    min-height: 2.75rem;
  }

  .admin-promocode-inline-form {
    grid-template-columns: 1fr;
  }

  .admin-promocode-switch,
  .admin-promocode-actions {
    grid-column: auto;
  }

  .admin-promocode-editor-row {
    padding: 0.75rem;
  }

  .admin-news-post-row,
  .admin-news-new-row {
    grid-template-columns: 3.75rem minmax(0, 1fr);
    min-height: 5.75rem;
    padding: 0.65rem;
  }

  .admin-news-post-thumb {
    width: 3.75rem;
    height: 3.75rem;
  }

  .admin-support-user-row--guest .admin-support-user-pill--guest {
    display: none;
  }
}

@media (max-width: 480px) {
  .admin-support-key-meta,
  .admin-support-profile-grid {
    grid-template-columns: 1fr;
  }

  .admin-support-key-meta p,
  .admin-support-profile-grid .admin-support-dl-row dd {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 359px) {
  .admin-support-payment-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .admin-support-payment-meta {
    justify-content: flex-end;
  }

  .admin-support-payment-note {
    white-space: normal;
  }
}

/* Final overrides: keep the redesigned admin hierarchy above legacy responsive rules. */
@media (min-width: 1024px) {
  body .admin-news-grid {
    grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  body .admin-news-grid > .admin-news-preview-panel,
  body .admin-news-grid > .admin-news-editor-panel {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  body .admin-news-grid > #admin-news-info-panel,
  body .admin-news-grid > #admin-news-settings-panel { grid-column: 1; }
  body .admin-news-grid > #admin-news-info-panel { max-height: 23rem; }
  body .admin-promocode-grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 20rem);
    grid-template-rows: auto minmax(0, 1fr);
  }
  body .admin-promocode-list-panel {
    grid-column: 1 / -1;
    max-height: 10.5rem;
  }
  body .admin-promocode-list-panel .admin-promocode-list {
    display: grid;
    grid-auto-columns: minmax(15rem, 19rem);
    grid-auto-flow: column;
    overflow-x: auto;
    border: 0;
    padding: 0.65rem;
  }
}

body .admin-news-panel { border-color: var(--admin-ui-border); box-shadow: none; }
body .admin-news-panel-header { background: var(--admin-ui-surface); }
body .admin-news-post-list { border: 0; padding: 0.5rem; }
body .admin-news-post-list .admin-news-post-row + .admin-news-post-row {
  border-top: 0;
  margin-top: 0.25rem;
}
body .admin-news-post-row.is-active {
  background: var(--admin-ui-control-hover);
  box-shadow: inset 3px 0 0 var(--color-highlight-strong);
}

@media (min-width: 1024px) {
  body .admin-news-grid {
    grid-template-columns: minmax(17rem, 20rem) minmax(28rem, 1fr) minmax(17rem, 20rem);
    grid-template-rows: minmax(0, 1fr);
  }

  body .admin-news-grid > .admin-news-preview-panel,
  body .admin-news-grid > .admin-news-editor-panel {
    grid-column: 2;
    grid-row: 1;
  }

  body .admin-news-grid > #admin-news-info-panel,
  body .admin-news-grid > #admin-news-settings-panel {
    grid-column: 3;
    grid-row: 1;
    max-height: none;
  }
}

.admin-promocode-editor-row[hidden] {
  display: none;
}

.admin-promocode-list-row.is-selected {
  background: var(--admin-ui-control-hover);
  box-shadow: inset 3px 0 0 var(--color-highlight-strong);
}

.admin-promocode-create-panel .admin-news-editor-form {
  gap: 0.7rem;
}

.admin-promocode-create-panel .admin-news-section {
  padding-bottom: 0;
}

.admin-promocode-create-panel .admin-news-input {
  min-height: 2.5rem;
}

.admin-promocode-create-panel .admin-news-switch,
.admin-promocode-create-panel .admin-promocode-scope-note {
  padding: 0.6rem;
}

.admin-news-panel-actions,
.admin-promocode-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-promocode-card-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--admin-ui-border);
  padding-top: 1rem;
}

.admin-promocode-card-actions .admin-news-button {
  min-width: 8rem;
}

.admin-promocode-card-actions .admin-news-button--primary {
  min-width: 12rem;
}

@media (max-width: 640px) {
  .admin-promocode-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-promocode-card-actions .admin-news-button,
  .admin-promocode-card-actions form {
    width: 100%;
  }
}

body .admin-promocode-card-actions {
  border-top: 0;
  border-radius: 0.8rem;
  background: var(--admin-ui-bg);
  padding: 0.75rem;
}

.admin-news-action-stack form,
.admin-news-action-stack form .admin-news-button {
  width: 100%;
}

.admin-news-button--danger {
  border-color: var(--color-danger-border-hover);
  background: transparent;
  color: var(--color-danger-text);
}

.admin-news-button--danger:hover {
  background: var(--color-danger-surface-hover);
  color: var(--color-danger-text);
}

.admin-news-editor-panel .admin-news-input:focus,
.admin-news-editor-panel .admin-news-file-input:focus,
.admin-news-editor-panel .admin-news-textarea:focus {
  border-color: var(--admin-ui-border);
  outline: none;
  box-shadow: none;
}

.admin-news-status-tabs {
  --status-tabs-duration: 250ms;
  --status-tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  border: 1px solid var(--admin-ui-border);
  border-radius: 0.75rem;
  background: var(--admin-ui-bg);
  padding: 3px;
}

.admin-news-status-tab {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 2.45rem;
  appearance: none;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--color-text-subtle);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--status-tabs-duration) var(--status-tabs-ease);
}

.admin-news-status-tab:hover,
.admin-news-status-tab[aria-selected="true"] {
  color: var(--color-text-primary);
}

.admin-news-status-pill {
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 0;
  width: 0;
  height: 2.45rem;
  border-radius: 0.55rem;
  background: var(--admin-ui-control-hover);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
  pointer-events: none;
  transform: translateX(0);
  transition:
    transform var(--status-tabs-duration) var(--status-tabs-ease),
    width var(--status-tabs-duration) var(--status-tabs-ease);
  will-change: transform, width;
}

@media (prefers-reduced-motion: reduce) {
  .admin-news-status-pill,
  .admin-news-status-tab {
    transition: none !important;
  }
}

.admin-news-editor-panel .admin-news-editor-form {
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-news-editor-panel .admin-news-media-dropzone {
  width: 100%;
  min-height: 0;
  aspect-ratio: 2 / 1;
  border: 0;
  border-bottom: 1px solid var(--admin-ui-border);
  border-radius: 0;
  background: var(--admin-ui-bg);
}

.admin-news-editor-panel .admin-news-media-dropzone:not(.has-image) {
  grid-template-columns: 2.75rem auto;
  justify-content: center;
}

.admin-news-media-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-news-media-dropzone.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 58%,
    var(--color-admin-shadow-soft) 78%,
    var(--color-admin-shadow) 100%
  );
  pointer-events: none;
}

.admin-news-media-dropzone.has-image .admin-news-media-icon,
.admin-news-media-dropzone.has-image .admin-news-media-copy {
  z-index: 1;
  align-self: end;
}

.admin-news-media-dropzone.has-image .admin-news-media-icon {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}

.admin-news-media-dropzone.has-image .admin-news-media-copy strong,
.admin-news-media-dropzone.has-image .admin-news-media-copy small {
  color: #fff;
}

.admin-news-editor-panel .admin-news-title-field .admin-news-input,
.admin-news-editor-panel .admin-news-field-group--body .admin-news-textarea {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-news-editor-panel :is(
  .admin-news-title-field .admin-news-input,
  .admin-news-field-group--body .admin-news-textarea
):hover:not(:focus) {
  background: color-mix(in srgb, var(--color-admin-tint-hover) 45%, transparent);
  box-shadow: none;
}

.admin-news-editor-panel .admin-news-title-field .admin-news-input {
  min-height: 4.5rem;
  padding: 1.15rem 1.25rem 0.75rem;
  color: var(--color-text-primary);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 750;
  line-height: 1.2;
}

.admin-news-editor-panel .admin-news-field-group--body {
  border-top: 1px solid var(--admin-ui-border);
}

.admin-news-editor-panel .admin-news-field-group--body .admin-news-textarea {
  min-height: 24rem;
  overflow: hidden;
  resize: none;
  padding: 1.15rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.admin-news-editor-panel :is(.admin-news-input, .admin-news-textarea)::placeholder {
  color: var(--color-text-subtle);
}

.admin-news-editor-panel .admin-news-editor-scroll {
  padding: 0;
}

.admin-news-preview-panel .admin-news-panel-scroll,
.admin-news-editor-panel .admin-news-panel-scroll {
  scrollbar-width: none;
}

.admin-news-preview-panel .admin-news-panel-scroll::-webkit-scrollbar,
.admin-news-editor-panel .admin-news-panel-scroll::-webkit-scrollbar {
  display: none;
}

/* Publication list cards. */
body .admin-news-post-list {
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem;
}

body .admin-news-post-row,
body .admin-news-new-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.25rem;
  gap: 0.8rem;
  min-height: 6.6rem;
  align-items: center;
  border: 1px solid var(--admin-ui-border);
  border-radius: 0.8rem;
  background: transparent;
  padding: 0.75rem;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

body .admin-news-post-list .admin-news-post-row + .admin-news-post-row {
  margin-top: 0;
}

body .admin-news-post-row:hover {
  border-color: var(--admin-ui-control-hover);
  background: var(--admin-ui-control);
}

body .admin-news-post-row.is-active,
body .admin-news-new-row.is-active {
  border-color: var(--admin-ui-border);
  background: var(--admin-ui-control);
  box-shadow: none;
}

body .admin-news-new-row {
  box-sizing: border-box;
  width: calc(100% - 1.3rem);
  margin: 0.65rem 0.65rem 0;
}

body .admin-news-new-row + .admin-news-post-list {
  padding-top: 0.5rem;
}

/* Consistent visible boundaries across the admin surface. */
.admin-surface {
  --admin-ui-border: var(--color-admin-border);
  --admin-ui-border-hover: var(--color-admin-border-hover);
  --admin-support-divider: var(--color-admin-divider);
}

.admin-surface :is(
  .admin-page-titlebar,
  .admin-page-actions,
  .admin-news-panel,
  .admin-stats-card,
  .admin-stats-panel,
  .admin-support-panel,
  .admin-login-panel,
  .admin-login-logo-wrap
) {
  border: 1px solid var(--admin-ui-border);
}

.admin-surface :is(
  .admin-news-panel-header,
  .admin-stats-panel-header,
  .admin-support-panel-header
) {
  border-bottom-color: var(--admin-ui-border);
}

.admin-surface :is(
  .admin-promocode-overview > div,
  .admin-promocode-editor-row,
  .admin-promocode-row-stats > div,
  .admin-news-current-card,
  .admin-news-empty-state,
  .admin-news-empty-inline,
  .admin-support-copy-field,
  .admin-support-composer-box,
  .admin-support-attachment-preview,
  .admin-support-empty-state,
  .admin-support-empty-inline,
  .admin-stats-empty-state,
  .admin-stats-empty-inline
) {
  border-color: var(--admin-ui-border);
}

.admin-surface :is(
  .admin-news-button,
  .admin-stats-button,
  .admin-support-button,
  .admin-mobile-icon-button,
  .admin-sidebar__logout
):not(.admin-news-button--danger):not(.admin-support-button--danger) {
  border-color: var(--admin-ui-border);
}

.admin-surface :is(
  .admin-news-input,
  .admin-news-textarea,
  .admin-support-input,
  .admin-login-input,
  .admin-news-status-tabs
) {
  border-color: var(--admin-ui-border);
}

.admin-surface :is(
  .admin-support-filter,
  .admin-support-copy-field__button,
  .admin-support-search-submit
) {
  border: 1px solid var(--admin-ui-border);
}

.admin-surface .admin-promocode-list-row:not(.is-selected),
.admin-surface .admin-news-post-row:not(.is-active),
.admin-surface .admin-news-new-row:not(.is-active) {
  border-color: var(--admin-ui-border);
}

.admin-surface .admin-promocode-list-row:not(.is-selected):hover,
.admin-surface .admin-news-post-row:not(.is-active):hover,
.admin-surface .admin-news-new-row:not(.is-active):hover {
  border-color: var(--admin-ui-border-hover);
}

body .admin-news-post-main {
  align-content: center;
  gap: 0.35rem;
}

.admin-news-post-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body .admin-news-post-excerpt {
  -webkit-line-clamp: 1;
  color: var(--color-text-subtle);
  font-size: 0.75rem;
}

body .admin-news-post-meta {
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.68rem;
}

.admin-news-post-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-subtle);
  font-weight: 650;
}

.admin-news-post-status i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--color-text-subtle);
}

.admin-news-post-status.is-published {
  color: var(--color-success-text-soft);
}

.admin-news-post-status.is-published i {
  background: var(--color-success-text-soft);
  box-shadow: 0 0 0 3px var(--color-success-surface-soft);
}

body .admin-news-post-thumb {
  width: 4.25rem;
  height: 4.25rem;
  border: 1px solid var(--admin-ui-border);
  border-radius: 0.7rem;
}

body .admin-news-post-thumb--empty {
  background: var(--admin-ui-bg);
  color: var(--color-text-subtle);
  font-size: 1.4rem;
  font-weight: 400;
}