/* [project]/src/app/(panel)/_components/business-service-picker.css [app-client] (css) */
.biz-service-picker {
  z-index: 80;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.biz-service-picker__backdrop {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
  background: #080c1273;
  border: 0;
  position: absolute;
  inset: 0;
}

.biz-service-picker__card {
  z-index: 1;
  background: #fff;
  border-radius: 18px;
  width: min(100%, 420px);
  max-height: min(80vh, 560px);
  padding: 22px 20px 18px;
  position: relative;
  overflow: auto;
  box-shadow: 0 24px 60px #0f172a38;
}

.biz-service-picker__card h2 {
  color: #0f172a;
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
}

.biz-service-picker__card > p {
  color: #64748b;
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
}

.biz-service-picker__error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
  margin: 0 0 12px !important;
}

.biz-service-picker__hint {
  color: #64748b;
  font-size: 13px;
  margin: 0 0 12px !important;
}

.biz-service-picker__empty {
  gap: 12px;
  margin-bottom: 12px;
  display: grid;
}

.biz-service-picker__list {
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
}

.biz-service-picker__list button {
  text-align: start;
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: inherit;
  background: #f7f8fa;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  gap: 4px;
  padding: 12px 14px;
  transition: border-color .15s, background .15s;
  display: grid;
}

.biz-service-picker__list button:hover {
  background: #eef6ff;
  border-color: #1a274466;
}

.biz-service-picker__list strong {
  color: #0f172a;
  font-size: 14.5px;
  font-weight: 800;
}

.biz-service-picker__list span {
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.45;
}

.biz-service-picker__primary, .biz-service-picker__cancel {
  width: 100%;
  min-height: 42px;
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 700;
}

.biz-service-picker__primary {
  color: #fff;
  background: #1a2744;
}

.biz-service-picker__cancel {
  color: #334155;
  background: #f1f5f9;
}

.biz-service-picker__cancel:hover {
  background: #e2e8f0;
}

