/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer theme, utilities;
@layer utilities {
  .tw\:bg-canvas {
    background-color: var(--color-canvas) !important;
  }
  .tw\:font-sans {
    font-family: var(--font-sans) !important;
  }
}
.brand-lockup {
  color: var(--color-on-dark);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.brand-lockup span {
  color: var(--color-accent);
}
.login-page {
  grid-template-columns: minmax(360px, 0.9fr) minmax(400px, 0.65fr);
  gap: clamp(48px, 8vw, 136px);
  padding: clamp(40px, 7vw, 96px);
  background: var(--color-canvas);
}
.login-page::before {
  opacity: 0.55;
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, #000 0 52%, transparent 84%);
}
.login-intro {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: min(720px, calc(100svh - 120px));
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-4);
  color: var(--color-on-dark);
}
.login-intro > div:not(.brand-lockup) {
  max-width: 620px;
}
.login-intro-eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-login-eyebrow);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.login-intro h2 {
  margin: 0;
  font-size: clamp(3.25rem, 6vw, 5.75rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}
.login-intro p {
  max-width: 540px;
  margin: var(--space-6) 0 0;
  color: var(--color-login-copy);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.55;
}
.login-intro-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-login-copy);
  font-size: 0.8125rem;
  font-weight: 650;
}
.login-intro-status::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-status-ready);
  content: "";
}
.login-card {
  width: min(100%, 460px);
  justify-self: end;
  padding: clamp(32px, 4vw, 48px);
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-login);
}
.is-authenticated .login-intro {
  display: none;
}
.heading {
  margin-bottom: var(--space-8);
}
.heading h1 {
  font-size: 2rem;
  letter-spacing: -0.045em;
}
.heading p {
  color: var(--color-text-muted);
}
.field input,
.field select,
.field textarea {
  border-color: var(--color-input-border);
  background: var(--color-surface);
}
.submit-button {
  box-shadow: none;
}
.submit-button:hover {
  box-shadow: none;
}
.dashboard {
  grid-template-columns: 236px minmax(0, 1fr);
}
.sidebar {
  padding: var(--space-6) var(--space-3) var(--space-5);
  background: var(--color-sidebar);
}
.sidebar-heading {
  gap: var(--space-2);
  padding: 0 var(--space-4);
}
.sidebar-heading .brand-lockup {
  font-size: 1.375rem;
}
.sidebar-eyebrow {
  color: var(--color-sidebar-subtle);
  letter-spacing: 0.08em;
}
.sidebar-nav {
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.nav-tab {
  height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  color: var(--color-sidebar-muted);
  font-size: 0.9375rem;
}
.nav-tab:hover,
.nav-tab:focus-visible {
  background: var(--color-sidebar-hover);
}
.nav-tab.is-active {
  background: var(--color-accent);
  color: var(--color-on-dark);
}
.nav-tab.is-active::before {
  display: none;
}
.admin-nav {
  border-color: var(--color-sidebar-border);
}
.sidebar-user {
  padding: var(--space-3) var(--space-2) 0;
  border-top: 1px solid var(--color-sidebar-border);
}
.user-avatar {
  border-radius: 50%;
  box-shadow: var(--shadow-avatar);
}
.logout-button {
  border-color: var(--color-sidebar-control-border);
  color: var(--color-sidebar-muted);
}
.workspace {
  overflow: auto;
  padding: 0;
  background: var(--color-workspace);
}
.workspace-view[hidden] {
  display: none;
}
.workspace-view {
  display: grid;
  align-content: start;
  width: min(calc(100% - clamp(48px, 8vw, 112px)), var(--workspace-width));
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) 0 72px;
  gap: var(--space-6);
}
.workspace-header {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.workspace-header > span,
.workspace-header > div > span {
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}
.workspace-header h1 {
  margin: var(--space-2) 0 var(--space-2);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  letter-spacing: -0.05em;
}
.workspace-header p {
  color: var(--color-text-muted);
  font-size: 1rem;
}
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.home-header h1 > span {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.home-primary-action {
  flex: 0 0 auto;
}
.content-card {
  gap: var(--space-3);
  padding: var(--space-6);
  border-color: var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: none;
}
.workspace-view[data-view-panel="home"] .account-summary,
.workspace-view[data-view-panel="home"] .provider-status-card,
.system-ready-card {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}
.workspace-view[data-view-panel="home"] .account-summary {
  padding: var(--space-7) 0;
}
.workspace-view[data-view-panel="home"] .provider-widget-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-border);
}
.workspace-view[data-view-panel="home"] .provider-status-card {
  padding: var(--space-6) 0 var(--space-7);
  border-bottom: 0;
}
.workspace-view[data-view-panel="home"] .provider-status-card + .provider-status-card {
  padding-left: var(--space-7);
  border-left: 1px solid var(--color-border);
}
.system-ready-card {
  position: relative;
  padding: var(--space-6) 0 var(--space-6) 72px;
}
.system-ready-card::before {
  position: absolute;
  top: var(--space-6);
  left: 0;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-success-surface);
  color: var(--color-success);
  content: "✓";
  font-size: 1.375rem;
  font-weight: 800;
}
.empty-label {
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
}
.primary-button,
.secondary-button {
  border-radius: var(--radius-control);
  box-shadow: none;
}
.primary-button {
  background: var(--color-accent);
}
.primary-button:hover,
.primary-button:focus-visible {
  background: var(--color-accent-hover);
  box-shadow: none;
}
.proxy-card,
.user-card,
.account-card {
  overflow: hidden;
  padding: 0;
}
.proxy-list-header,
.user-list-header,
.account-list-header,
.manual-job-list-header {
  background: var(--color-subtle);
}
.proxy-row,
.user-row,
.account-row,
.manual-job-row {
  transition: background-color 140ms ease;
}
.proxy-row:hover,
.user-row:hover,
.account-row:hover,
.manual-job-row:hover {
  background: var(--color-soft-surface);
}
.manual-module,
.manual-composer-panel,
.manual-account-group {
  border-color: var(--color-border);
  box-shadow: none;
}
.modal-panel {
  border-color: var(--color-border);
  box-shadow: var(--shadow-floating);
}
@media (max-width: 900px) {
  .login-page {
    grid-template-columns: 1fr;
    place-items: center;
  }
  .login-intro {
    display: none;
  }
  .login-card {
    justify-self: center;
  }
  .dashboard {
    grid-template-columns: 208px minmax(0, 1fr);
  }
  .workspace-view {
    width: calc(100% - 48px);
  }
  .workspace-view[data-view-panel="home"] .provider-widget-grid {
    grid-template-columns: 1fr;
  }
  .workspace-view[data-view-panel="home"] .provider-status-card + .provider-status-card {
    padding-left: 0;
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }
}
@media (max-width: 720px) {
  .login-page {
    padding: 0;
  }
  .login-card {
    margin: var(--space-4);
  }
  .dashboard {
    grid-template-columns: 1fr;
  }
  .sidebar {
    padding: var(--space-4);
  }
  .sidebar-heading .brand-lockup {
    font-size: 1.125rem;
  }
  .workspace-view {
    width: calc(100% - 40px);
    padding: var(--space-8) 0 48px;
  }
  .home-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-5);
  }
}
.workspace-header-with-action {
  align-items: center;
}
.home-primary-action,
.add-proxy-button,
.add-account-button,
.add-user-button {
  width: auto;
  min-width: 136px;
  padding: 0 var(--space-4);
  white-space: nowrap;
}
.content-card {
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.account-card,
.proxy-card,
.user-card,
.manual-job-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.manual-card {
  padding: var(--space-6);
}
.manual-card:has(.manual-job-table) {
  gap: var(--space-4);
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.account-list-header,
.proxy-list-header,
.user-list-header,
.manual-job-list-header {
  min-height: 44px;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.proxy-row,
.user-row,
.manual-job-row {
  min-height: 58px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom-color: var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: left;
}
.account-row {
  min-height: 58px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom-color: var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: center;
}
.account-row:hover,
.proxy-row:hover,
.user-row:hover,
.manual-job-row:hover {
  background: var(--color-row-hover);
}
.account-list-header,
.account-row {
  grid-template-columns: 24px minmax(168px, 1.2fr)
    minmax(64px, 0.7fr)
    64px
    64px
    minmax(96px, 1fr)
    minmax(84px, 0.7fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-5);
}
.chats-table .account-list-header,
.chats-table .account-row {
  grid-template-columns: 24px minmax(168px, 1.2fr) 64px 64px minmax(96px, 1fr) 64px 64px 64px 44px;
}
.chats-table .account-row.is-clickable {
  cursor: pointer;
}
.chats-table .account-row.is-clickable:hover {
  background: var(--color-subtle);
}
.chats-table .account-row.is-clickable:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
  border-radius: var(--radius-control);
}
.account-list-header,
.account-list-header .account-sort {
  text-align: center;
}
.account-sort {
  justify-content: center;
}
.account-row strong,
.account-bio,
.proxy-row code,
.user-row strong {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 600;
}
.proxy-list-header,
.proxy-row {
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) 112px 88px;
  padding-right: var(--space-5);
  padding-left: var(--space-5);
  text-align: left;
}
.proxy-provider-group + .proxy-provider-group {
  border-top: 1px solid var(--color-border);
}
.proxy-provider-heading {
  min-height: 40px;
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-subtle);
}
.proxy-provider-heading strong {
  text-align: left;
  font-size: 0.8125rem;
}
.user-list-header,
.user-row {
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(140px, 1fr) 88px;
  padding-right: var(--space-5);
  padding-left: var(--space-5);
  text-align: left;
}
.manual-job-list-header,
.manual-job-row {
  grid-template-columns: 72px minmax(180px, 1.5fr) minmax(120px, 1fr) minmax(110px, 0.8fr) 88px;
  padding-right: var(--space-5);
  padding-left: var(--space-5);
  text-align: left;
}
.proxy-status-cell {
  justify-content: flex-start;
}
.account-status-cell {
  justify-content: center;
}
.proxy-status,
.account-status {
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: 24px;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1;
}
.account-status {
  min-width: unset;
  white-space: nowrap;
}
.proxy-status::before,
.account-status::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentcolor;
  content: "";
}
.proxy-status::after {
  content: "Ошибка";
}
.proxy-status.is-working::after {
  content: "Работает";
}
.proxy-status.is-testing::after {
  content: "Проверка";
}
.account-status::after {
  content: "Заблокирован";
}
.account-status.is-live::after {
  content: "Живой";
}
.account-status.is-spamblock::after {
  content: "Спамблок";
}
.account-status.is-failed::after {
  content: "Ошибка";
}
.proxy-status,
.account-status.is-blocked,
.account-status.is-failed {
  background: var(--color-error-surface);
  color: var(--color-error);
}
.proxy-status.is-working,
.account-status.is-live {
  background: var(--color-success-surface);
  color: var(--color-success);
  box-shadow: none;
}
.proxy-status.is-testing {
  background: var(--color-focus);
  color: var(--color-accent);
  box-shadow: none;
}
.account-status.is-spamblock {
  background: var(--color-warning-border);
  color: var(--color-warning);
  box-shadow: none;
}
.account-status.is-blocked,
.account-status.is-failed,
.proxy-status.is-not-working {
  box-shadow: none;
}
.user-status {
  justify-self: start;
  padding: var(--space-1) var(--space-2);
  border-radius: 6px;
  background: var(--color-success-surface);
  color: var(--color-success);
  font-size: 0.75rem;
  font-weight: 650;
}
.user-status.is-inactive {
  background: var(--color-error-surface);
}
.manual-job-status {
  justify-self: start;
  padding: var(--space-1) var(--space-2);
  border-radius: 6px;
  background: var(--color-badge-neutral);
  color: var(--color-badge-neutral-text);
  font-size: 0.75rem;
  font-weight: 650;
}
.manual-job-status.is-completed {
  background: var(--color-success-surface);
  color: var(--color-success);
}
.manual-job-status.is-running,
.manual-job-status.is-pending {
  background: var(--color-focus);
  color: var(--color-accent);
}
.manual-job-status.is-failed {
  background: var(--color-error-surface);
  color: var(--color-error);
}
.proxy-actions,
.user-actions,
.manual-job-actions {
  justify-content: flex-end;
}
.account-actions {
  justify-content: center;
}
.retry-proxy-button,
.retry-account-button,
.delete-proxy-button,
.edit-user-button,
.delete-user-button,
.manual-job-icon {
  width: 32px;
  height: 32px;
  border-color: transparent;
  background: transparent;
}
.retry-proxy-button:hover,
.retry-account-button:hover,
.delete-proxy-button:hover,
.edit-user-button:hover,
.delete-user-button:hover,
.manual-job-icon:hover {
  background: var(--color-subtle-hover);
}
.account-toolbar {
  align-items: center;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
}
.account-geo-test {
  grid-template-areas: "label select button";
  grid-template-columns: auto minmax(180px, 220px) auto;
  align-items: center;
}
.account-geo-test label {
  align-self: center;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
.account-page-summary {
  padding: var(--space-5);
  background: var(--color-subtle);
}
.field {
  gap: var(--space-2);
}
.field label,
.manual-reaction-choice legend,
.manual-modules legend {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 600;
}
.field input,
.field select,
.field textarea,
.account-geo-test select {
  border-color: var(--color-input-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-control);
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.account-geo-test select:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus);
}
.primary-button,
.secondary-button,
.danger-button {
  min-height: 40px;
  font-size: 0.875rem;
  font-weight: 650;
}
.primary-button {
  box-shadow: var(--shadow-button-highlight), var(--shadow-control);
}
.secondary-button {
  border-color: var(--color-input-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-control);
  color: var(--color-text);
}
.manual-module-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.manual-module {
  padding: var(--space-4);
  background: var(--color-surface);
  box-shadow: var(--shadow-control);
}
.manual-module-toggle input {
  appearance: none;
  width: var(--space-5);
  height: var(--space-5);
  border: 1px solid var(--color-input-border);
  border-radius: 5px;
  background: var(--color-surface);
  box-shadow: var(--shadow-control);
}
.manual-module-toggle input:checked {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-surface);
}
.manual-module:hover {
  border-color: var(--color-input-border);
  background: var(--color-row-hover);
}
.manual-module.is-selected {
  border-color: var(--color-accent);
  background: var(--color-focus);
  box-shadow: 0 0 0 1px var(--color-accent);
}
.manual-module-settings,
.manual-composer-panel,
.manual-cart-group,
.manual-account-group {
  background: var(--color-subtle);
}
.modal {
  width: min(calc(100% - var(--space-8)), 640px);
}
.modal-wide {
  width: min(calc(100% - var(--space-8)), 820px);
}
.modal-panel {
  padding: var(--space-6);
  box-shadow: var(--shadow-floating);
}
.modal-header {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.modal-actions {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.proxy-empty {
  place-items: center;
  padding: 64px var(--space-7);
  text-align: center;
}
.workspace-view[data-view-panel="settings"] .content-card {
  min-height: 240px;
  place-content: center;
  text-align: center;
}
@media (max-width: 1040px) {
  .manual-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-table-scroll,
  .proxy-card,
  .user-card,
  .manual-job-table {
    overflow-x: auto;
  }
  .account-table {
    min-width: 980px;
  }
  .proxy-list-header,
  .proxy-provider-group,
  .user-list-header,
  .user-list,
  .manual-job-list-header,
  #manual-job-list {
    min-width: 720px;
  }
}
@media (max-width: 720px) {
  .workspace-header-with-action {
    align-items: flex-start;
  }
  .add-proxy-button,
  .add-account-button,
  .add-user-button {
    width: 100%;
  }
  .manual-module-grid,
  .manual-composer-grid {
    grid-template-columns: 1fr;
  }
  .account-geo-test {
    width: 100%;
    grid-template-areas: "label"
      "select"
      "button";
    grid-template-columns: 1fr;
    margin-left: 0;
  }
  .account-toolbar > .secondary-button,
  .account-geo-test .secondary-button {
    width: 100%;
    justify-content: center;
  }
  .modal-panel {
    padding: var(--space-5);
  }
  .sidebar-nav {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }
  .account-table-scroll {
    overflow: visible;
  }
  .account-table,
  .proxy-list-header,
  .proxy-provider-group,
  .user-list-header,
  .user-list,
  .manual-job-list-header,
  #manual-job-list {
    min-width: 0;
  }
  .account-list-header,
  .proxy-list-header,
  .user-list-header,
  .manual-job-list-header {
    display: none;
  }
  .proxy-row,
  .user-row,
  .manual-job-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-5);
  }
  .account-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-5);
    text-align: center;
  }
  .account-row > *,
  .proxy-row > *,
  .user-row > *,
  .manual-job-row > * {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
  }
  .account-row .account-bio,
  .account-row strong,
  .account-age,
  .account-row > span[data-label="Использован"] {
    white-space: normal;
  }
  .account-phone-block > strong {
    white-space: normal;
  }
  .proxy-row > .proxy-status-cell,
  .proxy-row > .proxy-actions,
  .user-row > .user-actions {
    justify-content: flex-start;
  }
  .account-row > .account-status-cell {
    justify-content: center;
  }
  .account-phone-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0 var(--space-3);
    align-items: center;
  }
  .account-phone-block > strong {
    grid-column: 1;
    grid-row: 1;
  }
  .account-phone-block > .account-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .manual-job-row > .manual-job-actions {
    display: flex;
    justify-content: flex-start;
  }
}