/* [project]/src/app/(panel)/_styles/panel-shell.css [app-client] (css) */
:root {
  --panel-primary: #1a2744;
  --panel-primary-hover: #243556;
  --panel-primary-soft: #eef1f5;
  --primary: var(--panel-primary);
  --primary-hover: var(--panel-primary-hover);
  --primary-soft: var(--panel-primary-soft);
  --panel-text: #222;
  --panel-muted: #707579;
  --panel-line: #dfe3e8;
  --panel-card: #fff;
  --panel-bg: #e8eef3;
  --panel-sidebar: #17212b;
  --panel-logo-gradient: linear-gradient(160deg, #4f5d75 0%, #334155 100%);
}

:is(html:has(.panel-app), body:has(.panel-app)) {
  background: var(--panel-bg, #e8eef3);
  color: #1c2430;
}

.panel-app {
  background-color: var(--panel-bg);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 100dvh;
  color: var(--panel-text);
  font-family: YekanBakh, var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
  background-image: none;
  flex-direction: row;
  display: flex;
  overflow-x: clip;
}

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

.panel-app[dir="rtl"] {
  direction: rtl;
}

.panel-app[dir="ltr"] {
  direction: ltr;
}

.panel-shell {
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  display: flex;
}

.panel-shell__body {
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 24px 32px 40px;
}

.panel-topbar {
  z-index: 35;
  background: var(--panel-sidebar);
  color: #e8edf2;
  border-bottom: 1px solid #ffffff0f;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 8px 24px;
  display: flex;
  position: sticky;
  top: 0;
  box-shadow: 0 1px #0000002e;
}

.panel-app .leaflet-container, .panel-app .aup-leads-map, .panel-app .aup-leads-results-map {
  isolation: isolate;
  z-index: 0;
}

.panel-topbar__start {
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.panel-topbar__menu {
  color: #e8edf2;
  cursor: pointer;
  background: #ffffff14;
  border: 0;
  border-radius: 10px;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  display: none;
}

.panel-topbar__menu:hover {
  color: #fff;
  background: #ffffff24;
}

.panel-topbar__menu svg {
  width: 22px;
  height: 22px;
}

.panel-topbar__identity {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.panel-topbar__page {
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
}

.panel-topbar__phone {
  color: #9fb0c0;
  font-size: 12px;
  font-weight: 600;
}

.panel-topbar__chips {
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-inline-start: auto;
  display: inline-flex;
}

.panel-topbar__chip {
  color: #dbe5f0;
  white-space: nowrap;
  background: #ffffff0f;
  border: 1px solid #ffffff1a;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 6px;
  font-size: 10px;
  line-height: 1;
  text-decoration: none;
  transition: background .12s, border-color .12s;
  display: inline-flex;
}

.panel-topbar__chip:hover {
  background: #ffffff1a;
  border-color: #ffffff29;
}

.panel-topbar__chip strong {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.panel-topbar__chip-label {
  color: #8fa3b5;
  font-size: 9px;
  font-weight: 600;
}

.panel-topbar__chip-meta {
  color: #b8c5d3;
  font-size: 9px;
  font-weight: 600;
}

.panel-topbar__chip--ok {
  background: #5eb3f61a;
  border-color: #5eb3f647;
}

.panel-topbar__chip--warn {
  background: #fbbf241a;
  border-color: #fbbf2452;
}

.panel-topbar__chip--danger {
  background: #f871711a;
  border-color: #f8717152;
}

.panel-topbar__chip--ai {
  background: #5eb3f614;
  border-color: #5eb3f63d;
}

.panel-topbar__chip--ai:hover {
  background: #5eb3f624;
  border-color: #5eb3f666;
}

@media (min-width: 1025px) {
  .panel-topbar__page {
    display: none;
  }
}

.panel-sidebar-backdrop {
  z-index: 40;
  pointer-events: none;
  background: #080c1273;
  display: none;
  position: fixed;
  inset: 0;
}

.panel-sidebar-backdrop.is-visible {
  pointer-events: auto;
  display: block;
}

.panel-sidebar {
  --panel-sidebar-width: 260px;
  top: 0;
  bottom: 0;
  z-index: 50;
  width: var(--panel-sidebar-width);
  background: var(--panel-sidebar);
  color: #e8edf2;
  border-inline-start: 0;
  border-inline-end: 1px solid #ffffff0d;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  position: fixed;
  inset-inline-start: 0;
  overflow: hidden;
}

.panel-sidebar-spacer {
  flex: 0 0 var(--panel-sidebar-width, 260px);
  width: var(--panel-sidebar-width, 260px);
  min-width: var(--panel-sidebar-width, 260px);
  max-width: var(--panel-sidebar-width, 260px);
  pointer-events: none;
  visibility: hidden;
}

.panel-sidebar-brand {
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 20px 18px 14px;
  display: flex;
}

.panel-sidebar-close {
  color: #c5d4e0;
  cursor: pointer;
  background: #ffffff14;
  border: 0;
  border-radius: 10px;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-inline-start: auto;
  display: none;
}

.panel-sidebar-close svg {
  width: 18px;
  height: 18px;
}

.panel-sidebar-close:hover {
  color: #fff;
  background: #ffffff24;
}

.panel-sidebar-brand-logo {
  flex-shrink: 0;
}

.panel-sidebar-brand-text {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.panel-sidebar-brand-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.panel-sidebar-brand-subtitle {
  color: #7b8f9f;
  font-size: 12px;
}

.panel-sidebar-nav {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  padding-inline: 8px;
  display: flex;
  overflow: hidden auto;
}

.panel-sidebar-section-label {
  color: #5f7385;
  margin: 0 12px 4px;
  padding-top: 12px;
  font-size: 11px;
  font-weight: 600;
}

.panel-sidebar-section-label:first-child {
  padding-top: 4px;
}

.panel-sidebar-link {
  color: #8fa3b5;
  text-align: start;
  width: 100%;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  text-decoration: none;
  transition: color .12s;
  display: flex;
  position: relative;
}

button.panel-sidebar-link {
  appearance: none;
}

.panel-sidebar-link:after {
  content: "";
  top: 50%;
  background: #5eb3f6;
  border-start-start-radius: 2px;
  border-end-start-radius: 2px;
  width: 0;
  height: 18px;
  transition: width .15s;
  position: absolute;
  inset-inline-start: 0;
  transform: translateY(-50%);
}

.panel-sidebar-link:hover {
  color: #d5e0ea;
}

.panel-sidebar-link.is-active {
  color: #fff;
}

.panel-sidebar-link.is-active:after {
  width: 3px;
}

.panel-sidebar-link-icon {
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  display: grid;
}

.panel-sidebar-link-icon svg {
  width: 100%;
  height: 100%;
}

.panel-sidebar-link.is-active .panel-sidebar-link-icon {
  color: #6eb8ff;
}

.panel-sidebar-link-text {
  flex: 1;
  gap: 0;
  min-width: 0;
  display: grid;
}

.panel-sidebar-link-text strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.panel-sidebar-link-text small {
  color: #5f7385;
  font-size: 11px;
  line-height: 1.35;
}

.panel-sidebar-link.is-active .panel-sidebar-link-text small {
  color: #7b95ab;
}

.panel-sidebar-link.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

.panel-sidebar-back-btn {
  color: #ffffffd1;
  width: calc(100% - 16px);
  font: inherit;
  cursor: pointer;
  background: #ffffff0a;
  border: none;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  margin: 4px 8px 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
  display: flex;
}

.panel-sidebar-back-btn:hover {
  color: #fff;
  background: #ffffff14;
}

.panel-sidebar-back-btn__icon {
  opacity: .85;
  font-size: 18px;
  line-height: 1;
}

.panel-sidebar-account-row {
  align-items: center;
  gap: 12px;
  padding: 2px 12px 8px;
  display: flex;
}

.panel-sidebar-account-avatar {
  color: #fff;
  direction: ltr;
  background: linear-gradient(145deg, #243556 0%, #1a2744 100%);
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.panel-sidebar-account-avatar--instagram {
  background: #e03a6a;
  border: 1px solid #e03a6a;
  box-shadow: 0 2px 8px #e03a6a47;
}

.panel-sidebar-account-info {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.panel-sidebar-account-info strong {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.panel-sidebar-status {
  color: #7b8f9f;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
}

.panel-sidebar-status--online {
  color: #6ee7a0;
}

.panel-sidebar-status--offline {
  color: #fca5a5;
}

.panel-sidebar-status--offline .panel-sidebar-status-dot {
  background: #f87171;
}

.panel-sidebar-reconnect {
  color: #fecaca;
  background: #f871711f;
  border: 1px solid #f8717147;
  border-radius: 10px;
  margin: 8px 10px 4px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  display: block;
}

.panel-sidebar-reconnect:hover {
  background: #f871712e;
}

.panel-sidebar-reconnect small {
  opacity: .9;
  margin-top: 4px;
  font-weight: 500;
  display: block;
}

.account-badge.disconnected, .account-list--cards .account-card--telegram .account-badge.disconnected {
  color: #dc2626;
  background: #fef2f2;
}

.telegram-reconnect-banner {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  display: flex;
}

.telegram-reconnect-banner p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.telegram-reconnect-banner a {
  color: #fff;
  white-space: nowrap;
  background: #dc2626;
  border-radius: 10px;
  align-items: center;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.telegram-reconnect-banner a:hover {
  background: #b91c1c;
}

.panel-sidebar-status--instagram {
  color: #f9a8c9;
}

.panel-sidebar-status-dot {
  background: #64748b;
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
}

.panel-sidebar-status--online .panel-sidebar-status-dot, .panel-sidebar-status--instagram .panel-sidebar-status-dot {
  background: #4ade80;
}

.panel-sidebar-status--instagram .panel-sidebar-status-dot {
  background: #e03a6a;
}

.panel-sidebar-nav-group {
  flex-direction: column;
  display: flex;
}

.panel-sidebar-bottom {
  background: var(--panel-sidebar);
  border-top: 1px solid #ffffff0f;
  flex-direction: column;
  flex: none;
  display: flex;
}

.panel-sidebar-admin {
  flex-shrink: 0;
  padding: 8px 8px 4px;
}

.panel-app--admin-mode {
  background: #fff;
}

.panel-shell--admin-full {
  min-height: 100vh;
  padding: 0;
}

.panel-shell--admin-full .admin-app {
  min-height: 100vh;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  margin: 0;
}

.panel-sidebar-footer {
  flex-shrink: 0;
  padding: 4px 8px 16px;
}

.panel-sidebar-admin + .panel-sidebar-footer {
  padding-top: 0;
}

.panel-sidebar-logout {
  color: #7b8f9f;
  width: 100%;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color .12s;
  display: inline-flex;
}

.panel-sidebar-logout:hover {
  color: #e57373;
}

.panel-sidebar-logout svg {
  width: 18px;
  height: 18px;
}

.panel-mobile-header {
  align-items: center;
  gap: 12px;
  display: none;
}

.panel-mobile-header__text {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.panel-mobile-menu-toggle {
  color: #e8edf2;
  width: 42px;
  height: 42px;
  box-shadow: none;
  cursor: pointer;
  background: #ffffff14;
  border: 0;
  border-radius: 12px;
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.panel-mobile-menu-toggle:hover {
  color: #fff;
  background: #ffffff24;
}

.panel-mobile-menu-toggle svg {
  width: 22px;
  height: 22px;
}

.panel-mobile-header-title {
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
}

.panel-mobile-header-brand {
  color: #7b8f9f;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
}

html.panel-sidebar-open, body.panel-sidebar-open {
  overflow: hidden;
}

.accounts-page {
  width: 100%;
}

.accounts-panel {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 1px 3px #0f172a0f, 0 8px 24px #0f172a0a;
}

.accounts-header {
  background: radial-gradient(circle at 100% 0, #1a27441a, #0000 46%), linear-gradient(#f7f8fa 0%, #fff 100%);
  border-bottom: 1px solid #e8f0f8;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  display: flex;
}

.accounts-header > div:first-child {
  flex: 0 auto;
  gap: 6px;
  min-width: 0;
  max-width: min(100%, 42rem);
  display: grid;
}

.accounts-header h1 {
  color: #111;
  letter-spacing: -.02em;
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.25;
}

.accounts-header p {
  color: #5f6b76;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.accounts-add {
  color: #1a2744;
  min-height: 38px;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  background: #c9a227;
  border: 0;
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  box-shadow: 0 4px 12px #c9a22747;
}

.accounts-add:hover:not(:disabled) {
  background: #b48e16;
}

.accounts-add:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.accounts-add--center {
  margin-top: 4px;
}

.accounts-add--instagram {
  color: #1a2744;
  background: #c9a227;
  border: 0;
  box-shadow: 0 4px 12px #c9a22747;
}

.accounts-add--instagram:hover:not(:disabled) {
  background: #b48e16;
}

.accounts-add--whatsapp {
  background: #25d366;
  border: 1px solid #1ebe5d;
  box-shadow: 0 4px 12px #25d36638;
}

.accounts-add--whatsapp:hover:not(:disabled) {
  background: #1ebe5d;
}

.accounts-section-actions {
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  display: flex;
}

.account-list {
  display: grid;
}

.account-list--cards {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 14px 16px 18px;
}

@media (min-width: 901px) {
  .account-list--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

.account-list--cards .account-card {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 14px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  padding: 14px 14px 0;
  overflow: hidden;
  box-shadow: 0 1px 2px #0f172a0a;
}

.account-list--cards .account-card:hover:not(:disabled) {
  border-color: #d7e6f7;
  box-shadow: 0 6px 18px #1a27441a;
}

.account-list--cards .account-card--instagram:hover:not(:disabled) {
  border-color: #f5c4d6;
  box-shadow: 0 6px 18px #e03a6a1a;
}

.account-list--cards .account-card--pending:hover:not(:disabled) {
  border-color: #fde68a;
  box-shadow: 0 6px 18px #f59e0b1a;
}

.account-list--cards .account-card:active:not(:disabled) {
  transform: scale(.995);
}

.account-list--cards .account-card__top {
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.account-list--cards .account-card__identity {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.account-list--cards .account-card__title-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.account-list--cards .account-card__title-row strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
}

.account-list--cards .account-card__sub {
  color: #64748b;
  font-size: 13px;
  line-height: 1.3;
}

.account-list--cards .account-card__meta {
  color: #94a3b8;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
}

.account-list--cards .account-card--static {
  cursor: default;
}

.account-list--cards .account-card__main {
  width: 100%;
  text-align: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: block;
}

.account-list--cards .account-card__open {
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 0;
  display: inline-flex;
}

.account-card__delete {
  color: #dc2626;
  cursor: pointer;
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-radius: 8px;
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

.account-card__delete:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
}

.account-card__delete:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.account-list--cards .account-card__footer {
  margin-top: 12px;
  color: var(--panel-primary);
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-inline: -14px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.account-list--cards .account-card--instagram .account-card__footer {
  color: #c13584;
}

.account-list--cards .account-card--pending .account-card__footer {
  color: #b45309;
}

.account-list--cards .account-card--whatsapp .account-card__footer {
  color: #128c41;
}

.account-list--cards .account-card__footer--muted {
  color: #94a3b8;
  font-weight: 500;
}

.account-card__link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.account-card__link:hover {
  text-decoration: underline;
}

.account-list--cards .account-card:hover:not(:disabled) .account-card__footer {
  background: #eef1f5;
}

.account-list--cards .account-card--instagram:hover:not(:disabled) .account-card__footer {
  background: #fff5f9;
}

.account-list--cards .account-card--pending:hover:not(:disabled) .account-card__footer {
  background: #fffbeb;
}

.account-list--cards .account-avatar {
  width: 48px;
  height: 48px;
  font-size: 15px;
}

.account-list--cards .account-badge {
  border-radius: 999px;
  flex-shrink: 0;
  padding: 4px 9px;
  font-size: 11px;
}

.account-list--cards .account-card__footer .account-card__chevron {
  color: currentColor;
  opacity: .85;
  place-items: center;
  width: 18px;
  height: 18px;
  display: grid;
}

.account-card {
  width: 100%;
  color: var(--panel-text);
  text-align: start;
  cursor: pointer;
  font: inherit;
  background: #fff;
  border: 1.5px solid #e8edf2;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  text-decoration: none;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .12s;
  display: flex;
  box-shadow: 0 1px 2px #0f172a0a;
}

.account-card:hover:not(:disabled) {
  background: #f7f8fa;
  border-color: #c5ccd8;
  box-shadow: 0 4px 16px #1a27441a;
}

.account-card:active:not(:disabled) {
  transform: scale(.99);
}

.account-card--pending:hover:not(:disabled) {
  background: #fffbeb;
  border-color: #fcd34d;
  box-shadow: 0 4px 16px #f59e0b1a;
}

.account-card--telegram:hover:not(:disabled) {
  border-color: #b8d9f8;
}

.account-card--whatsapp {
  border-color: #d1fae5;
}

.account-card--instagram {
  border-color: #fbd0df;
}

.account-card--instagram:hover:not(:disabled) {
  background: #fff8fb;
  border-color: #f5a3c0;
  box-shadow: 0 4px 16px #e03a6a1a;
}

.account-card--instagram .account-card__cta {
  color: #c13584;
}

.account-card--static {
  cursor: default;
}

.account-card--disabled {
  opacity: .88;
}

.account-card__main {
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.account-card__action {
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 6px;
  display: flex;
}

.account-card__cta {
  color: var(--panel-primary);
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.account-card--pending .account-card__cta {
  color: #b45309;
}

.account-card__cta--muted {
  color: #94a3b8;
  font-weight: 600;
}

.account-card__chevron {
  color: currentColor;
  place-items: center;
  width: 18px;
  height: 18px;
  display: grid;
}

.account-card__chevron svg {
  width: 16px;
  height: 16px;
}

.panel-app[dir="rtl"] .account-card__chevron svg {
  transform: scaleX(-1);
}

.account-avatar--whatsapp {
  background: linear-gradient(145deg, #4ade80 0%, #25d366 100%);
  font-size: 13px;
}

.account-row {
  width: 100%;
  color: var(--panel-text);
  text-align: right;
  cursor: pointer;
  font: inherit;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #f0f2f5;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  text-decoration: none;
  transition: background .12s;
  display: grid;
}

.account-row:last-child {
  border-bottom: 0;
}

.account-row:hover:not(:disabled) {
  background: #f4f8fc;
}

.account-row.pending {
  opacity: .85;
}

.account-avatar {
  color: #fff;
  direction: ltr;
  background: linear-gradient(145deg, #243556 0%, #1a2744 100%);
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 15px;
  font-weight: 700;
  display: grid;
}

.account-avatar--photo {
  object-fit: cover;
  background: #e8edf2;
}

.account-avatar--sm {
  width: 34px;
  height: 34px;
  font-size: 11px;
}

.panel-sidebar-account-avatar.account-avatar--photo {
  width: 34px;
  height: 34px;
}

.account-avatar--instagram {
  background: #e03a6a;
  border: 1px solid #e03a6a;
  font-size: 13px;
}

.account-info {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.account-info strong {
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

.account-info span {
  color: #8b959e;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.account-badge {
  color: #8b959e;
  background: #f0f2f5;
  border-radius: 8px;
  flex-shrink: 0;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
}

.account-badge.connected {
  color: var(--panel-primary);
  background: #eef1f5;
}

.account-badge--instagram.connected {
  color: #c13584;
  background: #fce8ef;
}

.account-badge--whatsapp.connected {
  color: #128c41;
  background: #e8f8ee;
}

.account-list--cards .account-card--telegram .account-badge.connected {
  color: #2b7cd3;
  background: #eef1f5;
}

.account-list--cards .account-card--instagram .account-badge.connected {
  color: #c13584;
  background: #fce8ef;
}

.account-list--cards .account-card--whatsapp .account-badge.connected {
  color: #128c41;
  background: #e8f8ee;
}

.accounts-empty {
  text-align: center;
  justify-items: center;
  gap: 10px;
  padding: 48px 24px 40px;
  display: grid;
}

.accounts-empty p {
  color: #8b959e;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.whatsapp-coming-soon {
  text-align: center;
  padding: 32px 24px 40px;
}

.whatsapp-coming-soon-badge {
  color: #128c41;
  background: #e8f8ee;
  border: 1px solid #b8e6c8;
  border-radius: 50%;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  font-size: 14px;
  font-weight: 700;
  display: inline-grid;
}

.whatsapp-coming-soon p {
  max-width: 420px;
  color: var(--panel-muted);
  margin: 0 auto 16px;
  line-height: 1.6;
}

.whatsapp-coming-soon-tag {
  color: #128c41;
  background: #e8f8ee;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.accounts-form-panel {
  border-top: 1px solid #f0f2f5;
  padding: 20px;
}

.accounts-form-panel h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.accounts-form-panel p {
  color: #8b959e;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
}

.accounts-form-panel label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.accounts-form-panel input:not(.phone-field__input):not(.country-modal__search) {
  width: 100%;
  min-height: 44px;
  font: inherit;
  border: 1px solid #d8dee3;
  border-radius: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  font-size: 14px;
}

.accounts-form-panel input:not(.phone-field__input):not(.country-modal__search):focus {
  border-color: #93c5fd;
  outline: none;
  box-shadow: 0 0 0 3px #1a27441f;
}

.accounts-form-actions {
  gap: 8px;
  display: grid;
}

.accounts-form-secondary {
  min-height: 44px;
  color: var(--panel-text);
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8dee3;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.accounts-form-secondary:hover:not(:disabled) {
  background: #f4f6f8;
}

.panel-notice {
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
}

.panel-notice--success {
  color: #067647;
  background: #ecfdf3;
  border: 1px solid #abefc6;
}

.panel-notice--error {
  color: #b42318;
  background: #fff1f0;
  border: 1px solid #fecdca;
}

.panel-notice--warn {
  color: #b54708;
  background: #fffaeb;
  border: 1px solid #fedf89;
}

.account-limit-modal {
  --alc-ink: #1a2744;
  --alc-muted: #7d8796;
  --alc-gold: #c9a227;
  --alc-line: #e8ecf1;
  --alc-wash: #f7f8fa;
  z-index: 80;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #0f172a7a;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.account-limit-modal__dialog {
  border: 1px solid var(--alc-line);
  width: min(100%, 420px);
  color: var(--alc-ink);
  background: #fff;
  border-radius: 18px;
  gap: 18px;
  padding: 22px 20px 18px;
  display: grid;
  box-shadow: 0 24px 48px #0f172a2e;
}

.account-limit-modal__head {
  gap: 8px;
  display: grid;
}

.account-limit-modal__kicker {
  letter-spacing: .04em;
  color: #8a7018;
  background: #f6f1df;
  border-radius: 6px;
  width: fit-content;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
}

.account-limit-modal__head h2 {
  letter-spacing: -.02em;
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.account-limit-modal__head p {
  color: var(--alc-muted);
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
}

.account-limit-modal__usage {
  background: var(--alc-wash);
  border: 1px solid var(--alc-line);
  border-radius: 12px;
  gap: 8px;
  padding: 14px;
  display: grid;
}

.account-limit-modal__usage-meta {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.account-limit-modal__usage-meta span {
  color: var(--alc-muted);
  font-size: 12px;
  font-weight: 600;
}

.account-limit-modal__usage-meta b {
  color: var(--alc-ink);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 800;
}

.account-limit-modal__usage-meta b i {
  color: #b0b8c4;
  margin: 0 3px;
  font-style: normal;
  font-weight: 600;
}

.account-limit-modal__meter {
  height: 8px;
  box-shadow: inset 0 0 0 1px var(--alc-line);
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
}

.account-limit-modal__meter span {
  border-radius: inherit;
  background: var(--alc-gold);
  height: 100%;
  display: block;
}

.account-limit-modal__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.account-limit-modal__ghost, .account-limit-modal__cta {
  cursor: pointer;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.account-limit-modal__ghost {
  border: 1px solid var(--alc-line);
  color: var(--alc-ink);
  background: #fff;
}

.account-limit-modal__ghost:hover {
  background: var(--alc-wash);
}

.account-limit-modal__cta {
  background: var(--alc-ink);
  color: #fff;
  border: 0;
}

.account-limit-modal__cta:hover {
  background: #243556;
}

@media (max-width: 480px) {
  .account-limit-modal__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .account-limit-modal__ghost, .account-limit-modal__cta {
    width: 100%;
  }
}

.accounts-connect-help {
  color: var(--panel-muted);
  margin: 0 16px 14px;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .panel-sidebar-backdrop {
    z-index: 1200;
    display: none;
  }

  .panel-sidebar-backdrop.is-visible {
    display: block;
    position: fixed;
    inset: 0;
  }

  .panel-app {
    background-image: none;
    background-color: var(--panel-bg);
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    overflow-x: clip;
  }

  .panel-sidebar {
    inset: 0 0 0 auto;
    z-index: 1300;
    visibility: hidden;
    pointer-events: none;
    width: min(300px, 88vw);
    max-width: 300px;
    height: auto;
    max-height: none;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s;
    position: fixed;
    inset-inline-start: auto;
  }

  .panel-sidebar-spacer {
    display: none;
  }

  .panel-app[dir="rtl"] .panel-sidebar {
    left: auto;
    right: 0;
    transform: translate3d(105%, 0, 0);
    box-shadow: -12px 0 40px #00000059;
  }

  .panel-app[dir="rtl"] .panel-sidebar.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), visibility;
    transform: translate3d(0, 0, 0);
  }

  .panel-app[dir="ltr"] .panel-sidebar {
    left: 0;
    right: auto;
    transform: translate3d(-105%, 0, 0);
    box-shadow: 12px 0 40px #00000059;
  }

  .panel-app[dir="ltr"] .panel-sidebar.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), visibility;
    transform: translate3d(0, 0, 0);
  }

  .admin-app[dir="rtl"] .panel-sidebar {
    left: auto;
    right: 0;
    transform: translate3d(105%, 0, 0);
    box-shadow: -12px 0 40px #00000059;
  }

  .admin-app[dir="rtl"] .panel-sidebar.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), visibility;
    transform: translate3d(0, 0, 0);
  }

  .admin-app[dir="ltr"] .panel-sidebar {
    left: 0;
    right: auto;
    transform: translate3d(-105%, 0, 0);
    box-shadow: 12px 0 40px #00000059;
  }

  .admin-app[dir="ltr"] .panel-sidebar.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), visibility;
    transform: translate3d(0, 0, 0);
  }

  .admin-app--panel-shell {
    background-image: none;
    background-color: var(--panel-bg, #e8eef3);
  }

  .admin-app--panel-shell .admin-main {
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
  }

  .panel-sidebar-close {
    display: grid;
  }

  .panel-shell {
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .panel-shell:not(.panel-shell--admin-full) {
    padding-top: var(--panel-mobile-header-h, calc(70px + env(safe-area-inset-top, 0px)));
  }

  .panel-shell__body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: var(--panel-mobile-content-gap, 14px) var(--panel-mobile-gutter, 12px) 28px;
  }

  .panel-topbar {
    z-index: 1100;
    width: 100%;
    max-width: 100%;
    padding: env(safe-area-inset-top, 0px)
      var(--panel-mobile-gutter, 12px)
      4px;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .panel-app[dir="rtl"] .panel-topbar {
    padding-inline-start: var(--panel-mobile-gutter, 12px);
    padding-inline-end: var(--panel-mobile-gutter, 12px);
  }

  .panel-topbar__chip-label {
    display: none;
  }

  .panel-topbar__menu {
    display: grid;
  }

  .panel-topbar__chips {
    max-width: 100%;
  }

  .panel-mobile-header {
    display: none;
  }

  .accounts-page, .accounts-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .accounts-header {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .accounts-section-actions {
    width: 100%;
    margin-inline-start: 0;
  }

  .accounts-add {
    width: 100%;
  }

  .account-list--cards {
    gap: 10px;
    padding: 12px;
  }

  .account-list--cards .account-card {
    padding: 12px 12px 0;
  }

  .account-list--cards .account-card__footer {
    margin-inline: -12px;
    padding: 9px 12px;
  }

  .account-card {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  .account-card__action {
    border-top: 1px solid #f0f2f5;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 2px;
    padding-top: 10px;
  }

  .account-row {
    grid-template-columns: auto 1fr;
    padding: 14px 16px;
  }

  .account-badge {
    grid-column: 2;
    justify-self: start;
    margin-top: -2px;
  }
}

.wa-connect {
  background: radial-gradient(70% 50% at 0 0, #1a27441a, #0000 55%), radial-gradient(55% 45% at 100% 0, #1a27440f, #0000 50%), linear-gradient(#f7f8fa 0%, #fff 42%);
  gap: 22px;
  padding: 24px;
  animation: .45s both wa-connect-in;
  display: grid;
}

@keyframes wa-connect-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.wa-connect__hero {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 24px;
  display: flex;
}

.wa-connect__hero-copy {
  flex: 280px;
  gap: 10px;
  min-width: 0;
  max-width: 40rem;
  display: grid;
}

.wa-connect__eyebrow {
  width: fit-content;
  color: var(--panel-primary);
  letter-spacing: .02em;
  background: #fff;
  border: 1px solid #cfe5fb;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  box-shadow: 0 2px 8px #1a27441a;
}

.wa-connect__eyebrow svg {
  color: var(--panel-primary);
  flex-shrink: 0;
}

.wa-connect__hero-copy h2 {
  letter-spacing: -.02em;
  color: #0f172a;
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
}

.wa-connect__hero-copy > p {
  color: #64748b;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
}

.wa-connect__steps {
  counter-reset: wa-step;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.wa-connect__steps li {
  counter-increment: wa-step;
  color: #334155;
  background: #ffffffd9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  display: inline-flex;
}

.wa-connect__steps li:before {
  content: counter(wa-step);
  color: #fff;
  background: linear-gradient(145deg, #243556 0%, #1a2744 100%);
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.wa-connect__status {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid #0000;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
}

.wa-connect__status strong {
  font-weight: 700;
}

.wa-connect__status-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.wa-connect__status--pending {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

.wa-connect__status--pending .wa-connect__status-dot {
  background: #f59e0b;
  animation: 1.6s infinite wa-status-pulse;
  box-shadow: 0 0 #f59e0b73;
}

.wa-connect__status--connected {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.wa-connect__status--connected .wa-connect__status-dot {
  background: #10b981;
}

.wa-connect__status--failed {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}

.wa-connect__status--failed .wa-connect__status-dot {
  background: #ef4444;
}

@keyframes wa-status-pulse {
  0% {
    box-shadow: 0 0 #f59e0b73;
  }

  70% {
    box-shadow: 0 0 0 8px #f59e0b00;
  }

  100% {
    box-shadow: 0 0 #f59e0b00;
  }
}

@keyframes wa-brand-pulse {
  0% {
    box-shadow: 0 0 #1a274473;
  }

  70% {
    box-shadow: 0 0 0 8px #1a274400;
  }

  100% {
    box-shadow: 0 0 #1a274400;
  }
}

.wa-connect__grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: stretch;
  gap: 16px;
  display: grid;
}

.wa-connect__card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  flex-direction: column;
  min-width: 0;
  animation: .5s both wa-card-in;
  display: flex;
  box-shadow: 0 1px 2px #0f172a0a, 0 10px 28px #0f172a0a;
}

.wa-connect__card--qr {
  background: linear-gradient(#e7f3ffe6 0%, #fff 48%), #fff;
  border-color: #cfe5fb;
  align-items: center;
  gap: 14px;
  padding: 28px 20px 22px;
  animation-delay: 60ms;
}

.wa-connect__card--pair {
  gap: 10px;
  padding: 22px 20px;
  animation-delay: .12s;
}

@keyframes wa-card-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.wa-connect__qr-frame {
  background: #fff;
  border: 1px solid #d6e8fa;
  border-radius: 20px;
  place-items: center;
  padding: 14px;
  display: grid;
  position: relative;
  box-shadow: 0 0 0 6px #1a27440f, 0 12px 32px #1a27441f;
}

.wa-connect__qr-frame:before, .wa-connect__qr-frame:after {
  content: "";
  border: 2.5px solid var(--panel-primary);
  pointer-events: none;
  width: 28px;
  height: 28px;
  position: absolute;
}

.wa-connect__qr-frame:before {
  top: 8px;
  border-inline-end: 0;
  border-bottom: 0;
  border-start-start-radius: 10px;
  inset-inline-start: 8px;
}

.wa-connect__qr-frame:after {
  bottom: 8px;
  border-inline-start: 0;
  border-top: 0;
  border-end-end-radius: 10px;
  inset-inline-end: 8px;
}

.wa-connect__qr-image {
  background: #fff;
  border-radius: 12px;
  width: 220px;
  height: 220px;
  animation: .4s both wa-qr-fade;
  display: block;
}

@keyframes wa-qr-fade {
  from {
    opacity: 0;
    transform: scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.wa-connect__qr-placeholder {
  background: var(--panel-primary-soft);
  width: 220px;
  height: 220px;
  color: var(--panel-primary);
  border-radius: 12px;
  place-content: center;
  justify-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  display: grid;
}

.wa-connect__spinner {
  border: 2.5px solid #cfe5fb;
  border-top-color: var(--panel-primary);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: .8s linear infinite wa-spin;
}

@keyframes wa-spin {
  to {
    transform: rotate(360deg);
  }
}

.wa-connect__waiting {
  color: #64748b;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.wa-connect__pulse {
  background: var(--panel-primary);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: 1.5s infinite wa-brand-pulse;
  box-shadow: 0 0 #1a274473;
}

.wa-connect__refresh {
  min-height: 40px;
  color: var(--panel-primary);
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #cfe5fb;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, border-color .15s, transform .15s;
  display: inline-flex;
}

.wa-connect__refresh:hover:not(:disabled) {
  background: var(--panel-primary-soft);
  border-color: #93c5fd;
}

.wa-connect__refresh:active:not(:disabled) {
  transform: scale(.98);
}

.wa-connect__back {
  color: #0f172a;
  box-shadow: none;
  background: #f8fafc;
  border-radius: 10px;
  min-height: 38px;
  padding: 8px 14px;
}

.wa-connect__pair-head {
  gap: 8px;
  margin-bottom: 6px;
  display: grid;
}

.wa-connect__pair-badge {
  color: #475569;
  letter-spacing: .01em;
  background: #f1f5f9;
  border-radius: 999px;
  width: fit-content;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.wa-connect__pair-head h3 {
  color: #0f172a;
  letter-spacing: -.01em;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.wa-connect__pair-head p {
  color: #64748b;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.wa-connect__card--pair label {
  color: #334155;
  margin-top: 4px;
  margin-bottom: 6px;
}

.wa-connect__pair-submit {
  border-radius: 12px;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
}

.wa-connect__code {
  background: linear-gradient(#eef1f5 0%, #f7f8fa 100%);
  border: 1px dashed #93c5fd;
  border-radius: 14px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 18px 16px;
  animation: .35s both wa-code-in;
  display: flex;
}

@keyframes wa-code-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.wa-connect__code span {
  color: #64748b;
  font-size: .8rem;
  font-weight: 600;
}

.wa-connect__code strong {
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  color: #1a2744;
  font-size: clamp(1.6rem, 4vw, 2rem);
}

@media (max-width: 860px) {
  .wa-connect {
    padding: 18px 16px;
  }

  .wa-connect__grid {
    grid-template-columns: 1fr;
  }

  .wa-connect__status {
    margin-inline-start: 0;
  }

  .wa-connect__qr-image, .wa-connect__qr-placeholder {
    width: min(220px, 70vw);
    height: min(220px, 70vw);
  }
}

.wa-connect-panel {
  gap: 20px;
  display: grid;
}

.wa-qr-box {
  background: linear-gradient(#f0fdf4 0%, #fff 55%);
  border: 1px solid #d1fae5;
  border-radius: 16px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  display: flex;
}

.wa-qr-box__image {
  background: #fff;
  border-radius: 16px;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 8px 24px #10b9811f;
}

.wa-qr-box__placeholder {
  color: #047857;
  background: #ecfdf5;
  border-radius: 16px;
  place-items: center;
  width: 240px;
  height: 240px;
  font-weight: 600;
  display: grid;
}

.wa-qr-box__hint, .wa-qr-box__status {
  color: #475569;
  text-align: center;
  margin: 0;
}

.wa-pairing-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 16px;
}

.wa-pairing-box h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.wa-pairing-code {
  background: #f0fdf4;
  border: 1px dashed #86efac;
  border-radius: 14px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 16px;
  display: flex;
}

.wa-pairing-code span {
  color: #64748b;
  font-size: .85rem;
}

.wa-pairing-code strong {
  letter-spacing: .12em;
  color: #065f46;
  font-size: 1.75rem;
}

.wa-inbox {
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 16px;
  min-height: 520px;
  margin-top: 8px;
  display: grid;
}

.wa-inbox__list {
  align-content: start;
  max-height: 640px;
  overflow: auto;
}

.wa-inbox__chat {
  width: 100%;
  text-align: inherit;
  cursor: pointer;
}

.wa-inbox__chat--active {
  box-shadow: 0 4px 16px #10b9811f;
  background: #ecfdf5 !important;
  border-color: #34d399 !important;
}

.wa-inbox__thread {
  background: #fff;
  border: 1px solid #d1fae5;
  border-radius: 16px;
  flex-direction: column;
  min-height: 520px;
  margin-top: 0;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.wa-inbox__thread-head {
  background: #f8fffb;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
}

.wa-inbox__messages {
  background: radial-gradient(circle at 20% 20%, #25d3660d, #0000 40%), #f8fafc;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 16px;
  display: flex;
  overflow: auto;
}

.wa-bubble {
  border-radius: 14px;
  max-width: 78%;
  padding: 10px 12px;
  font-size: .95rem;
  line-height: 1.5;
  box-shadow: 0 1px 2px #0f172a0f;
}

.wa-bubble time {
  color: #64748b;
  margin-top: 4px;
  font-size: .72rem;
  display: block;
}

.wa-bubble--in {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-bottom-right-radius: 4px;
  align-self: flex-start;
}

.wa-bubble--out {
  background: #dcf8c6;
  border-bottom-left-radius: 4px;
  align-self: flex-end;
}

html[dir="rtl"] .wa-bubble--in, [dir="rtl"] .wa-bubble--in {
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 4px;
}

html[dir="rtl"] .wa-bubble--out, [dir="rtl"] .wa-bubble--out {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 14px;
}

.wa-inbox__composer {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  gap: 8px;
  padding: 12px;
  display: flex;
}

.wa-inbox__composer input {
  flex: 1;
  margin: 0;
}

@media (max-width: 900px) {
  .wa-inbox {
    grid-template-columns: 1fr;
  }

  .wa-inbox__list {
    max-height: 280px;
  }
}

.chats-header-platform-mark {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
}

.panel-platform-logo {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.panel-platform-logo__badge {
  border: 1px solid #0000;
  border-radius: 16px;
  place-items: center;
  width: 54px;
  height: 54px;
  display: grid;
  box-shadow: 0 2px 10px #0f172a0f;
}

.panel-platform-logo__badge svg {
  width: 26px;
  height: 26px;
}

.panel-platform-logo--telegram {
  --panel-logo-tone: #3390ec;
  --panel-logo-surface: linear-gradient(165deg, #fff 0%, #f3f5f8 100%);
  --panel-logo-border: #d5dae3;
}

.panel-platform-logo--telegram .panel-platform-logo__badge {
  background: var(--panel-logo-surface);
  border-color: var(--panel-logo-border);
  color: var(--panel-logo-tone);
}

.panel-platform-logo--instagram {
  --panel-logo-tone: #d62976;
  --panel-logo-surface: linear-gradient(165deg, #fff 0%, #fff7fa 100%);
  --panel-logo-border: #f8d7e4;
}

.panel-platform-logo--instagram .panel-platform-logo__badge {
  background: var(--panel-logo-surface);
  border-color: var(--panel-logo-border);
  color: var(--panel-logo-tone);
}

.panel-platform-logo--whatsapp {
  --panel-logo-tone: #128c7e;
  --panel-logo-surface: linear-gradient(165deg, #fff 0%, #f3fbf7 100%);
  --panel-logo-border: #cce8dc;
}

.panel-platform-logo--whatsapp .panel-platform-logo__badge {
  background: var(--panel-logo-surface);
  border-color: var(--panel-logo-border);
  color: var(--panel-logo-tone);
}

@media (max-width: 640px) {
  .chats-header-platform-mark, .panel-platform-logo__badge {
    width: 48px;
    height: 48px;
  }

  .panel-platform-logo__badge {
    border-radius: 14px;
  }

  .panel-platform-logo__badge svg {
    width: 23px;
    height: 23px;
  }
}

/* [project]/src/app/(panel)/_styles/panel-sidebar-theme.css [app-client] (css) */
.panel-app {
  --panel-ink: #1c2430;
  --panel-mute: #8a93a0;
  --panel-line: #eceff3;
  --panel-surface: #fafbfc;
  --panel-gold: #c9a227;
  --panel-gold-soft: #c9a2271f;
  --panel-gold-press: #b48e16;
  --panel-sidebar: #fff;
  --panel-sidebar-muted: var(--panel-mute);
  --panel-sidebar-text: var(--panel-ink);
  --panel-sidebar-hover: var(--panel-surface);
  --panel-sidebar-pill: var(--panel-gold-soft);
  --panel-sidebar-glow: none;
  --panel-bg: #e8eef3;
  --panel-frame: #fff;
  --panel-frame-radius: 24px;
  --panel-frame-gap: 12px;
  --panel-sidebar-width: 248px;
  box-sizing: border-box;
  background-color: var(--panel-bg);
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  padding: var(--panel-frame-gap);
  flex-direction: column;
  display: flex;
  overflow: hidden;
  background-image: none !important;
}

.panel-frame, .admin-app--panel-shell {
  background: var(--panel-frame);
  border-radius: var(--panel-frame-radius);
  border: 1px solid var(--panel-line);
  flex-direction: row;
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px #1c24300a;
}

.panel-app .panel-frame {
  overflow: hidden;
}

.panel-app .panel-sidebar, .admin-app--panel-shell .panel-sidebar {
  --panel-sidebar-width: 248px;
  top: auto;
  bottom: auto;
  z-index: 20;
  flex: 0 0 var(--panel-sidebar-width);
  width: var(--panel-sidebar-width);
  min-width: var(--panel-sidebar-width);
  max-width: var(--panel-sidebar-width);
  background: var(--panel-sidebar);
  height: auto;
  max-height: none;
  color: var(--panel-sidebar-text);
  border: 0;
  border-inline-end: 1px solid var(--panel-line);
  box-shadow: none;
  border-radius: 0;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  margin: 0;
  display: flex;
  position: relative;
  inset-inline: auto;
  overflow: hidden;
}

.panel-app .panel-rail {
  border-radius: 0;
  align-self: stretch;
  height: 100%;
  max-height: 100%;
  margin: 0;
}

.panel-app .panel-sidebar-spacer, .admin-app--panel-shell .panel-sidebar-spacer {
  display: none;
}

.panel-app .panel-topbar, .panel-topbar--light {
  color: var(--panel-ink);
  border-bottom: 1px solid var(--panel-line);
  box-shadow: none;
  background: none;
  flex-wrap: nowrap;
  gap: 16px;
  min-height: 64px;
  padding: 10px 28px 10px 12px;
}

.panel-app .panel-topbar__start, .panel-topbar--light .panel-topbar__start {
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.panel-app .panel-topbar__menu, .panel-topbar--light .panel-topbar__menu {
  background: var(--panel-surface);
  color: var(--panel-ink);
  border: 1px solid var(--panel-line);
}

.panel-app .panel-topbar__menu:hover, .panel-topbar--light .panel-topbar__menu:hover {
  color: var(--panel-ink);
  background: #fff;
  border-color: #dde2e8;
}

.panel-app .panel-topbar__page, .panel-topbar--light .panel-topbar__page {
  letter-spacing: -.03em;
  color: var(--panel-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 17px;
  font-weight: 750;
  display: block;
  overflow: hidden;
}

.panel-topbar__actions {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  display: inline-flex;
}

.panel-topbar__icon-btn {
  border: 1px solid var(--panel-line);
  width: 40px;
  height: 40px;
  color: var(--panel-mute);
  font: inherit;
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  place-items: center;
  padding: 0;
  text-decoration: none;
  transition: background .14s, color .14s, border-color .14s;
  display: grid;
  position: relative;
}

.panel-topbar__icon-btn:hover {
  background: var(--panel-surface);
  color: var(--panel-ink);
  border-color: #dde2e8;
}

.panel-topbar__icon-btn svg {
  width: 18px;
  height: 18px;
}

.panel-topbar__credits {
  border: 1px solid var(--panel-line);
  height: 40px;
  color: var(--panel-ink);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  align-items: center;
  gap: 7px;
  padding: 0 12px 0 10px;
  text-decoration: none;
  transition: background .14s, color .14s, border-color .14s;
  display: inline-flex;
}

.panel-app[dir="rtl"] .panel-topbar__credits {
  padding: 0 10px 0 12px;
}

.panel-topbar__credits:hover {
  background: var(--panel-surface);
  border-color: #dde2e8;
}

.panel-topbar__credits svg {
  color: #0ea5e9;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.panel-topbar__credits strong {
  letter-spacing: -.02em;
  color: var(--panel-ink);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 750;
}

.panel-topbar__credits-label {
  color: var(--panel-mute);
  font-size: 11.5px;
  font-weight: 650;
}

.panel-topbar__dot {
  top: 7px;
  background: #ef4444;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  inset-inline-end: 7px;
  box-shadow: 0 0 0 2px #fff;
}

.panel-topbar__badge {
  top: 4px;
  color: #fff;
  text-align: center;
  background: #ef4444;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
  position: absolute;
  inset-inline-end: 3px;
  box-shadow: 0 0 0 2px #fff;
}

.panel-topbar__search {
  border: 1px solid var(--panel-line);
  background: var(--panel-surface);
  min-width: min(320px, 42vw);
  height: 42px;
  color: var(--panel-mute);
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 14px;
  transition: background .14s, border-color .14s;
  display: inline-flex;
}

.panel-app[dir="rtl"] .panel-topbar__search {
  padding: 0 14px 0 8px;
}

.panel-topbar__search:hover {
  background: #fff;
  border-color: #dde2e8;
}

.panel-topbar__search svg {
  width: 18px;
  height: 18px;
  color: var(--panel-mute);
  flex-shrink: 0;
}

.panel-topbar__search span {
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
}

.panel-topbar__search kbd {
  height: 24px;
  color: var(--panel-mute);
  border: 1px solid var(--panel-line);
  background: #fff;
  border-radius: 999px;
  align-items: center;
  padding: 0 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.panel-command {
  z-index: 80;
  place-items: start center;
  padding: 12vh 16px 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.panel-command__backdrop {
  cursor: pointer;
  background: #1c243061;
  border: 0;
  position: absolute;
  inset: 0;
}

.panel-command__card {
  z-index: 1;
  border: 1px solid var(--panel-line);
  background: #fff;
  border-radius: 20px;
  width: min(560px, 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px #1c243029;
}

.panel-command__field {
  border-bottom: 1px solid var(--panel-line);
  color: var(--panel-mute);
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  display: flex;
}

.panel-command__field svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.panel-command__field input {
  width: 100%;
  color: var(--panel-ink);
  font: inherit;
  background: none;
  border: 0;
  outline: none;
  font-size: 15px;
}

.panel-command__list {
  max-height: 360px;
  margin: 0;
  padding: 8px;
  list-style: none;
  overflow: auto;
}

.panel-command__list button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 12px;
  gap: 2px;
  padding: 12px 14px;
  display: grid;
}

.panel-command__list button.is-active, .panel-command__list button:hover {
  background: var(--panel-surface);
}

.panel-command__list strong {
  color: var(--panel-ink);
  font-size: 14px;
  font-weight: 700;
}

.panel-command__list span {
  color: var(--panel-mute);
  font-size: 12px;
}

.panel-command__empty {
  color: var(--panel-mute);
  text-align: center;
  padding: 22px 12px;
  font-size: 13px;
  font-weight: 650;
}

.panel-theme-toggle {
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
}

.panel-theme-toggle__track {
  background: linear-gradient(#eef1f5 0%, #e4e9ef 100%);
  border-radius: 999px;
  place-items: center;
  width: 52px;
  height: 30px;
  transition: background .25s, box-shadow .25s;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 2px #1a27440f, 0 1px #ffffffb3;
}

.panel-theme-toggle__glow {
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 72%, #c9a22738, #0000 55%);
  transition: opacity .25s;
  position: absolute;
  inset: 0;
}

.panel-theme-toggle__sun, .panel-theme-toggle__moon {
  z-index: 1;
  width: 14px;
  height: 14px;
  transition: opacity .2s, color .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.panel-theme-toggle__sun {
  color: #c9a227;
  opacity: 1;
  inset-inline-start: 8px;
}

.panel-theme-toggle__moon {
  color: #1a274459;
  opacity: .55;
  inset-inline-end: 8px;
}

.panel-theme-toggle__knob {
  top: 3px;
  z-index: 2;
  background: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  transition: inset-inline-start .28s cubic-bezier(.22, 1, .36, 1), background .25s;
  position: absolute;
  inset-inline-start: 3px;
  box-shadow: 0 1px 3px #1a274429, 0 4px 10px #1a274414;
}

.panel-theme-toggle:hover .panel-theme-toggle__track {
  box-shadow: inset 0 1px 2px #1a274414, 0 0 0 3px #1a27440a;
}

.panel-theme-toggle:focus-visible {
  outline: none;
}

.panel-theme-toggle:focus-visible .panel-theme-toggle__track {
  box-shadow: inset 0 1px 2px #1a274414, 0 0 0 3px #c9a22759;
}

.panel-theme-toggle.is-dark .panel-theme-toggle__track {
  background: linear-gradient(#243044 0%, #1a2744 100%);
  box-shadow: inset 0 1px 2px #00000047, 0 1px #ffffff0a;
}

.panel-theme-toggle.is-dark .panel-theme-toggle__glow {
  opacity: 1;
}

.panel-theme-toggle.is-dark .panel-theme-toggle__sun {
  color: #ffffff47;
  opacity: .45;
}

.panel-theme-toggle.is-dark .panel-theme-toggle__moon {
  color: #e8c96a;
  opacity: 1;
}

.panel-theme-toggle.is-dark .panel-theme-toggle__knob {
  background: #f4f1e8;
  inset-inline-start: calc(100% - 27px);
}

.panel-theme-toggle--fab {
  z-index: 45;
  inset-inline-end: 18px;
  position: fixed;
  bottom: 18px;
}

.panel-theme-toggle--fab .panel-theme-toggle__track {
  width: 56px;
  height: 32px;
  box-shadow: 0 8px 20px #1c243029;
}

.panel-topbar__pop {
  position: relative;
}

.panel-topbar__mobile-pill {
  display: none;
}

.panel-topbar__desktop {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  display: flex;
}

@media (max-width: 900px) {
  .panel-app {
    --panel-mobile-gutter: 12px;
    --panel-mobile-content-gap: 14px;
    --panel-mobile-header-h: calc(env(safe-area-inset-top, 0px) + 70px);
    --panel-bg: #e8eef3;
    background-color: var(--panel-bg);
  }

  .panel-app .panel-frame, .panel-app .panel-shell, .panel-app .panel-shell__body {
    background-color: var(--panel-bg);
  }

  .panel-topbar__mobile-pill {
    width: 100%;
    display: block;
    overflow: visible;
  }

  .panel-topbar__desktop {
    display: none;
  }

  .panel-app .panel-topbar, .panel-topbar--light {
    z-index: 1100;
    width: 100%;
    max-width: 100%;
    color: var(--panel-ink);
    box-shadow: none;
    min-height: 0;
    padding: env(safe-area-inset-top, 0px)
      var(--panel-mobile-gutter, 12px)
      6px;
    background: none;
    border-bottom: 0;
    gap: 0;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: visible;
  }

  .panel-topbar__pill {
    background: var(--panel-primary, #1a2744);
    color: #fff;
    border-radius: 16px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px 10px 14px;
    display: flex;
    overflow: visible;
    box-shadow: 0 10px 28px #1a274438, 0 2px 8px #1a27441f;
  }

  .panel-app[dir="rtl"] .panel-topbar__pill {
    padding: 10px 14px 10px 12px;
  }

  .panel-topbar__pill-leading {
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    display: flex;
  }

  .panel-topbar__pill-menu {
    background: var(--panel-gold, #c9a227);
    color: #fff;
    width: 44px;
    height: 44px;
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    flex-shrink: 0;
    place-items: center;
    padding: 0;
    transition: background .14s, transform .14s;
    display: grid;
  }

  .panel-topbar__pill-menu:hover {
    background: var(--panel-gold-press, #b48e16);
  }

  .panel-topbar__pill-text {
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    display: flex;
  }

  .panel-topbar__pill-kicker {
    color: #ffffffb8;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 650;
    display: inline-flex;
    overflow: hidden;
  }

  .panel-topbar__pill-kicker-dot {
    background: var(--panel-gold, #c9a227);
    border-radius: 50%;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
  }

  .panel-topbar__pill-title {
    letter-spacing: -.03em;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    overflow: hidden;
  }

  .panel-topbar__pill-trailing {
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    display: inline-flex;
    overflow: visible;
  }

  .panel-topbar__pop--pill {
    overflow: visible;
  }

  .panel-topbar__pill-menu, .panel-topbar__pill-icon {
    appearance: none;
    flex-shrink: 0;
    line-height: 0;
    overflow: visible;
  }

  .panel-topbar__pill-icon {
    width: 44px;
    height: 44px;
    color: var(--panel-primary, #1a2744);
    font: inherit;
    cursor: pointer;
    background: #fff;
    border: 0;
    border-radius: 12px;
    place-items: center;
    padding: 0;
    text-decoration: none;
    transition: background .14s, color .14s;
    display: grid;
    position: relative;
  }

  .panel-topbar__pill-icon:hover {
    background: var(--panel-primary-soft, #eef1f5);
    color: var(--panel-primary-hover, #243556);
  }

  .panel-topbar__pill-icon svg, .panel-topbar__pill-menu svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: block;
  }

  .panel-topbar__pill-icon .panel-topbar__badge {
    top: 4px;
    inset-inline-end: 4px;
    box-shadow: 0 0 0 2px #fff;
  }
}

.panel-topbar__who {
  min-height: 44px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 10px;
  display: inline-flex;
}

.panel-app[dir="rtl"] .panel-topbar__who {
  padding: 4px 10px 4px 4px;
}

.panel-topbar__who-text {
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.panel-app[dir="rtl"] .panel-topbar__who-text {
  align-items: flex-start;
}

.panel-topbar__who:hover {
  background: var(--panel-surface);
}

.panel-topbar__who-avatar {
  background: var(--panel-gold-soft);
  width: 38px;
  height: 38px;
  color: var(--panel-gold-press);
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  display: grid;
}

.panel-topbar__who-name {
  align-items: center;
  gap: 2px;
  display: inline-flex;
}

.panel-topbar__who-name strong {
  color: var(--panel-ink);
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 750;
}

.panel-topbar__who-caret {
  width: 14px;
  height: 14px;
  color: var(--panel-mute);
  flex-shrink: 0;
}

.panel-topbar__who-plan {
  height: auto;
  color: var(--panel-mute);
  white-space: nowrap;
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 650;
  display: block;
}

.panel-topbar__menu-card {
  top: calc(100% + 10px);
  z-index: 50;
  min-width: 228px;
  color: var(--panel-ink, #1c2430);
  border: 1px solid var(--panel-line, #eceff3);
  background: #fff;
  border-radius: 16px;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  display: flex;
  position: absolute;
  inset-inline-end: 0;
  box-shadow: 0 16px 40px #1c24301a;
}

.panel-topbar__menu-card a, .panel-topbar__menu-card button {
  width: 100%;
  color: var(--panel-ink, #1c2430);
  font: inherit;
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  display: block;
}

.panel-topbar__menu-card a:hover, .panel-topbar__menu-card button:hover {
  background: var(--panel-surface);
}

.panel-topbar__menu-card .is-danger {
  color: #b91c1c;
}

.panel-topbar__menu-kicker {
  color: var(--panel-mute);
  margin: 0;
  padding: 6px 12px 2px;
  font-size: 11px;
  font-weight: 700;
}

.panel-topbar__menu-card > strong, .panel-topbar__menu-card > span {
  padding: 0 12px;
}

.panel-topbar__menu-card > strong {
  color: var(--panel-ink);
  font-size: 14px;
}

.panel-topbar__menu-card > span {
  color: var(--panel-mute);
  font-size: 12px;
}

.panel-topbar__menu-cta {
  margin-top: 8px;
  background: var(--panel-gold-soft) !important;
  color: var(--panel-gold-press) !important;
  text-align: center !important;
}

.panel-topbar__menu-card--account {
  min-width: 260px;
}

.panel-topbar__menu-card--alerts {
  min-width: 300px;
  max-width: min(360px, 92vw);
  padding: 8px;
}

.panel-topbar__notif-list {
  flex-direction: column;
  gap: 4px;
  max-height: min(420px, 58vh);
  display: flex;
  overflow-y: auto;
}

.panel-topbar__notif-empty {
  color: var(--panel-mute);
  padding: 10px 12px 12px;
  font-size: 12px;
  font-weight: 650;
  display: block;
}

.panel-topbar__notif-item {
  color: inherit;
  background: none;
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  text-decoration: none;
  display: flex;
}

.panel-topbar__notif-item:hover {
  background: var(--panel-surface);
}

.panel-topbar__notif-item.is-unread {
  background: #c9a22714;
}

.panel-topbar__notif-item.is-unread:hover {
  background: #c9a2271f;
}

.panel-topbar__notif-top {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.panel-topbar__notif-top strong {
  color: var(--panel-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.panel-topbar__notif-dot {
  background: #ef4444;
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.panel-topbar__notif-body {
  color: var(--panel-mute);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.panel-topbar__notif-time {
  color: #a0a8b3;
  font-size: 11px;
  font-weight: 650;
}

.panel-topbar__notif-item.is-warn .panel-topbar__notif-top strong {
  color: #92680d;
}

.panel-topbar__notif-item.is-danger .panel-topbar__notif-top strong {
  color: #b91c1c;
}

.panel-topbar__profile {
  border-bottom: 1px solid var(--panel-line);
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 8px 8px 12px;
  display: flex;
}

.panel-topbar__profile .panel-topbar__who-avatar {
  width: 40px;
  height: 40px;
}

.panel-topbar__profile strong, .panel-topbar__profile small {
  display: block;
}

.panel-topbar__profile strong {
  color: var(--panel-ink);
  font-size: 14px;
}

.panel-topbar__profile small {
  color: var(--panel-mute);
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
}

.panel-topbar__stats {
  border-bottom: 1px solid var(--panel-line);
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 2px 8px;
  display: grid;
}

.panel-topbar__stats div {
  background: var(--panel-surface);
  border-radius: 12px;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  display: flex;
}

.panel-topbar__stats span, .panel-topbar__stats em {
  color: var(--panel-mute);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
}

.panel-topbar__stats b {
  color: var(--panel-ink);
  font-size: 13px;
}

@media (max-width: 1360px) {
  .panel-app {
    --panel-sidebar-width: 228px;
    --panel-frame-gap: 8px;
    --panel-frame-radius: 20px;
  }

  .panel-app .panel-topbar, .panel-topbar--light {
    gap: 12px;
    min-height: 56px;
    padding: 8px 20px 8px 8px;
  }

  .panel-app .panel-sidebar-link {
    border-radius: 12px;
    padding: 9px 12px;
  }
}

@media (max-width: 1180px) {
  .panel-app {
    --panel-sidebar-width: 220px;
    --panel-frame-gap: 6px;
  }

  .panel-app .panel-sidebar-link-text strong {
    font-size: 12.5px;
  }

  .panel-topbar__search span, .panel-topbar__credits-label {
    display: none;
  }
}

@media (max-width: 900px) {
  .panel-topbar__who-text, .panel-topbar__search span, .panel-topbar__search kbd {
    display: none;
  }

  .panel-topbar__search {
    border-radius: 12px;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 40px;
    padding: 0;
  }

  .panel-topbar__who {
    min-height: 40px;
    padding: 2px;
  }

  .panel-app .panel-topbar__page, .panel-topbar--light .panel-topbar__page {
    font-size: 15px;
  }
}

.panel-app .panel-sidebar-hero, .panel-app .panel-sidebar-footer-art {
  display: none;
}

.panel-app .panel-sidebar-brand {
  z-index: 1;
  border-bottom: 1px solid var(--panel-line);
  justify-content: flex-start;
  gap: 8px;
  padding: 22px 20px 16px;
  position: relative;
}

.panel-app .panel-sidebar-brand-lockup {
  min-width: 0;
  color: inherit;
  flex: auto;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  display: flex;
}

.panel-app .panel-sidebar-brand-mark {
  background: var(--panel-gold);
  color: #fff;
  border-radius: 10px;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 800;
  display: grid;
}

.panel-app .panel-sidebar-brand-name {
  color: var(--panel-ink);
  letter-spacing: -.05em;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.panel-app .panel-sidebar-close {
  inset-inline-end: 14px;
  background: var(--panel-surface);
  color: var(--panel-mute);
  border: 1px solid var(--panel-line);
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.panel-app .panel-sidebar-brand-text, .panel-app .panel-sidebar-brand-subtitle {
  display: none;
}

.panel-app .panel-sidebar-nav {
  scrollbar-color: #d5dbe3 transparent;
  flex: 1 1 0;
  gap: 2px;
  min-height: 0;
  padding: 12px 12px 8px;
  overflow: hidden auto;
}

.panel-app .panel-sidebar-section-label {
  display: none;
}

.panel-app .panel-sidebar-link {
  color: var(--panel-ink);
  border-radius: 12px;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  transition: background .14s, color .14s;
}

.panel-app .panel-sidebar-link:after {
  display: none;
}

.panel-app .panel-sidebar-link:hover {
  background: var(--panel-surface);
  color: var(--panel-ink);
}

.panel-app .panel-sidebar-link.is-active {
  background: var(--panel-gold-soft);
  color: var(--panel-ink);
  box-shadow: none;
}

.panel-app .panel-sidebar-link.is-active:hover {
  background: #c9a22729;
}

.panel-app .panel-sidebar-link.is-active .panel-sidebar-link-icon {
  color: var(--panel-gold);
}

.panel-app .panel-sidebar-link-icon {
  width: 20px;
  height: 20px;
  color: var(--panel-mute);
  transition: color .14s;
}

.panel-app .panel-sidebar-link:hover .panel-sidebar-link-icon {
  color: var(--panel-ink);
}

.panel-app .panel-sidebar-link-text {
  min-width: 0;
  display: block;
}

.panel-app .panel-sidebar-link-text strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
  display: block;
  overflow: hidden;
}

.panel-app .panel-sidebar-link.is-active .panel-sidebar-link-text strong {
  color: var(--panel-ink);
  font-weight: 750;
}

.panel-app .panel-sidebar-link-text small {
  display: none;
}

.panel-app .panel-sidebar-back-btn {
  background: var(--panel-surface);
  width: auto;
  color: var(--panel-mute);
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  margin: 2px 0 10px;
  padding: 9px 14px;
}

.panel-app .panel-sidebar-back-btn:hover {
  color: var(--panel-ink);
  background: #fff;
  border-color: #dde2e8;
}

.panel-app .panel-sidebar-account-row {
  padding: 4px 10px 12px;
}

.panel-app .panel-sidebar-account-info strong {
  color: var(--panel-ink);
}

.panel-app .panel-sidebar-account-info span {
  color: var(--panel-mute);
}

.panel-app .panel-sidebar-bottom {
  z-index: 1;
  border-top: 1px solid var(--panel-line);
  background: none;
  flex-direction: column;
  flex-shrink: 0;
  gap: 4px;
  margin-top: auto;
  padding: 12px 12px 16px;
  display: flex;
  position: relative;
}

.panel-app .panel-sidebar-admin, .panel-app .panel-sidebar-footer {
  padding: 0;
}

.panel-app .panel-sidebar-help {
  background: var(--panel-surface);
  width: 100%;
  min-height: 44px;
  color: var(--panel-ink);
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .14s, border-color .14s;
  display: flex;
}

.panel-app .panel-sidebar-help__label {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.panel-app .panel-sidebar-logout {
  width: 100%;
  min-height: 38px;
  color: var(--panel-mute);
  background: none;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  display: flex;
}

.panel-app .panel-sidebar-help:hover {
  color: var(--panel-ink);
  background: #fff;
  border-color: #dde2e8;
}

.panel-app .panel-sidebar-logout:hover {
  background: var(--panel-surface);
  color: var(--panel-ink);
}

.panel-app .panel-sidebar-help__icon, .panel-app .panel-sidebar-logout svg {
  width: 20px;
  height: 20px;
  color: inherit;
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.panel-app .panel-sidebar-help__icon {
  font-size: inherit;
  border: 0;
  border-radius: 0;
}

.panel-app .panel-sidebar-help__icon svg {
  width: 18px;
  height: 18px;
}

.panel-app .panel-sidebar-help__chevron {
  width: 16px;
  height: 16px;
  color: var(--panel-mute);
  flex-shrink: 0;
  place-items: center;
  margin-inline-start: auto;
  display: grid;
}

.panel-app .panel-sidebar-help__chevron svg {
  width: 12px;
  height: 12px;
}

.panel-app[dir="ltr"] .panel-sidebar-help__chevron, .admin-app[dir="ltr"] .panel-sidebar-help__chevron {
  transform: scaleX(-1);
}

.panel-app .panel-sidebar-deco {
  display: none;
}

.panel-app .panel-shell {
  background: none;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.panel-app .panel-shell__body {
  overscroll-behavior: contain;
  flex: 1 1 0;
  min-height: 0;
  padding: 24px 28px 40px;
  overflow: hidden auto;
}

.panel-app .panel-topbar, .panel-app .panel-topbar--light {
  flex-shrink: 0;
}

@media (min-width: 901px) {
  .panel-app .panel-topbar, .panel-app .panel-topbar--light {
    position: relative;
    top: auto;
  }
}

.panel-app .admin-main {
  overscroll-behavior: contain;
  background: none;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: auto;
}

.panel-app .admin-main > .panel-topbar {
  z-index: 35;
  background: var(--panel-frame, #fff);
  position: sticky;
  top: 0;
}

.panel-app--admin-mode {
  box-sizing: border-box;
  background: var(--panel-bg);
  padding: var(--panel-frame-gap, 12px);
}

.panel-app--admin-mode .panel-shell--admin-full {
  flex: 1;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

@media (max-width: 900px) {
  .panel-app, .panel-app--admin-mode {
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    padding: 0;
    overflow: hidden;
  }

  .panel-frame, .admin-app--panel-shell {
    height: 100%;
    min-height: 0;
    box-shadow: none;
    background: var(--panel-bg);
    border: 0;
    border-radius: 0;
  }

  .panel-app .panel-shell__body {
    background: var(--panel-bg);
  }

  .panel-app .panel-sidebar, .panel-app aside.panel-sidebar, .admin-app--panel-shell .panel-sidebar {
    overflow: hidden;
    box-shadow: 4px 0 24px #1c243014;
    top: 0 !important;
    bottom: 0 !important;
    border-inline-end: 1px solid var(--panel-line) !important;
    border-radius: 0 !important;
    width: min(280px, 86vw) !important;
    max-width: 280px !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    position: fixed !important;
    inset-inline-start: 0 !important;
  }

  .panel-app[dir="rtl"] .panel-sidebar, .admin-app[dir="rtl"] .panel-sidebar {
    box-shadow: -4px 0 24px #1c243014;
    left: auto !important;
    right: 0 !important;
  }

  .panel-app[dir="ltr"] .panel-sidebar, .admin-app[dir="ltr"] .panel-sidebar {
    left: 0 !important;
    right: auto !important;
  }

  .panel-app .panel-sidebar-bottom {
    margin-top: auto;
    padding: 12px 12px 16px;
  }
}

html.panel-topbar-popup-open, body.panel-topbar-popup-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .panel-topbar__mobile-popup {
    --panel-ink: #1c2430;
    --panel-mute: #8a93a0;
    --panel-line: #eceff3;
    --panel-surface: #fafbfc;
    --panel-frame: #fff;
    --panel-gold: #c9a227;
    --panel-gold-soft: #c9a2271f;
    --panel-gold-press: #b48e16;
    z-index: 1320;
    pointer-events: none;
    color: var(--panel-ink);
    font-family: YekanBakh, var(--font-geist-sans), ui-sans-serif, system-ui, Tahoma, sans-serif;
    justify-content: center;
    align-items: flex-end;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .panel-topbar__mobile-popup[data-theme="dark"] {
    --panel-ink: #e8edf2;
    --panel-mute: #8a93a0;
    --panel-line: #2a3444;
    --panel-surface: #1a2230;
    --panel-frame: #151c26;
    --panel-gold: #d4a017;
    --panel-gold-soft: #d4a01724;
    --panel-gold-press: #c9a227;
    color: var(--panel-ink);
  }

  .panel-topbar__mobile-popup-backdrop {
    pointer-events: auto;
    cursor: pointer;
    background: #080c1273;
    border: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
  }

  .panel-topbar__mobile-popup-panel {
    z-index: 1;
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
    max-height: min(86dvh, 720px);
    animation: .24s cubic-bezier(.22, 1, .36, 1) panel-topbar-mobile-popup-in;
    position: relative;
  }

  .panel-topbar__menu-card.panel-topbar__menu-card--mobile-popup {
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--panel-frame, #fff);
    color: var(--panel-ink, #1c2430);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 0;
    border-radius: 20px 20px 0 0;
    margin: 0;
    overflow: hidden auto;
    box-shadow: 0 -12px 40px #1c24302e;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: relative !important;
    inset-inline: auto !important;
  }

  .panel-topbar__menu-card--mobile-popup.panel-topbar__menu-card--account, .panel-topbar__menu-card--mobile-popup.panel-topbar__menu-card--alerts {
    min-width: 0;
    max-width: 100%;
  }

  .panel-topbar__menu-card--mobile-popup a, .panel-topbar__menu-card--mobile-popup button, .panel-topbar__menu-card--mobile-popup strong, .panel-topbar__menu-card--mobile-popup span, .panel-topbar__menu-card--mobile-popup small, .panel-topbar__menu-card--mobile-popup b, .panel-topbar__menu-card--mobile-popup em {
    color: inherit;
  }

  .panel-topbar__menu-card--mobile-popup a, .panel-topbar__menu-card--mobile-popup button:not(.panel-topbar__mobile-popup-close), .panel-topbar__menu-card--mobile-popup .panel-topbar__profile strong, .panel-topbar__menu-card--mobile-popup .panel-topbar__notif-top strong, .panel-topbar__menu-card--mobile-popup .panel-topbar__stats b, .panel-topbar__menu-card--mobile-popup .panel-topbar__mobile-popup-title {
    color: var(--panel-ink, #1c2430);
  }

  .panel-topbar__menu-card--mobile-popup .panel-topbar__profile small, .panel-topbar__menu-card--mobile-popup .panel-topbar__notif-body, .panel-topbar__menu-card--mobile-popup .panel-topbar__notif-empty, .panel-topbar__menu-card--mobile-popup .panel-topbar__stats span, .panel-topbar__menu-card--mobile-popup .panel-topbar__notif-time {
    color: var(--panel-mute, #8a93a0);
  }

  .panel-topbar__menu-card--mobile-popup .is-danger {
    color: #b91c1c !important;
  }

  .panel-topbar__menu-card--mobile-popup .panel-topbar__notif-list {
    max-height: min(420px, 52dvh);
  }

  .panel-topbar__mobile-popup-head {
    border-bottom: 1px solid var(--panel-line, #eceff3);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    padding: 4px 4px 10px;
    display: flex;
  }

  .panel-topbar__mobile-popup-title {
    color: var(--panel-ink, #1c2430);
    letter-spacing: -.02em;
    font-size: 16px;
    font-weight: 800;
  }

  .panel-topbar__menu-card--mobile-popup .panel-topbar__mobile-popup-close {
    border: 1px solid var(--panel-line, #eceff3);
    background: var(--panel-surface, #fafbfc);
    height: 36px;
    color: var(--panel-mute, #8a93a0);
    font: inherit;
    cursor: pointer;
    border-radius: 10px;
    flex-shrink: 0;
    place-items: center;
    padding: 0;
    transition: background .14s, color .14s, border-color .14s;
    display: grid;
    width: 36px !important;
  }

  .panel-topbar__menu-card--mobile-popup .panel-topbar__mobile-popup-close:hover {
    color: var(--panel-ink, #1c2430);
    background: #fff;
    border-color: #dde2e8;
  }

  .panel-topbar__mobile-popup-close svg {
    width: 18px;
    height: 18px;
  }
}

@keyframes panel-topbar-mobile-popup-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

/* [project]/src/app/(panel)/_styles/panel-rail-nav.css [app-client] (css) */
:is(.panel-app, .panel-mobile-drawer-host) {
  --panel-rail-width: 76px;
  --panel-rail-width-expanded: 260px;
  --panel-rail-drawer-width: 280px;
  --panel-rail-bg: #1a2744;
  --panel-rail-ink: #eef1f5;
  --panel-rail-mute: #7d8796;
  --panel-rail-hover: #ffffff0f;
  --panel-rail-active: #c9a22729;
  --panel-rail-gold: #c9a227;
  --panel-rail-tab: #fff;
  --panel-rail-tab-ink: #1a2744;
  --panel-rail-notch: 16px;
  --panel-rail-tab-r: 22px;
  --panel-rail-tab-extend: 14px;
}

.panel-rail {
  z-index: 20;
  flex: 0 0 var(--panel-rail-width);
  width: var(--panel-rail-width);
  min-width: var(--panel-rail-width);
  max-width: var(--panel-rail-width);
  background: var(--panel-rail-bg);
  min-height: 0;
  max-height: 100%;
  color: var(--panel-rail-ink);
  border-inline-end: 0;
  flex-direction: column;
  align-items: stretch;
  transition: width .24s cubic-bezier(.22, 1, .36, 1), min-width .24s cubic-bezier(.22, 1, .36, 1), max-width .24s cubic-bezier(.22, 1, .36, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.panel-rail__head {
  flex-shrink: 0;
  place-items: center;
  padding: 18px 0 14px;
  display: grid;
  position: relative;
}

.panel-rail__logo {
  width: 100%;
  max-width: 58px;
  height: 38px;
  box-shadow: none;
  background: none;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  text-decoration: none;
  transition: opacity .14s;
  display: flex;
}

.panel-rail__logo:hover {
  opacity: .88;
  box-shadow: none;
  transform: none;
}

.panel-rail__logo-img {
  object-fit: contain;
  max-width: 100%;
  display: block;
  width: auto !important;
  height: 26px !important;
}

.panel-rail__close {
  width: 36px;
  height: 36px;
  color: var(--panel-rail-ink);
  cursor: pointer;
  background: #ffffff14;
  border: 0;
  border-radius: 10px;
  place-items: center;
  display: none;
}

.panel-rail__close svg {
  width: 18px;
  height: 18px;
}

.panel-rail__toggle {
  display: none;
}

.panel-rail__edge {
  color: #2f3a4f;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dbe2ea;
  border-radius: 16px;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transition: border-color .16s, box-shadow .16s, transform .16s;
  display: none;
  box-shadow: 0 1px 2px #1018280f;
}

.panel-rail__edge:hover {
  border-color: #cfd7e2;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px #1c24301f;
}

.panel-rail__edge svg {
  width: 22px;
  height: 22px;
}

.panel-rail__nav {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff2e transparent;
  flex-direction: column;
  flex: 1 1 0;
  gap: 6px;
  min-height: 0;
  padding: 12px 0 10px;
  display: flex;
  overflow: hidden auto;
}

.panel-rail__nav::-webkit-scrollbar {
  width: 6px;
}

.panel-rail__nav::-webkit-scrollbar-thumb {
  background: #ffffff29;
  border-radius: 999px;
}

.panel-rail__nav::-webkit-scrollbar-thumb:hover {
  background: #ffffff47;
}

.panel-rail__group {
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding-inline: 12px 0;
  display: flex;
  overflow: visible;
}

.panel-rail__divider {
  background: #ffffff1a;
  flex-shrink: 0;
  width: 28px;
  height: 1px;
  margin: 8px auto;
}

.panel-rail__item {
  z-index: 0;
  width: 100%;
  min-height: 48px;
  color: var(--panel-rail-mute);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 16px;
  place-items: center;
  padding: 0;
  text-decoration: none;
  transition: background .16s, color .16s;
  display: grid;
  position: relative;
}

button.panel-rail__item {
  font: inherit;
}

.panel-rail__item:hover {
  color: var(--panel-rail-ink);
  background: none;
}

.panel-rail__item.is-active {
  z-index: 3;
  width: calc(100% + var(--panel-rail-tab-extend));
  margin-inline-end: calc(var(--panel-rail-tab-extend) * -1);
  margin-block: var(--panel-rail-notch);
  background: var(--panel-rail-tab);
  min-height: 48px;
  color: var(--panel-rail-tab-ink);
  box-shadow: none;
  isolation: auto;
  border-start-start-radius: var(--panel-rail-tab-r);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-end-start-radius: var(--panel-rail-tab-r);
}

.panel-rail__item.is-active:hover {
  background: var(--panel-rail-tab);
  color: var(--panel-rail-tab-ink);
}

.panel-rail__item.is-active .panel-rail__icon {
  color: var(--panel-rail-tab-ink);
}

.panel-rail__item.is-active:before, .panel-rail__item.is-active:after {
  content: "";
  width: var(--panel-rail-notch);
  height: var(--panel-rail-notch);
  pointer-events: none;
  z-index: 1;
  position: absolute;
  inset-inline-end: 0;
}

.panel-rail__item.is-active:before {
  top: calc(var(--panel-rail-notch) * -1);
  background: radial-gradient(circle at top right,
    var(--panel-rail-bg) var(--panel-rail-notch),
    var(--panel-rail-tab) calc(var(--panel-rail-notch) + .5px));
}

.panel-rail__item.is-active:after {
  bottom: calc(var(--panel-rail-notch) * -1);
  background: radial-gradient(circle at bottom right,
    var(--panel-rail-bg) var(--panel-rail-notch),
    var(--panel-rail-tab) calc(var(--panel-rail-notch) + .5px));
}

.panel-app[dir="ltr"] .panel-rail__item.is-active:before, .panel-mobile-drawer-host[dir="ltr"] .panel-rail__item.is-active:before {
  background: radial-gradient(circle at top left,
    var(--panel-rail-bg) var(--panel-rail-notch),
    var(--panel-rail-tab) calc(var(--panel-rail-notch) + .5px));
}

.panel-app[dir="ltr"] .panel-rail__item.is-active:after, .panel-mobile-drawer-host[dir="ltr"] .panel-rail__item.is-active:after {
  background: radial-gradient(circle at bottom left,
    var(--panel-rail-bg) var(--panel-rail-notch),
    var(--panel-rail-tab) calc(var(--panel-rail-notch) + .5px));
}

.panel-rail__item.is-disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

.panel-rail__icon {
  place-items: center;
  width: 22px;
  height: 22px;
  display: grid;
}

.panel-rail__icon svg {
  width: 22px;
  height: 22px;
}

.panel-rail__tip {
  inset-inline-start: calc(100% + 12px);
  z-index: 60;
  color: #1c2430;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  transition: opacity .14s, transform .14s, visibility .14s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)translateX(6px);
  box-shadow: 0 8px 24px #1c243024;
}

.panel-app[dir="rtl"] .panel-rail__tip {
  inset-inline: auto calc(100% + 12px);
  transform: translateY(-50%)translateX(-6px);
}

.panel-rail__tip:before {
  content: "";
  top: 50%;
  background: #fff;
  width: 10px;
  height: 10px;
  position: absolute;
  inset-inline-start: -5px;
  transform: translateY(-50%)rotate(45deg);
}

.panel-app[dir="rtl"] .panel-rail__tip:before {
  inset-inline: auto -5px;
}

.panel-rail__item:hover .panel-rail__tip, .panel-rail__item:focus-visible .panel-rail__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%)translateX(0);
}

.panel-rail__item.is-active .panel-rail__tip, .panel-rail__label, .panel-rail__back {
  display: none;
}

.panel-rail__item--back {
  margin-bottom: 2px;
}

.panel-rail__account-compact {
  place-items: center;
  width: 100%;
  padding: 4px 0 8px;
  display: grid;
  position: relative;
}

.panel-rail__account-compact .panel-rail__avatar {
  border: 2px solid #c9a22773;
  border-radius: 50%;
  width: 36px !important;
  height: 36px !important;
}

.panel-app[dir="rtl"] .panel-rail__item--back .panel-rail__icon svg {
  transform: scaleX(-1);
}

.panel-rail__account-compact:hover .panel-rail__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%)translateX(0);
}

.panel-rail__account, .panel-rail__reconnect {
  display: none;
}

.panel-rail__foot {
  border-top: 1px solid #ffffff14;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 16px;
  display: flex;
}

.panel-rail__item--foot {
  min-height: 44px;
}

.panel-rail__item--muted {
  color: #ffffff6b;
}

.panel-rail__item--muted:hover {
  color: var(--panel-rail-ink);
}

.panel-app .panel-frame {
  overflow: hidden;
}

.panel-app .panel-rail + .panel-shell {
  flex: 1;
  min-width: 0;
}

.panel-mobile-drawer-host {
  z-index: 1200;
  pointer-events: none;
  background: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.panel-mobile-drawer-host .panel-sidebar-backdrop {
  z-index: 1290;
}

.panel-mobile-drawer-host .panel-sidebar-backdrop.is-visible, .panel-mobile-drawer-host .panel-rail.is-open {
  pointer-events: auto;
}

@media (max-width: 900px) {
  .panel-app .panel-frame {
    overflow: visible !important;
  }

  .panel-rail[dir="rtl"] {
    transform: translate3d(105%, 0, 0);
    left: auto !important;
    right: 0 !important;
  }

  .panel-rail[dir="ltr"] {
    transform: translate3d(-105%, 0, 0);
    box-shadow: 16px 0 48px #00000052;
    left: 0 !important;
    right: auto !important;
  }

  .panel-rail[dir="rtl"].is-open, .panel-rail[dir="ltr"].is-open {
    transform: translate3d(0, 0, 0) !important;
  }

  .panel-rail__edge, .panel-rail__toggle {
    display: none !important;
  }

  .panel-rail {
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .28s;
    overflow: hidden;
    transform: translate3d(105%, 0, 0);
    box-shadow: -16px 0 48px #00000052;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 1300 !important;
    width: min(var(--panel-rail-drawer-width), 86vw) !important;
    min-width: 0 !important;
    max-width: var(--panel-rail-drawer-width) !important;
    flex: none !important;
    height: 100dvh !important;
    position: fixed !important;
    inset-inline-start: 0 !important;
  }

  :is(.panel-app, .panel-mobile-drawer-host)[dir="rtl"] .panel-rail {
    transform: translate3d(105%, 0, 0);
    left: auto !important;
    right: 0 !important;
  }

  :is(.panel-app, .panel-mobile-drawer-host)[dir="ltr"] .panel-rail {
    transform: translate3d(-105%, 0, 0);
    box-shadow: 16px 0 48px #00000052;
    left: 0 !important;
    right: auto !important;
  }

  :is(.panel-app, .panel-mobile-drawer-host)[dir="rtl"] .panel-rail.is-open, .panel-rail[dir="rtl"].is-open, :is(.panel-app, .panel-mobile-drawer-host)[dir="ltr"] .panel-rail.is-open, .panel-rail[dir="ltr"].is-open {
    visibility: visible;
    pointer-events: auto;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility;
    transform: translate3d(0, 0, 0) !important;
  }

  .panel-rail.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility;
    overflow: hidden !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .panel-rail.is-open .panel-rail__nav {
    overscroll-behavior: contain;
    padding: 12px 0 16px;
    overflow: hidden auto;
  }

  .panel-rail.is-open .panel-rail__group {
    gap: 6px;
    padding-inline: 14px;
    overflow: hidden;
  }

  .panel-rail__head {
    justify-content: center;
    align-items: center;
    padding: 20px 18px 12px;
    display: flex;
    position: relative;
  }

  .panel-rail__logo {
    justify-content: center;
    max-width: 168px;
    height: 42px;
    padding: 0;
  }

  .panel-rail__logo-img {
    height: 34px !important;
  }

  .panel-rail__close {
    inset-inline-start: 18px;
    margin: 0;
    display: grid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .panel-rail__nav {
    overscroll-behavior: contain;
    padding: 12px 0 16px;
    overflow: hidden auto;
  }

  .panel-rail__group {
    align-items: stretch;
    gap: 6px;
    padding-inline: 14px;
    overflow: hidden;
  }

  .panel-rail__item {
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    display: flex;
  }

  .panel-rail.is-open .panel-rail__item.is-active {
    --panel-rail-tab-extend: 0;
    border-radius: 16px;
    width: 100%;
    margin-block: 0;
    margin-inline-end: 0;
    padding-inline-end: 16px;
  }

  .panel-rail.is-open .panel-rail__item.is-active:before, .panel-rail.is-open .panel-rail__item.is-active:after, .panel-rail__item.is-active:before, .panel-rail__item.is-active:after {
    display: none;
  }

  .panel-rail.is-open .panel-rail__item.is-active .panel-rail__label {
    color: var(--panel-rail-tab-ink);
    font-weight: 700;
  }

  .panel-rail.is-open .panel-rail__item.is-active .panel-rail__icon {
    color: var(--panel-rail-tab-ink);
  }

  .panel-rail__tip {
    display: none;
  }

  .panel-rail__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 650;
    display: block;
    overflow: hidden;
  }

  .panel-rail__account-compact, .panel-rail__back {
    display: none;
  }

  .panel-rail__item--back {
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    margin-bottom: 6px;
    padding: 0 14px;
  }

  .panel-rail__account {
    background: #ffffff0d;
    border-radius: 14px;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 12px 14px;
    display: flex;
  }

  .panel-rail__avatar {
    flex-shrink: 0;
  }

  .panel-rail__account-meta {
    gap: 4px;
    min-width: 0;
    display: grid;
  }

  .panel-rail__account-meta strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
  }

  .panel-rail__status {
    color: var(--panel-rail-mute);
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
  }

  .panel-rail__status--online {
    color: #6ee7a0;
  }

  .panel-rail__status-dot {
    background: currentColor;
    border-radius: 50%;
    width: 6px;
    height: 6px;
  }

  .panel-rail__reconnect {
    color: var(--panel-rail-gold);
    text-align: center;
    background: #c9a2272e;
    border-radius: 12px;
    margin: 0 0 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: block;
  }

  .panel-rail__foot {
    align-items: stretch;
    padding: 12px 12px 20px;
  }

  .panel-rail__item--foot {
    justify-content: flex-start;
    gap: 14px;
    padding: 0 14px;
  }
}

@media (min-width: 901px) {
  .panel-rail:not(.is-expanded) .panel-rail__logo {
    display: none;
  }

  .panel-rail:not(.is-expanded) .panel-rail__edge {
    border-radius: 14px;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    display: grid;
    position: static;
    transform: none;
  }

  .panel-rail:not(.is-expanded) .panel-rail__edge svg {
    width: 20px;
    height: 20px;
  }

  .panel-rail:not(.is-expanded) .panel-rail__edge:hover {
    transform: translateY(-1px);
  }

  .panel-rail.is-expanded {
    --panel-rail-width: var(--panel-rail-width-expanded);
    --panel-rail-tab-extend: 14px;
    flex: 0 0 var(--panel-rail-width-expanded);
    width: var(--panel-rail-width-expanded);
    min-width: var(--panel-rail-width-expanded);
    max-width: var(--panel-rail-width-expanded);
    overflow: hidden;
  }

  .panel-rail:not(.is-expanded) {
    overflow: visible;
  }

  .panel-rail {
    align-self: stretch;
    height: 100%;
    max-height: 100%;
  }

  .panel-rail__edge {
    flex-shrink: 0;
    display: none;
  }

  .panel-rail.is-expanded .panel-rail__head {
    justify-content: center;
    align-items: center;
    padding: 20px 16px 12px;
    display: flex;
    position: relative;
  }

  .panel-rail.is-expanded .panel-rail__edge {
    inset-inline-start: 16px;
    margin: 0;
    display: grid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .panel-rail.is-expanded .panel-rail__edge:hover {
    transform: translateY(-50%);
  }

  .panel-rail.is-expanded .panel-rail__logo {
    justify-content: center;
    max-width: 168px;
    height: 42px;
    margin-inline: auto;
    padding: 0;
    display: flex;
  }

  .panel-rail.is-expanded .panel-rail__logo:hover {
    opacity: .88;
    box-shadow: none;
    transform: none;
  }

  .panel-rail.is-expanded .panel-rail__logo-img {
    height: 34px !important;
  }

  .panel-rail.is-expanded .panel-rail__nav {
    overscroll-behavior: contain;
    padding: 12px 0 16px;
    overflow: hidden auto;
  }

  .panel-rail.is-expanded .panel-rail__group {
    align-items: stretch;
    gap: 6px;
    padding-inline: 14px 0;
  }

  .panel-rail.is-expanded .panel-rail__item {
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    display: flex;
  }

  .panel-rail.is-expanded .panel-rail__item.is-active {
    padding-inline-end: 20px;
  }

  .panel-rail.is-expanded .panel-rail__tip {
    display: none !important;
  }

  .panel-rail.is-expanded .panel-rail__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 650;
    display: block;
    overflow: hidden;
  }

  .panel-rail.is-expanded .panel-rail__account-compact {
    display: none;
  }

  .panel-rail.is-expanded .panel-rail__item--back {
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    margin-bottom: 6px;
    padding: 0 14px;
  }

  .panel-rail.is-expanded .panel-rail__account {
    background: #ffffff0d;
    border-radius: 14px;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 12px 14px;
    display: flex;
  }

  .panel-rail.is-expanded .panel-rail__account-meta {
    gap: 4px;
    min-width: 0;
    display: grid;
  }

  .panel-rail.is-expanded .panel-rail__account-meta strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
  }

  .panel-rail.is-expanded .panel-rail__status {
    color: var(--panel-rail-mute);
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
  }

  .panel-rail.is-expanded .panel-rail__status--online {
    color: #6ee7a0;
  }

  .panel-rail.is-expanded .panel-rail__status-dot {
    background: currentColor;
    border-radius: 50%;
    width: 6px;
    height: 6px;
  }

  .panel-rail.is-expanded .panel-rail__reconnect {
    color: var(--panel-rail-gold);
    text-align: center;
    background: #c9a2272e;
    border-radius: 12px;
    margin: 0 0 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: block;
  }

  .panel-rail.is-expanded .panel-rail__foot {
    align-items: stretch;
    padding: 12px 12px 16px;
  }

  .panel-rail.is-expanded .panel-rail__item--foot {
    justify-content: flex-start;
    gap: 14px;
    padding: 0 14px;
  }

  .panel-rail.is-expanded .panel-rail__divider {
    width: auto;
    margin: 8px 14px;
  }

  .panel-rail:not(.is-expanded) .panel-rail__account, .panel-rail:not(.is-expanded) .panel-rail__reconnect {
    display: none !important;
  }
}

/* [project]/src/styles/app-loading-screen.css [app-client] (css) */
:root {
  --primary: #3390ec;
  --panel-logo-gradient: linear-gradient(160deg, #4f5d75 0%, #334155 100%);
}

.app-loading-shell {
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  display: flex;
}

.app-loading-screen-host {
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: min(60vh, 480px);
  padding: 24px 16px;
  display: flex;
}

.app-loading-screen {
  justify-content: center;
  align-items: center;
  width: min(100%, 380px);
  margin: 0 auto;
  animation: .45s both app-loading-fade-in;
  display: flex;
}

.app-loading-card {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  text-align: center;
  background: #ffffffeb;
  border-radius: 18px;
  width: 100%;
  padding: 44px 32px 36px;
  box-shadow: 0 1px 2px #0f172a0a, 0 16px 48px #3390ec1a;
}

.app-loading-logo-wrap {
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  position: relative;
}

.app-loading-ring {
  border: 3px solid #3390ec1f;
  border-top-color: var(--primary, #3390ec);
  border-radius: 50%;
  animation: .9s linear infinite app-loading-spin;
  position: absolute;
  inset: 0;
}

.app-loading-logo {
  color: #fff;
  background: #fffffff5;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 10px;
  box-shadow: 0 8px 24px #5b32d62e;
}

.app-loading-logo svg, .app-loading-logo img, .app-loading-logo .panel-logo-mark {
  object-fit: contain;
  width: 36px;
  height: 36px;
}

.app-loading-title {
  color: #111;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.app-loading-subtitle {
  color: #8b959e;
  margin: 0 0 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.app-loading-dots {
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 10px;
  display: inline-flex;
}

.app-loading-dots span {
  background: var(--primary, #3390ec);
  opacity: .28;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  animation: 1.1s ease-in-out infinite app-loading-dot;
}

.app-loading-dots span:nth-child(2) {
  animation-delay: .15s;
}

.app-loading-dots span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes app-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes app-loading-dot {
  0%, 80%, 100% {
    opacity: .28;
    transform: translateY(0)scale(1);
  }

  40% {
    opacity: 1;
    transform: translateY(-4px)scale(1.08);
  }
}

@keyframes app-loading-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/*# sourceMappingURL=src_1w5gfbx._.css.map*/