/* Force hide account action buttons with the HTML hidden attribute. */
.retry-account-button[hidden],
.check-spamblock-button[hidden],
.check-blocked-button[hidden],
.webchat-button[hidden] {
  display: none !important;
}

/* Accounts: compact dot status (matches styles.css) with the account age
   rendered under it, and a narrow checkbox column. This overrides the older
   badge rules above because it is last in source order. */
.account-status-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}
.account-status-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.account-status {
  display: block;
  width: 12px;
  height: 12px;
  margin: var(--space-1) 0;
  padding: 0;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-status);
  box-shadow: 0 0 0 var(--space-1) var(--color-border);
}
.account-status::before,
.account-status::after,
.account-status.is-live::after,
.account-status.is-spamblock::after,
.account-status.is-blocked::after,
.account-status.is-failed::after {
  content: none;
  width: 0;
  height: 0;
}
.account-status.is-live {
  background: var(--color-success);
  box-shadow: 0 0 0 var(--space-1) var(--color-success-border), 0 0 var(--space-3) var(--color-success);
}
.account-status.is-spamblock {
  background: var(--color-warning);
  box-shadow: 0 0 0 var(--space-1) var(--color-warning-border), 0 0 var(--space-3) var(--color-warning);
}
.account-status.is-blocked,
.account-status.is-failed {
  background: var(--color-error);
  box-shadow: 0 0 0 var(--space-1) var(--color-error-border), 0 0 var(--space-3) var(--color-error);
}
.account-age {
  font-size: 0.7rem;
}

/* --- per-account memberships popup (Чаты и каналы) --- */
.account-memberships-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: calc(100svh - var(--space-8));
  overflow: hidden;
}
.memberships-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.memberships-stat {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-subtle);
}
.memberships-stat-value {
  color: var(--color-text);
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.memberships-stat-label {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.memberships-list {
  display: grid;
  gap: var(--space-2);
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: var(--space-1);
}
.memberships-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}
.memberships-item.is-left {
  background: var(--color-subtle);
}
.memberships-item-main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
}
.memberships-item-title {
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memberships-item.is-left .memberships-item-title {
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.memberships-item-sub {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.memberships-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}
.memberships-leave-button {
  min-height: 36px;
  padding: 0 var(--space-4);
  font-size: 0.8125rem;
  white-space: nowrap;
  transition:
    color 150ms var(--ease-out),
    border-color 150ms var(--ease-out),
    background-color 150ms var(--ease-out);
}
.memberships-badge {
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.memberships-badge-channel {
  background: var(--color-soft-surface);
  color: var(--color-accent);
}
.memberships-badge-group {
  background: var(--color-badge-neutral);
  color: var(--color-badge-neutral-text);
}
.memberships-item-dates {
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.memberships-item-dates span[data-tip] {
  position: relative;
  cursor: help;
}
.memberships-item-dates span[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  background: var(--color-text);
  color: var(--color-on-dark);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--shadow-floating);
  opacity: 0;
  visibility: hidden;
  transition: opacity 100ms ease, visibility 100ms ease;
  transition-delay: 100ms;
  pointer-events: none;
  z-index: 20;
}
.memberships-item-dates span[data-tip]:hover::after,
.memberships-item-dates span[data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
.memberships-divider {
  margin: var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.memberships-empty {
  margin: var(--space-4) 0;
}
@media (max-width: 640px) {
  .memberships-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .memberships-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .memberships-item-meta {
    width: 100%;
    justify-content: space-between;
  }
}