/* ===== DARK ENTERPRISE PANEL ===== */
:root {
  --ent-bg: #0b1117;
  --ent-bg-2: #0e151c;
  --ent-panel: #121a22;
  --ent-panel-2: #16202a;
  --ent-panel-3: #0f171f;
  --ent-border: #26323d;
  --ent-border-soft: #1d2832;
  --ent-text: #e7edf2;
  --ent-muted: #8c9aa6;
  --ent-soft: #b8c4ce;
  --ent-primary: #3b82f6;
  --ent-primary-hover: #2563eb;
  --ent-green: #22c55e;
  --ent-yellow: #eab308;
  --ent-red: #ef4444;
  --ent-radius: 8px;
  --ent-radius-lg: 10px;
  --ent-shadow: 0 14px 34px rgba(0,0,0,.22);
}

html,
body {
  background: var(--ent-bg) !important;
  color: var(--ent-text) !important;
  letter-spacing: 0 !important;
}

body,
body.neo-command-center {
  background:
    linear-gradient(180deg, #0b1117 0%, #0c131a 58%, #0a1016 100%) fixed !important;
}

body:before,
body:after,
.neo-ambient,
.neo-grid,
.neo-scanline,
.topbar-kicker:before,
.page-header:before {
  display: none !important;
}

* {
  animation: none !important;
  transition-duration: .08s !important;
}

.app-shell {
  grid-template-columns: 264px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 16px !important;
  perspective: none !important;
}

.container {
  max-width: 1480px !important;
}

.sidebar,
.topbar-v5,
.topbar-v4,
.hero,
.toolbar,
.shop-card,
.table-card,
.edit-card,
.summary-card,
.stat-box,
.opinions,
.socials div,
.point-info-box,
.invoice-details-box,
.invoice-summary-card,
.integration-card,
.integration-summary-card,
.alerts-filter-bar,
.alert-item,
.alerts-metric,
.ticket-panel,
.ticket-detail-panel,
.messenger-sidebar-panel,
.messenger-thread-panel {
  background: var(--ent-panel) !important;
  border: 1px solid var(--ent-border) !important;
  border-radius: var(--ent-radius-lg) !important;
  box-shadow: var(--ent-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.sidebar:before,
.sidebar:after,
.topbar-v5:before,
.topbar-v5:after,
.topbar-v4:before,
.topbar-v4:after,
.shop-card:before,
.shop-card:after,
.table-card:before,
.table-card:after,
.edit-card:before,
.edit-card:after,
.summary-card:before,
.summary-card:after,
.invoice-summary-card:before,
.invoice-summary-card:after,
.integration-card:before,
.integration-card:after,
.brand-logo:after,
.logo:after,
.mini-logo:after,
.topbar-avatar:after,
.button-link:before,
button:before,
.details:before,
.logout:before,
.topbar-icon:before,
.topbar-profile:before {
  display: none !important;
}

.sidebar {
  top: 16px !important;
  height: calc(100vh - 32px) !important;
  padding: 14px !important;
  overflow: auto !important;
}

.brand {
  margin-bottom: 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--ent-border-soft) !important;
}

.brand-logo,
.logo,
.mini-logo,
.topbar-avatar {
  border-radius: 8px !important;
  background: #1d4ed8 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.brand-logo {
  width: 44px !important;
  height: 44px !important;
  font-size: 15px !important;
}

.brand strong {
  font-size: 16px !important;
  letter-spacing: 0 !important;
}

.brand span,
.sidebar-user span,
.topbar-title .topbar-kicker,
.page-header p,
.muted {
  color: var(--ent-muted) !important;
}

.side-nav {
  gap: 2px !important;
}

.side-nav a {
  min-height: 36px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--ent-soft) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  transform: none !important;
}

.side-nav a span {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  background: #1a242e !important;
  color: var(--ent-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.side-nav a:hover {
  background: #17212b !important;
  border-color: var(--ent-border-soft) !important;
  color: var(--ent-text) !important;
  transform: none !important;
}

.side-nav .active-nav {
  background: #1d2a36 !important;
  border-color: #334253 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.side-nav .active-nav span {
  background: var(--ent-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.topbar-v5,
.topbar-v4 {
  position: sticky !important;
  top: 12px !important;
  min-height: 56px !important;
  margin-bottom: 16px !important;
  padding: 10px 12px !important;
  background: #0f171f !important;
  z-index: 40 !important;
}

.topbar-title strong {
  font-size: 17px !important;
  color: var(--ent-text) !important;
}

.topbar-title .topbar-kicker,
.eyebrow {
  color: var(--ent-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.topbar-actions {
  gap: 6px !important;
}

.topbar-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 7px !important;
  background: #17212b !important;
  border: 1px solid var(--ent-border) !important;
  box-shadow: none !important;
  color: var(--ent-soft) !important;
}

.topbar-profile {
  min-height: 36px !important;
  border-radius: 7px !important;
  background: #17212b !important;
  border: 1px solid var(--ent-border) !important;
  box-shadow: none !important;
}

.topbar-profile strong {
  font-size: 12px !important;
}

.topbar-profile span {
  font-size: 11px !important;
  color: var(--ent-muted) !important;
}

.topbar-dropdown {
  background: #111a23 !important;
  border: 1px solid var(--ent-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.38) !important;
}

.topbar-badge {
  background: var(--ent-red) !important;
  border-color: #0f171f !important;
  box-shadow: none !important;
}

.page-header {
  margin: 0 0 14px !important;
  padding: 2px 0 0 !important;
  align-items: flex-start !important;
}

.page-header h1,
.hero h1,
h1 {
  font-size: clamp(26px, 2.4vw, 38px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  color: var(--ent-text) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
  filter: none !important;
}

h2,
.ticket-panel h2,
.ticket-detail-panel h2,
.table-card h2,
.edit-card h2 {
  font-size: 18px !important;
  letter-spacing: 0 !important;
  color: var(--ent-text) !important;
}

h3 {
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

.hero {
  padding: 18px !important;
}

.summary,
.invoice-summary-grid,
.integration-summary-grid,
.manager-metrics,
.shop-history-metrics {
  gap: 10px !important;
  margin: 12px 0 14px !important;
}

.summary-card,
.invoice-summary-card,
.integration-summary-card,
.manager-metrics article,
.shop-history-metrics article,
.alerts-metric,
.ticket-metric {
  min-height: 84px !important;
  padding: 14px !important;
  background: var(--ent-panel) !important;
  border-color: var(--ent-border) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

.summary-card span,
.invoice-summary-card span,
.integration-summary-card span,
.manager-metrics span,
.shop-history-metrics span,
.alerts-metric span,
.ticket-metric span {
  color: var(--ent-muted) !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
}

.summary-card b,
.invoice-summary-card b,
.integration-summary-card b,
.manager-metrics strong,
.shop-history-metrics strong,
.alerts-metric strong,
.ticket-metric strong {
  font-size: 26px !important;
  line-height: 1.05 !important;
  color: var(--ent-text) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-align: left !important;
}

.summary-card small,
.invoice-summary-card small,
.integration-summary-card small,
.manager-metrics small,
.shop-history-metrics small {
  color: var(--ent-muted) !important;
  font-size: 12px !important;
}

.toolbar,
.alerts-filter-bar,
.checklist-filter-bar {
  padding: 10px !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  background: #101922 !important;
}

input,
select,
textarea {
  min-height: 38px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  background: #0b1219 !important;
  border: 1px solid #2a3744 !important;
  color: var(--ent-text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #4b6b8f !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.16) !important;
  background: #0d151d !important;
}

label {
  color: var(--ent-soft) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.button-link,
.details,
.logout,
button:not(.review-toggle):not(.info-button),
form button:not(.review-toggle):not(.info-button),
.toolbar button:not(.review-toggle):not(.info-button) {
  min-height: 36px !important;
  padding: 8px 12px !important;
  border-radius: 7px !important;
  border: 1px solid #31506f !important;
  background: #1d4ed8 !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transform: none !important;
}

.button-link:hover,
.details:hover,
.logout:hover,
button:not(.review-toggle):not(.info-button):hover,
form button:not(.review-toggle):not(.info-button):hover,
.toolbar button:not(.review-toggle):not(.info-button):hover {
  background: var(--ent-primary-hover) !important;
  border-color: #426b97 !important;
  box-shadow: none !important;
  transform: none !important;
}

.details,
.button-link.invoice-clear-filter,
.button-link.invoice-export-link,
.manager-actions .button-link,
.shop-history-actions .button-link {
  width: auto !important;
  margin-top: 0 !important;
  background: #17212b !important;
  border-color: #334253 !important;
  color: var(--ent-text) !important;
}

.details:hover,
.button-link.invoice-clear-filter:hover,
.button-link.invoice-export-link:hover,
.manager-actions .button-link:hover,
.shop-history-actions .button-link:hover {
  background: #1f2d3a !important;
}

.grid,
.integration-grid,
.manager-grid,
.shop-history-grid {
  gap: 12px !important;
}

.shop-card,
.integration-card,
.table-card,
.edit-card,
.ticket-panel,
.ticket-detail-panel,
.messenger-sidebar-panel,
.messenger-thread-panel {
  padding: 14px !important;
  overflow: hidden !important;
  transform: none !important;
}

.shop-card:hover,
.integration-card:hover,
.summary-card:hover,
.invoice-summary-card:hover,
tbody tr:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: var(--ent-shadow) !important;
}

.shop-header {
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--ent-border-soft) !important;
}

.shop-header h2 {
  font-size: 17px !important;
}

.shop-header p,
td small,
.ticket-row small,
.messenger-conversation small {
  color: var(--ent-muted) !important;
}

.number,
.info-button {
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

.number {
  background: #17212b !important;
  border: 1px solid var(--ent-border) !important;
  color: var(--ent-soft) !important;
}

.info-button {
  width: 30px !important;
  min-width: 30px !important;
  background: #101922 !important;
  border: 1px solid var(--ent-border) !important;
  color: var(--ent-muted) !important;
}

.info-button:hover {
  background: #1a2632 !important;
  color: var(--ent-text) !important;
}

.stat-box,
.opinions,
.socials div,
.point-info-box,
.invoice-details-box div,
.shop-history-note,
.checklist-shop-status,
.checklist-item,
.feature-toggle,
.attachment-tile,
.fault-file-thumb {
  background: var(--ent-panel-3) !important;
  border: 1px solid var(--ent-border-soft) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.stat-box {
  min-height: 82px !important;
  padding: 12px !important;
}

.stat-box b {
  font-size: 24px !important;
}

.socials div {
  min-height: 66px !important;
  padding: 10px !important;
}

.active,
.ok,
.warning,
.late,
.ticket-status,
.point-badge,
.review-badge,
.checklist-pills span {
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.active,
.ok,
.checklist-pills .is-done {
  color: #86efac !important;
  background: rgba(34,197,94,.10) !important;
  border-color: rgba(34,197,94,.30) !important;
}

.warning {
  color: #fde68a !important;
  background: rgba(234,179,8,.11) !important;
  border-color: rgba(234,179,8,.30) !important;
}

.late,
.ticket-status-open,
.checklist-pills .is-missing {
  color: #fecaca !important;
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.30) !important;
}

.ticket-status-in_progress {
  color: #fde68a !important;
  background: rgba(234,179,8,.11) !important;
  border-color: rgba(234,179,8,.30) !important;
}

.ticket-status-closed {
  color: #86efac !important;
  background: rgba(34,197,94,.10) !important;
  border-color: rgba(34,197,94,.30) !important;
}

.review-positive {
  background: rgba(34,197,94,.08) !important;
  border-color: rgba(34,197,94,.22) !important;
}

.review-negative {
  background: rgba(239,68,68,.09) !important;
  border-color: rgba(239,68,68,.24) !important;
}

.review-toggle {
  min-height: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  background: #17212b !important;
  border: 1px solid var(--ent-border) !important;
  color: var(--ent-soft) !important;
  box-shadow: none !important;
}

.table-card {
  overflow: auto !important;
}

table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

th,
td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--ent-border-soft) !important;
  background: transparent !important;
  color: var(--ent-soft) !important;
  font-size: 13px !important;
}

th {
  background: #0f171f !important;
  color: var(--ent-muted) !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
}

td b,
td strong {
  color: var(--ent-text) !important;
}

tbody tr:hover,
tbody tr:hover td {
  background: #121d27 !important;
}

td a {
  color: #93c5fd !important;
  font-weight: 700 !important;
}

.invoice-details-row td {
  background: #101922 !important;
}

.invoice-details-box {
  gap: 8px !important;
  padding: 10px !important;
  background: #101922 !important;
}

.invoice-details-box div {
  padding: 10px !important;
}

.alert,
.success {
  max-width: none !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}

.alert {
  background: rgba(239,68,68,.10) !important;
  border: 1px solid rgba(239,68,68,.30) !important;
  color: #fecaca !important;
}

.success {
  background: rgba(34,197,94,.10) !important;
  border: 1px solid rgba(34,197,94,.30) !important;
  color: #bbf7d0 !important;
}

.attachment-tile img,
.fault-file-thumb img {
  border-radius: 6px !important;
}

.checklist-cash-box {
  border-color: var(--ent-border-soft) !important;
  background: #0f171f !important;
  border-radius: 8px !important;
}

.login-card,
.modern-login-card {
  background: var(--ent-panel) !important;
  border: 1px solid var(--ent-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--ent-shadow) !important;
}

.login-logo-icon {
  border-radius: 8px !important;
  background: #1d4ed8 !important;
  box-shadow: none !important;
}

footer {
  border-top-color: var(--ent-border-soft) !important;
  color: var(--ent-muted) !important;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  .sidebar {
    position: relative !important;
    top: auto !important;
    height: auto !important;
  }
}

@media (max-width: 760px) {
  .page-header h1,
  h1 {
    font-size: 28px !important;
  }

  .summary,
  .invoice-summary-grid,
  .integration-summary-grid,
  .manager-metrics,
  .shop-history-metrics {
    grid-template-columns: 1fr !important;
  }

  .topbar-v5,
  .topbar-v4 {
    position: relative !important;
    top: auto !important;
  }

  .side-nav {
    grid-template-columns: 1fr !important;
  }
}

/* ===== DARK ENTERPRISE V2 - CLEANER OPERATIONS UI ===== */
body,
body.neo-command-center {
  background: #0a0f14 !important;
}

.app-shell {
  grid-template-columns: 250px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 14px !important;
}

.app-main {
  min-width: 0 !important;
}

.container {
  max-width: 1520px !important;
  margin: 0 auto !important;
}

.sidebar {
  background: #101820 !important;
  border-color: #26313b !important;
  border-radius: 9px !important;
  padding: 14px 12px !important;
}

.brand {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.brand-logo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: #2563eb !important;
}

.brand strong {
  font-size: 15px !important;
}

.brand span {
  font-size: 11px !important;
}

.side-nav {
  gap: 1px !important;
}

.side-nav a {
  min-height: 34px !important;
  padding: 7px 9px !important;
  border-radius: 6px !important;
  color: #c4cdd6 !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

.side-nav a span {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 5px !important;
  background: #18232d !important;
  border: 1px solid #25313c !important;
  color: #9aa8b6 !important;
  font-size: 9px !important;
}

.side-nav .active-nav {
  background: #172534 !important;
  border-color: #2f455b !important;
}

.side-nav .active-nav span {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

.topbar-v5,
.topbar-v4 {
  position: relative !important;
  top: auto !important;
  min-height: 52px !important;
  margin: 0 0 14px !important;
  padding: 9px 10px !important;
  background: #101820 !important;
  border-color: #26313b !important;
  border-radius: 9px !important;
}

.topbar-title .topbar-kicker {
  margin-bottom: 2px !important;
  font-size: 9px !important;
}

.topbar-title strong {
  font-size: 16px !important;
  font-weight: 760 !important;
}

.topbar-profile {
  background: #1b2733 !important;
  border-color: #304253 !important;
  border-radius: 7px !important;
}

.topbar-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
}

.topbar-icon {
  background: #17212b !important;
  border-color: #2a3540 !important;
}

.page-header {
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.page-header h1,
h1 {
  font-size: clamp(24px, 2vw, 34px) !important;
  font-weight: 780 !important;
}

.page-header p {
  margin-top: 4px !important;
  font-size: 13px !important;
}

.grid {
  grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)) !important;
  gap: 10px !important;
}

.shop-card,
.table-card,
.edit-card,
.ticket-panel,
.ticket-detail-panel,
.summary-card,
.invoice-summary-card,
.manager-metrics article,
.shop-history-metrics article {
  background: #111922 !important;
  border: 1px solid #283440 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

.shop-card {
  padding: 12px !important;
}

.shop-header {
  align-items: center !important;
  padding-bottom: 10px !important;
}

.shop-header h2 {
  font-size: 16px !important;
  font-weight: 760 !important;
}

.shop-header p {
  margin-top: 4px !important;
  font-size: 11px !important;
}

.shop-actions {
  gap: 6px !important;
}

.stat-box,
.opinions,
.socials div,
.autoresponder-box,
.point-info-box {
  background: #0e151d !important;
  border: 1px solid #25313c !important;
  border-radius: 8px !important;
}

.stats,
.socials {
  gap: 8px !important;
  margin-top: 10px !important;
}

.stat-box {
  min-height: 76px !important;
  padding: 10px !important;
}

.stat-box p {
  font-size: 11px !important;
}

.stat-box b {
  margin-top: 4px !important;
  font-size: 23px !important;
  font-weight: 780 !important;
}

.opinions {
  margin-top: 10px !important;
  padding: 10px !important;
}

.opinions h3 {
  margin-bottom: 8px !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

.opinions ol {
  gap: 6px !important;
}

.opinions li {
  padding: 7px 8px !important;
  border-radius: 7px !important;
  background: #101922 !important;
}

.review-row {
  min-height: 28px !important;
  gap: 7px !important;
}

.review-number {
  font-size: 12px !important;
}

.review-badge {
  height: 20px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: #1a2731 !important;
  border-color: #33424f !important;
  color: #cfd8df !important;
}

.review-positive,
.review-negative {
  background: #101922 !important;
}

.review-positive {
  border-color: #1e5134 !important;
}

.review-negative {
  border-color: #5b2a35 !important;
}

.review-text {
  color: #d8e0e7 !important;
  font-size: 12px !important;
}

.review-toggle {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 6px !important;
  background: #18232d !important;
  border-color: #2f3c48 !important;
  color: #c8d2dc !important;
}

.socials div {
  min-height: 58px !important;
  padding: 9px !important;
}

.socials p {
  font-size: 11px !important;
}

.socials span,
.active,
.ok,
.warning,
.late {
  margin-top: 7px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
}

.autoresponder-box {
  margin-top: 10px !important;
  padding: 12px !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

.autoresponder-title {
  margin-bottom: 8px !important;
  color: #d6dde4 !important;
  font-size: 14px !important;
}

.point-info-row,
.point-info-fees {
  padding: 7px 0 !important;
}

.details {
  min-height: 32px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

.button-link,
button:not(.review-toggle):not(.info-button),
form button:not(.review-toggle):not(.info-button),
.toolbar button:not(.review-toggle):not(.info-button) {
  min-height: 34px !important;
  padding: 7px 11px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

.toolbar {
  background: #101820 !important;
  border-color: #26313b !important;
}

input,
select,
textarea {
  min-height: 36px !important;
  border-radius: 6px !important;
  background: #0b1218 !important;
  border-color: #2a3540 !important;
}

th,
td {
  padding: 9px 10px !important;
}

th {
  background: #101820 !important;
}

tbody tr:hover,
tbody tr:hover td {
  background: #14202b !important;
}

.summary-card,
.invoice-summary-card,
.manager-metrics article,
.shop-history-metrics article {
  min-height: 78px !important;
  padding: 12px !important;
}

.summary-card b,
.invoice-summary-card b,
.manager-metrics strong,
.shop-history-metrics strong {
  font-size: 24px !important;
}

@media (max-width: 760px) {
  .grid {
    grid-template-columns: 1fr !important;
  }

  .app-shell {
    padding: 10px !important;
  }
}

/* ===== DARK ENTERPRISE V3 - DASHBOARD CLEANUP ===== */
.container {
  max-width: none !important;
  width: 100% !important;
}

.app-shell {
  background: #0a0f14 !important;
}

.app-main {
  padding: 0 !important;
}

.hero {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hero .logo {
  display: none !important;
}

.hero h1 {
  margin: 0 0 12px !important;
  font-size: 28px !important;
  font-weight: 780 !important;
  color: #edf2f7 !important;
}

.summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}

.summary-card {
  min-height: 86px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  background: #111922 !important;
  border: 1px solid #293642 !important;
}

.summary-card span {
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  background: #152231 !important;
  border: 1px solid #2a3a4b !important;
  color: #9fb0bd !important;
  font-size: 12px !important;
}

.summary-card p {
  margin: 0 !important;
  color: #9aa8b5 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.summary-card b {
  margin: 3px 0 0 !important;
  font-size: 24px !important;
  font-weight: 780 !important;
}

.summary-card small {
  margin-top: 2px !important;
  font-size: 11px !important;
}

.toolbar {
  margin: 12px 0 !important;
  padding: 9px !important;
}

.toolbar input {
  flex: 1 1 360px !important;
}

.toolbar select {
  flex: 1 1 260px !important;
  max-width: none !important;
}

.grid {
  grid-template-columns: repeat(3, minmax(360px, 1fr)) !important;
  gap: 10px !important;
}

.shop-card {
  background: #111922 !important;
  border-color: #293642 !important;
  padding: 11px !important;
}

.shop-card:hover {
  border-color: #3a4a5a !important;
}

.shop-header {
  min-height: 42px !important;
}

.shop-header h2 {
  font-size: 15px !important;
}

.shop-header p {
  font-size: 10px !important;
}

.stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.stat-box {
  min-height: 72px !important;
}

.stat-box b {
  font-size: 22px !important;
}

.opinions {
  background: #0d141c !important;
}

.opinions li,
.review-positive,
.review-negative {
  background: #101820 !important;
  border-color: #25313c !important;
}

.review-positive:hover {
  border-color: #31513e !important;
}

.review-negative:hover {
  border-color: #5a3340 !important;
}

.review-badge {
  background: #1a2632 !important;
  border-color: #314252 !important;
  color: #d2dbe4 !important;
}

.review-negative .review-badge {
  background: rgba(239, 68, 68, .12) !important;
  border-color: rgba(239, 68, 68, .28) !important;
  color: #fecaca !important;
}

.socials {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.socials div {
  background: #0f171f !important;
}

.autoresponder-box {
  background: #0f171f !important;
  border: 1px solid #25313c !important;
  border-radius: 8px !important;
}

.point-info-row,
.point-info-fees {
  border-top-color: #25313c !important;
}

.point-info-row span,
.point-info-fees span {
  color: #97a5b1 !important;
}

.point-info-fees b {
  color: #93c5fd !important;
}

.details {
  background: #17212b !important;
  border-color: #344454 !important;
  color: #e5edf5 !important;
}

.details + .details {
  margin-left: 4px !important;
}

@media (max-width: 1500px) {
  .grid {
    grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== DARK ENTERPRISE V4 - FLAT OPS DASHBOARD ===== */
body {
  background:
    linear-gradient(180deg, #080d12 0%, #0a1118 46%, #071017 100%) fixed !important;
}

body:before,
body:after,
.shop-card:before,
.shop-card:after,
.summary-card:before,
.summary-card:after,
.invoice-summary-card:before,
.invoice-summary-card:after,
.integration-card:before,
.integration-card:after,
.table-card:before,
.edit-card:before,
.sidebar:after {
  display: none !important;
  content: none !important;
}

.app-shell {
  grid-template-columns: 250px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 14px !important;
}

.app-main {
  display: block !important;
  min-width: 0 !important;
}

.container {
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar,
.topbar-v5,
.topbar-v4,
.hero,
.toolbar,
.shop-card,
.table-card,
.edit-card,
.summary-card,
.stat-box,
.opinions,
.socials div,
.autoresponder-box,
.point-info-box {
  border-radius: 8px !important;
  background: #101820 !important;
  border: 1px solid #273541 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.sidebar {
  width: 250px !important;
  padding: 14px 12px !important;
  background: #0f171f !important;
}

.brand {
  min-height: 58px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #26333e !important;
}

.brand-logo,
.mini-logo,
.topbar-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 7px !important;
  background: #2563eb !important;
  box-shadow: none !important;
}

.brand-logo:after,
.mini-logo:after,
.topbar-avatar:after,
.button-link:before,
button:before,
.details:before,
.logout:before,
.topbar-icon:before,
.topbar-profile:before {
  display: none !important;
  content: none !important;
}

.brand strong {
  font-size: 16px !important;
}

.brand span {
  font-size: 11px !important;
  color: #8c9aa6 !important;
}

.side-nav {
  gap: 2px !important;
  padding-top: 10px !important;
}

.side-nav a {
  min-height: 38px !important;
  padding: 0 10px 0 12px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #c8d2dc !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transform: none !important;
}

.side-nav a:before {
  left: 0 !important;
  width: 3px !important;
  height: 0 !important;
  background: #2dd4bf !important;
  border-radius: 999px !important;
}

.side-nav a span {
  width: 8px !important;
  height: 8px !important;
  margin-right: 10px !important;
  border-radius: 999px !important;
  background: #51616f !important;
  border: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

.side-nav a:hover {
  background: #141f29 !important;
  border-color: #263642 !important;
  color: #ffffff !important;
  transform: none !important;
}

.side-nav a:hover:before,
.side-nav .active-nav:before {
  height: 20px !important;
}

.side-nav .active-nav {
  background: #132734 !important;
  border-color: #1f766f !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.side-nav .active-nav span {
  background: #2dd4bf !important;
}

.topbar-v5,
.topbar-v4 {
  position: sticky !important;
  top: 12px !important;
  min-height: 64px !important;
  margin-bottom: 12px !important;
  padding: 10px 12px !important;
  background: #101820 !important;
}

.topbar-title strong {
  font-size: 16px !important;
}

.topbar-kicker {
  color: #8fa1ad !important;
  letter-spacing: .08em !important;
}

.topbar-icon,
.topbar-profile,
.button-link,
button,
.details,
.logout,
.review-toggle,
.info-button {
  border-radius: 6px !important;
  background: #172331 !important;
  border: 1px solid #324252 !important;
  color: #e5edf5 !important;
  box-shadow: none !important;
  transform: none !important;
}

.topbar-profile {
  padding: 7px 10px !important;
}

.topbar-profile:hover,
.topbar-icon:hover,
.button-link:hover,
button:hover,
.details:hover,
.logout:hover,
.review-toggle:hover,
.info-button:hover {
  background: #1b2a38 !important;
  border-color: #496071 !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.hero {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin: 0 0 12px !important;
  padding: 14px !important;
}

.hero > .logo {
  display: none !important;
}

.hero h1 {
  align-self: center !important;
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: #eef3f8 !important;
}

.summary {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.summary-card {
  min-height: 70px !important;
  padding: 10px 12px !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 10px !important;
}

.summary-card span {
  width: 24px !important;
  height: 24px !important;
  border-radius: 5px !important;
  background: #182532 !important;
  border: 1px solid #2c3c4b !important;
  color: #aebcca !important;
  font-size: 11px !important;
}

.summary-card p {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #98a6b3 !important;
}

.summary-card b {
  font-size: 22px !important;
  color: #f3f7fb !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

.summary-card small {
  font-size: 11px !important;
  color: #7f8e9a !important;
}

.toolbar {
  margin: 0 0 12px !important;
  padding: 10px !important;
  gap: 8px !important;
}

input,
select,
textarea {
  min-height: 38px !important;
  border-radius: 6px !important;
  background: #091117 !important;
  border: 1px solid #2b3a47 !important;
  color: #e7eef5 !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #2dd4bf !important;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, .14) !important;
}

.grid {
  grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)) !important;
  gap: 10px !important;
}

.shop-card {
  padding: 12px !important;
  overflow: hidden !important;
}

.shop-card:hover {
  border-color: #334554 !important;
  transform: none !important;
}

.shop-header {
  min-height: 44px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #26333e !important;
}

.shop-header h2 {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.shop-header p {
  margin-top: 4px !important;
  font-size: 11px !important;
  color: #8c9aa6 !important;
}

.number {
  background: #172331 !important;
  border: 1px solid #324252 !important;
  color: #cfd9e3 !important;
  box-shadow: none !important;
}

.stats {
  gap: 8px !important;
  margin-top: 10px !important;
}

.stat-box {
  min-height: 70px !important;
  padding: 10px !important;
  background: #0d151d !important;
}

.stat-box p,
.socials p {
  font-size: 10px !important;
  color: #9ba9b6 !important;
}

.stat-box b {
  font-size: 22px !important;
  color: #f2f6fb !important;
}

.opinions {
  margin-top: 10px !important;
  padding: 10px !important;
  background: #0d151d !important;
}

.opinions h3 {
  margin-bottom: 8px !important;
  font-size: 13px !important;
  color: #edf2f7 !important;
}

.opinions li,
.review-positive,
.review-negative {
  min-height: 36px !important;
  margin-bottom: 6px !important;
  padding: 7px 8px !important;
  background: #101922 !important;
  border: 1px solid #263540 !important;
}

.review-row {
  display: grid !important;
  grid-template-columns: 24px 72px minmax(0, 1fr) 62px !important;
  gap: 8px !important;
  align-items: center !important;
}

.review-number {
  font-size: 12px !important;
}

.review-badge {
  justify-self: start !important;
  padding: 3px 7px !important;
  background: #1a2632 !important;
  border: 1px solid #344554 !important;
  color: #d1dbe5 !important;
  font-size: 10px !important;
}

.review-text {
  min-width: 0 !important;
  color: #d8e1ea !important;
  font-size: 12px !important;
}

.review-text.collapsed {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.review-toggle {
  min-height: 26px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
}

.review-negative {
  border-color: #5b3540 !important;
  background: #18151b !important;
}

.socials {
  gap: 8px !important;
  margin-top: 10px !important;
}

.socials div {
  min-height: 58px !important;
  padding: 9px !important;
  background: #0d151d !important;
}

.socials span,
.active,
.ok,
.warning,
.late,
.point-badge {
  border-radius: 999px !important;
  box-shadow: none !important;
}

.autoresponder-box {
  min-height: 54px !important;
  margin-top: 10px !important;
  padding: 10px !important;
  text-align: center !important;
  background: #0d151d !important;
}

.point-info-row,
.point-info-fees {
  padding: 9px 0 !important;
}

.details {
  min-height: 30px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
}

@media (max-width: 1320px) {
  .hero {
    grid-template-columns: 1fr !important;
  }

  .summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    width: auto !important;
  }
}

@media (max-width: 760px) {
  .grid,
  .summary {
    grid-template-columns: 1fr !important;
  }

  .review-row {
    grid-template-columns: 22px 70px minmax(0, 1fr) !important;
  }

  .review-toggle {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* ===== DARK ENTERPRISE V5 - TOPBAR USER AREA ===== */
.topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.topbar-dropdown-wrap {
  display: inline-flex !important;
  align-items: center !important;
}

.topbar-icon {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: #111b25 !important;
  border: 1px solid #2b3947 !important;
  color: #cbd5df !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.topbar-icon:hover {
  background: #162331 !important;
  border-color: #3b5061 !important;
}

.topbar-badge {
  top: -6px !important;
  right: -6px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  border: 2px solid #101820 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.topbar-profile {
  min-height: 42px !important;
  height: 42px !important;
  padding: 4px 8px 4px 5px !important;
  display: inline-grid !important;
  grid-template-columns: 32px minmax(160px, auto) 14px !important;
  align-items: center !important;
  column-gap: 9px !important;
  border-radius: 7px !important;
  background: #111b25 !important;
  border: 1px solid #2b3947 !important;
  color: #e7eef5 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.topbar-profile:hover {
  background: #152231 !important;
  border-color: #3b5061 !important;
}

.topbar-avatar {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 6px !important;
  background: #1d4ed8 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.topbar-profile > div:not(.topbar-avatar) {
  min-width: 0 !important;
  display: grid !important;
  gap: 1px !important;
  text-align: left !important;
}

.topbar-profile strong {
  max-width: 250px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: #eef3f8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.topbar-profile span {
  max-width: 250px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: #8fa0ad !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
}

.topbar-profile i {
  color: #7f8e9b !important;
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.topbar-v5,
.topbar-v4 {
  overflow: visible !important;
}

@media (max-width: 760px) {
  .topbar-actions {
    gap: 6px !important;
  }

  .topbar-profile {
    grid-template-columns: 32px 14px !important;
    width: auto !important;
  }

  .topbar-profile > div:not(.topbar-avatar) {
    display: none !important;
  }
}

/* ===== DARK ENTERPRISE V6 - FRESH TOPBAR ===== */
.topbar-v5,
.topbar-v4 {
  min-height: 68px !important;
  padding: 10px 12px !important;
  background:
    linear-gradient(180deg, rgba(20, 31, 42, .94), rgba(11, 18, 25, .94)) !important;
  border: 1px solid #263847 !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22) !important;
}

.topbar-actions {
  gap: 10px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  background: rgba(5, 11, 17, .38) !important;
  border: 1px solid rgba(148, 163, 184, .08) !important;
}

.topbar-icon svg,
.topbar-profile svg,
.topbar-dropdown svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.topbar-icon {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
    #111b25 !important;
  border: 1px solid #2c3b49 !important;
  color: #b8c7d5 !important;
}

.topbar-icon:hover {
  background:
    linear-gradient(180deg, rgba(45, 212, 191, .13), rgba(96, 165, 250, .055)),
    #142331 !important;
  border-color: #2f7f7a !important;
  color: #e9fffb !important;
}

.topbar-icon-alerts {
  color: #ffd782 !important;
}

.topbar-icon-settings {
  color: #aebdca !important;
}

.topbar-badge {
  top: -7px !important;
  right: -7px !important;
  min-width: 19px !important;
  height: 19px !important;
  background: linear-gradient(180deg, #ff4f6d, #e11d48) !important;
  border: 2px solid #0d151d !important;
  font-size: 10px !important;
  box-shadow: 0 8px 18px rgba(225, 29, 72, .28) !important;
}

.topbar-profile {
  height: 42px !important;
  min-height: 42px !important;
  padding: 4px 9px 4px 5px !important;
  grid-template-columns: 34px minmax(190px, auto) 16px !important;
  column-gap: 10px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, .12), rgba(96, 165, 250, .10) 46%, rgba(255, 255, 255, .025)),
    #111b25 !important;
  border: 1px solid #2f5360 !important;
  color: #f4f8fb !important;
}

.topbar-profile:hover {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, .17), rgba(96, 165, 250, .13) 46%, rgba(255, 255, 255, .035)),
    #142231 !important;
  border-color: #3f8f93 !important;
}

.topbar-avatar {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 9px !important;
  background:
    linear-gradient(135deg, #29d3bf 0%, #4f8cff 58%, #7c3aed 125%) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 24px rgba(37, 99, 235, .18) !important;
}

.topbar-profile strong {
  max-width: 280px !important;
  font-size: 12px !important;
  letter-spacing: .01em !important;
}

.topbar-profile span {
  position: relative !important;
  max-width: 280px !important;
  padding-left: 10px !important;
  color: #9fb0be !important;
}

.topbar-profile span:before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .12) !important;
}

.topbar-profile i {
  display: grid !important;
  place-items: center !important;
  color: #9fb0be !important;
}

.topbar-profile i svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2.4 !important;
}

.topbar-dropdown {
  margin-top: 9px !important;
  border-radius: 12px !important;
  background: rgba(12, 19, 27, .98) !important;
  border: 1px solid #2b3b49 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
}

.topbar-dropdown-header strong,
.topbar-dropdown a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.topbar-dropdown-header svg,
.topbar-dropdown a svg {
  width: 15px !important;
  height: 15px !important;
}

@media (max-width: 760px) {
  .topbar-v5,
  .topbar-v4 {
    min-height: 58px !important;
  }

  .topbar-actions {
    padding: 3px !important;
  }

  .topbar-profile {
    grid-template-columns: 34px 16px !important;
  }
}

/* ===== DARK ENTERPRISE V7 - FRESH DASHBOARD PAGE ===== */
.dashboard-fresh {
  --dash-panel: rgba(14, 23, 32, .92);
  --dash-panel-2: rgba(17, 28, 39, .92);
  --dash-line: rgba(125, 150, 170, .22);
  --dash-line-soft: rgba(125, 150, 170, .13);
  --dash-text: #eef5f9;
  --dash-muted: #8fa2b0;
  --dash-blue: #5aa7ff;
  --dash-teal: #38e4cf;
  --dash-green: #38d982;
  display: grid !important;
  gap: 14px !important;
}

.dashboard-fresh * {
  letter-spacing: 0 !important;
}

.dashboard-hero {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.05fr) minmax(560px, 2.6fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  padding: 18px !important;
  border: 1px solid var(--dash-line) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 228, 207, .18), transparent 34%),
    linear-gradient(135deg, rgba(16, 27, 38, .98), rgba(10, 17, 25, .96)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28) !important;
  overflow: hidden !important;
}

.dashboard-hero-copy {
  display: grid !important;
  align-content: center !important;
  min-width: 0 !important;
}

.dashboard-eyebrow {
  width: max-content !important;
  margin-bottom: 9px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(56, 228, 207, .10) !important;
  border: 1px solid rgba(56, 228, 207, .24) !important;
  color: #b7fff5 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.dashboard-hero h1 {
  margin: 0 !important;
  max-width: 420px !important;
  color: var(--dash-text) !important;
  font-size: clamp(30px, 3.2vw, 50px) !important;
  line-height: .98 !important;
  font-weight: 900 !important;
  text-wrap: balance !important;
}

.dashboard-hero p {
  max-width: 430px !important;
  margin: 12px 0 0 !important;
  color: var(--dash-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.dashboard-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.dashboard-kpi {
  min-height: 112px !important;
  padding: 15px !important;
  display: grid !important;
  align-content: space-between !important;
  border-radius: 14px !important;
  border: 1px solid var(--dash-line-soft) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
    rgba(8, 16, 24, .72) !important;
}

.dashboard-kpi span {
  color: #a9c2d2 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.dashboard-kpi strong {
  margin-top: 8px !important;
  color: #f8fcff !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

.dashboard-kpi small {
  margin-top: 6px !important;
  color: #7f93a1 !important;
  font-size: 11px !important;
}

.dashboard-kpi.is-warning {
  border-color: rgba(251, 191, 36, .26) !important;
  background:
    linear-gradient(180deg, rgba(251, 191, 36, .10), rgba(255, 255, 255, .014)),
    rgba(8, 16, 24, .72) !important;
}

.dashboard-toolbar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.3fr) minmax(190px, .9fr) minmax(220px, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid var(--dash-line) !important;
  background: rgba(14, 23, 32, .86) !important;
}

.dashboard-toolbar input,
.dashboard-toolbar select {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 10px !important;
  background: rgba(4, 11, 17, .78) !important;
}

.dashboard-toolbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.dashboard-toolbar .button-link {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(77, 141, 255, .95), rgba(34, 91, 207, .95)) !important;
  border-color: rgba(118, 164, 255, .32) !important;
}

.dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(405px, 1fr)) !important;
  gap: 12px !important;
}

.dashboard-shop-card {
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid var(--dash-line) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .014)),
    var(--dash-panel) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .18) !important;
}

.dashboard-shop-card:hover {
  border-color: rgba(56, 228, 207, .32) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .24) !important;
}

.dashboard-shop-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 2px !important;
}

.dashboard-shop-id {
  display: inline-flex !important;
  margin-bottom: 8px !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: rgba(90, 167, 255, .11) !important;
  border: 1px solid rgba(90, 167, 255, .22) !important;
  color: #acd2ff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.dashboard-shop-head h2 {
  margin: 0 !important;
  color: var(--dash-text) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

.dashboard-shop-head p {
  margin: 5px 0 0 !important;
  color: var(--dash-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.dashboard-shop-head .info-button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
  background: rgba(12, 23, 34, .82) !important;
}

.dashboard-scoreline {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.dashboard-scoreline div {
  min-height: 82px !important;
  padding: 12px !important;
  border-radius: 13px !important;
  border: 1px solid var(--dash-line-soft) !important;
  background: rgba(5, 12, 18, .58) !important;
}

.dashboard-scoreline span,
.dashboard-social-row span,
.dashboard-shop-state span,
.dashboard-shop-footer span {
  display: block !important;
  color: #9fb0be !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.dashboard-scoreline strong {
  display: block !important;
  margin-top: 8px !important;
  color: #f6fbff !important;
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.dashboard-scoreline small {
  display: block !important;
  margin-top: 7px !important;
  color: #7f93a1 !important;
  font-size: 11px !important;
}

.dashboard-reviews {
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid var(--dash-line-soft) !important;
  background: rgba(5, 12, 18, .50) !important;
}

.dashboard-section-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 9px !important;
}

.dashboard-section-title span {
  color: #e6eef5 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.dashboard-section-title small {
  color: #7f93a1 !important;
  font-size: 11px !important;
}

.dashboard-reviews ol {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.dashboard-reviews li {
  min-height: 38px !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  border-radius: 10px !important;
  background: rgba(17, 29, 40, .82) !important;
  border: 1px solid rgba(56, 228, 207, .14) !important;
}

.dashboard-reviews li.review-negative {
  border-color: rgba(248, 113, 113, .30) !important;
  background: rgba(41, 20, 28, .72) !important;
}

.dashboard-reviews .review-row {
  grid-template-columns: 24px 76px minmax(0, 1fr) 64px !important;
}

.dashboard-reviews .review-toggle {
  justify-self: end !important;
  border-radius: 8px !important;
}

.dashboard-social-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.dashboard-social-row div,
.dashboard-shop-state {
  padding: 10px !important;
  border-radius: 12px !important;
  border: 1px solid var(--dash-line-soft) !important;
  background: rgba(5, 12, 18, .42) !important;
}

.dashboard-social-row b,
.dashboard-shop-state b {
  width: max-content !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  display: inline-flex !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.dashboard-shop-state {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.dashboard-shop-state b {
  margin-top: 0 !important;
}

.dashboard-shop-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--dash-line-soft) !important;
}

.dashboard-shop-footer strong {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 5px !important;
  color: #dbeafe !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.dashboard-shop-footer strong em {
  min-width: 26px !important;
  height: 24px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(251, 191, 36, .12) !important;
  border: 1px solid rgba(251, 191, 36, .30) !important;
  color: #fde68a !important;
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.dashboard-shop-footer strong b {
  color: #dbeafe !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

.dashboard-shop-footer nav {
  display: flex !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.dashboard-shop-footer .details {
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9px !important;
}

.dashboard-fresh .point-info-box {
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 12px !important;
}

@media (max-width: 1450px) {
  .dashboard-hero {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1180px) {
  .dashboard-toolbar {
    grid-template-columns: 1fr 1fr !important;
  }

  .dashboard-toolbar-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  .dashboard-hero,
  .dashboard-shop-card {
    border-radius: 14px !important;
  }

  .dashboard-kpis,
  .dashboard-toolbar,
  .dashboard-grid,
  .dashboard-scoreline,
  .dashboard-social-row {
    grid-template-columns: 1fr !important;
  }

  .dashboard-reviews .review-row {
    grid-template-columns: 24px 76px minmax(0, 1fr) !important;
  }

  .dashboard-reviews .review-toggle {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .dashboard-shop-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .dashboard-shop-footer nav,
  .dashboard-toolbar-actions {
    justify-content: stretch !important;
  }

  .dashboard-shop-footer .details,
  .dashboard-toolbar .button-link {
    flex: 1 1 auto !important;
  }
}

/* ===== DARK ENTERPRISE V8 - ALERTS PAGE FIX ===== */
.alerts-page-header {
  margin: 0 0 14px !important;
  padding: 4px 0 0 !important;
}

.alerts-page-header h1 {
  margin: 0 !important;
  color: #f2f7fb !important;
  font-size: clamp(30px, 2.8vw, 44px) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
}

.alerts-page-header p {
  margin: 8px 0 0 !important;
  color: #8fa1ad !important;
  font-size: 13px !important;
}

.alerts-page-header .button-link {
  min-width: 108px !important;
  min-height: 38px !important;
  border-radius: 10px !important;
}

.alerts-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
}

.alerts-metric,
.alerts-metric.is-active,
.alerts-metric:hover {
  position: relative !important;
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: minmax(88px, auto) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  row-gap: 2px !important;
  align-items: center !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    rgba(14, 23, 32, .92) !important;
  border: 1px solid rgba(125, 150, 170, .20) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .16) !important;
  overflow: hidden !important;
  transform: none !important;
}

.alerts-metric:before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  bottom: 16px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: #38e4cf !important;
}

.alerts-metric:nth-child(2):before {
  background: #ff4f6d !important;
}

.alerts-metric:nth-child(3):before {
  background: #fbbf24 !important;
}

.alerts-metric:nth-child(4):before {
  background: #5aa7ff !important;
}

.alerts-metric strong {
  grid-row: 1 / 3 !important;
  grid-column: 1 !important;
  width: auto !important;
  min-width: 76px !important;
  margin: 0 !important;
  padding-left: 0 !important;
  color: #f8fcff !important;
  font-size: clamp(32px, 2.4vw, 42px) !important;
  line-height: .95 !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: left !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.alerts-metric span {
  grid-column: 2 !important;
  align-self: end !important;
  margin: 0 !important;
  color: #a8bac7 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

.alerts-metric small {
  grid-column: 2 !important;
  align-self: start !important;
  margin: 0 !important;
  color: #7f92a0 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

.alerts-metric.is-active {
  border-color: rgba(56, 228, 207, .36) !important;
  background:
    linear-gradient(135deg, rgba(56, 228, 207, .12), rgba(90, 167, 255, .06)),
    rgba(14, 23, 32, .94) !important;
}

.alerts-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(14, 23, 32, .86) !important;
  border: 1px solid rgba(125, 150, 170, .20) !important;
  box-shadow: none !important;
}

.alerts-filter-bar a {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: rgba(15, 26, 36, .88) !important;
  border: 1px solid rgba(125, 150, 170, .22) !important;
  color: #c5d2dc !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.alerts-filter-bar a:hover,
.alerts-filter-bar a.is-active {
  color: #061014 !important;
  background: linear-gradient(135deg, #38e4cf, #8cff75) !important;
  border-color: transparent !important;
}

.alerts-list {
  display: grid !important;
  gap: 10px !important;
}

.alert-item {
  position: relative !important;
  min-height: 82px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 14px 14px 16px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
    rgba(14, 23, 32, .92) !important;
  border: 1px solid rgba(125, 150, 170, .18) !important;
  box-shadow: none !important;
}

.alert-item:before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: #5aa7ff !important;
}

.alert-critical:before {
  background: #ff4f6d !important;
}

.alert-warning:before {
  background: #fbbf24 !important;
}

.alert-info:before {
  background: #5aa7ff !important;
}

.alert-item-icon {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: rgba(90, 167, 255, .10) !important;
  border: 1px solid rgba(90, 167, 255, .20) !important;
  color: #d9ecff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.alert-critical .alert-item-icon {
  background: rgba(255, 79, 109, .11) !important;
  border-color: rgba(255, 79, 109, .24) !important;
}

.alert-warning .alert-item-icon {
  background: rgba(251, 191, 36, .11) !important;
  border-color: rgba(251, 191, 36, .24) !important;
}

.alert-item-main {
  min-width: 0 !important;
}

.alert-item-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 7px !important;
}

.alert-item-meta span {
  min-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(125, 150, 170, .12) !important;
  color: #aebcca !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.alert-item h2 {
  margin: 0 !important;
  color: #f4f8fb !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}

.alert-item p {
  margin: 5px 0 0 !important;
  color: #9dafbc !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
}

.alert-item-action {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 15px !important;
  border-radius: 10px !important;
  background: rgba(56, 228, 207, .10) !important;
  border: 1px solid rgba(56, 228, 207, .28) !important;
  color: #c8fff5 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.alert-item-action:hover {
  background: rgba(56, 228, 207, .16) !important;
  border-color: rgba(56, 228, 207, .42) !important;
  color: #ffffff !important;
}

.alerts-empty {
  padding: 24px !important;
  border-radius: 16px !important;
  background: rgba(14, 23, 32, .86) !important;
  border: 1px solid rgba(125, 150, 170, .20) !important;
}

@media (max-width: 1100px) {
  .alerts-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .alerts-page-header {
    display: grid !important;
    gap: 12px !important;
  }

  .alerts-metrics {
    grid-template-columns: 1fr !important;
  }

  .alerts-metric {
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) !important;
  }

  .alert-item {
    grid-template-columns: 1fr !important;
  }

  .alert-item-icon {
    display: none !important;
  }

  .alert-item-action {
    width: 100% !important;
  }
}

/* ===== DARK ENTERPRISE V9 - DEFINITIVE TOPBAR OVERRIDE ===== */
.topbar-v5 .topbar-actions {
  padding: 5px !important;
  gap: 8px !important;
  border-radius: 14px !important;
  background: rgba(3, 9, 14, .42) !important;
  border: 1px solid rgba(148, 163, 184, .10) !important;
}

.topbar-v5 a.topbar-icon,
.topbar-v5 button.topbar-icon,
.topbar-v5 .topbar-icon {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .018)),
    #101b26 !important;
  border: 1px solid rgba(126, 150, 170, .25) !important;
  color: #b9c8d6 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.topbar-v5 a.topbar-icon:hover,
.topbar-v5 button.topbar-icon:hover,
.topbar-v5 .topbar-icon:hover {
  background:
    linear-gradient(180deg, rgba(56, 228, 207, .13), rgba(90, 167, 255, .05)),
    #132232 !important;
  border-color: rgba(56, 228, 207, .34) !important;
  color: #eafffb !important;
  transform: none !important;
}

.topbar-v5 button.topbar-profile,
.topbar-v5 .topbar-profile,
button.topbar-profile {
  width: auto !important;
  min-width: 278px !important;
  max-width: 360px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 4px 9px 4px 5px !important;
  display: inline-grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 16px !important;
  align-items: center !important;
  column-gap: 10px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(56, 228, 207, .11), rgba(90, 167, 255, .07) 48%, rgba(255, 255, 255, .025)),
    #101b26 !important;
  border: 1px solid rgba(56, 228, 207, .25) !important;
  color: #f3f8fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  transform: none !important;
  filter: none !important;
}

.topbar-v5 button.topbar-profile:hover,
.topbar-v5 .topbar-profile:hover,
button.topbar-profile:hover {
  background:
    linear-gradient(135deg, rgba(56, 228, 207, .16), rgba(90, 167, 255, .09) 48%, rgba(255, 255, 255, .035)),
    #122232 !important;
  border-color: rgba(56, 228, 207, .42) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  transform: none !important;
}

.topbar-v5 .topbar-avatar,
button.topbar-profile .topbar-avatar {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #35e2c8, #5aa7ff) !important;
  color: #08202a !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

.topbar-v5 .topbar-profile strong,
button.topbar-profile strong {
  max-width: 240px !important;
  color: #f5fbff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
}

.topbar-v5 .topbar-profile span,
button.topbar-profile span {
  max-width: 240px !important;
  color: #9cb0bf !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.topbar-v5 .topbar-profile i,
button.topbar-profile i {
  display: grid !important;
  place-items: center !important;
  width: 16px !important;
  color: #91a4b3 !important;
}

.topbar-v5 .topbar-profile i svg,
button.topbar-profile i svg {
  width: 15px !important;
  height: 15px !important;
}

.topbar-v5 .topbar-badge {
  top: -7px !important;
  right: -7px !important;
  border-color: #0b141d !important;
}

.alerts-page-header .button-link,
.page-header .button-link[href="/admin/dashboard.php"] {
  min-width: 118px !important;
  min-height: 40px !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
    #121e2a !important;
  border: 1px solid rgba(126, 150, 170, .25) !important;
  color: #dbe7ef !important;
  box-shadow: none !important;
}

.alerts-page-header .button-link:hover,
.page-header .button-link[href="/admin/dashboard.php"]:hover {
  background:
    linear-gradient(180deg, rgba(56, 228, 207, .13), rgba(90, 167, 255, .05)),
    #142333 !important;
  border-color: rgba(56, 228, 207, .36) !important;
}

@media (max-width: 760px) {
  .topbar-v5 button.topbar-profile,
  .topbar-v5 .topbar-profile,
  button.topbar-profile {
    min-width: 0 !important;
    grid-template-columns: 32px 16px !important;
  }
}

/* ===== DARK ENTERPRISE V10 - LIVE MESSENGER ===== */
.messenger-thread {
  scroll-behavior: smooth !important;
}

.messenger-message {
  animation: messengerMessageIn .16s ease-out both !important;
}

@keyframes messengerMessageIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.messenger-typing {
  min-height: 24px !important;
  padding: 0 18px 8px !important;
  color: #8fa1ad !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  opacity: 0 !important;
  transition: opacity .16s ease !important;
}

.messenger-typing.is-visible {
  opacity: 1 !important;
}

.messenger-typing:after {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 4px !important;
  margin-left: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #38e4cf 20%, rgba(56, 228, 207, .25) 20% 45%, rgba(56, 228, 207, .12) 45%) !important;
  vertical-align: middle !important;
}

.messenger-reply-form[data-messenger-form] {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
}

.messenger-composer {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.messenger-emoji-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.messenger-emoji-bar button {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  box-shadow: none !important;
  font-size: 15px !important;
}

.messenger-emoji-bar button:hover {
  background: rgba(56, 228, 207, .10) !important;
  border-color: rgba(56, 228, 207, .28) !important;
}

.messenger-file-button {
  width: max-content !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: rgba(90, 167, 255, .09) !important;
  border: 1px solid rgba(90, 167, 255, .24) !important;
  color: #cfe5ff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

.messenger-file-button input {
  display: none !important;
}

.messenger-attachment {
  margin-top: 10px !important;
  max-width: 320px !important;
  display: grid !important;
  gap: 7px !important;
  padding: 8px !important;
  border-radius: 13px !important;
  background: rgba(5, 12, 18, .42) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  color: #dbeafe !important;
  text-decoration: none !important;
}

.messenger-attachment:hover {
  border-color: rgba(56, 228, 207, .30) !important;
  background: rgba(56, 228, 207, .07) !important;
}

.messenger-attachment img {
  width: 100% !important;
  max-height: 220px !important;
  object-fit: cover !important;
  border-radius: 9px !important;
  background: #071017 !important;
}

.messenger-attachment span {
  min-height: 72px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: rgba(90, 167, 255, .10) !important;
  color: #b9d8ff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.messenger-attachment b {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #e7f0f8 !important;
  font-size: 12px !important;
}

.messenger-reply-form button[disabled] {
  opacity: .55 !important;
  cursor: wait !important;
}

@media (max-width: 620px) {
  .messenger-reply-form[data-messenger-form] {
    grid-template-columns: 1fr !important;
  }

  .messenger-file-button {
    width: 100% !important;
  }
}

/* ===== DARK ENTERPRISE V11 - PREMIUM LOGIN ===== */
body:has(.login-stage) {
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(56, 228, 207, .10), transparent 0 22rem),
    radial-gradient(circle at 78% 20%, rgba(90, 167, 255, .13), transparent 0 28rem),
    linear-gradient(135deg, #050a0f 0%, #071119 48%, #05080d 100%) !important;
}

body:has(.login-stage):before {
  display: block !important;
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .34 !important;
  background-image:
    linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .045) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  mask-image: radial-gradient(circle at 50% 42%, #000, transparent 72%) !important;
}

.login-shell {
  min-height: 100vh !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

.login-shell .container {
  width: min(1180px, calc(100vw - 36px)) !important;
  max-width: none !important;
  margin: 0 !important;
}

.login-stage {
  position: relative !important;
  min-height: 720px !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 470px) 230px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  perspective: 1400px !important;
}

.login-grid-lines {
  position: absolute !important;
  inset: 10% -8% !important;
  pointer-events: none !important;
  opacity: .20 !important;
  background:
    linear-gradient(90deg, transparent, rgba(56, 228, 207, .35), transparent),
    linear-gradient(180deg, transparent, rgba(90, 167, 255, .16), transparent) !important;
  filter: blur(46px) !important;
  animation: loginGlowDrift 8s ease-in-out infinite alternate !important;
}

.login-orb {
  position: absolute !important;
  width: 260px !important;
  height: 260px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  filter: blur(20px) !important;
  opacity: .34 !important;
  animation: loginFloat 7s ease-in-out infinite !important;
}

.login-orb-one {
  left: 17% !important;
  top: 20% !important;
  background: radial-gradient(circle, rgba(56, 228, 207, .46), transparent 68%) !important;
}

.login-orb-two {
  right: 18% !important;
  bottom: 18% !important;
  background: radial-gradient(circle, rgba(90, 167, 255, .42), transparent 68%) !important;
  animation-delay: -2.4s !important;
}

.modern-login-card {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 470px !important;
  margin: 0 !important;
  padding: 42px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  text-align: left !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .026)),
    rgba(12, 21, 31, .82) !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, .44),
    inset 0 1px 0 rgba(255, 255, 255, .09) !important;
  backdrop-filter: blur(22px) saturate(1.1) !important;
  animation: loginCardIn .62s cubic-bezier(.2, .8, .2, 1) both !important;
}

.login-card-sheen {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(56, 228, 207, .20), transparent 32%),
    linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .08), transparent 48%) !important;
  opacity: .84 !important;
}

.modern-login-card:before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, rgba(56, 228, 207, .62), transparent 34%, rgba(90, 167, 255, .42), transparent 72%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
}

.login-logo {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  justify-items: start !important;
  gap: 8px !important;
  margin-bottom: 32px !important;
  text-align: left !important;
}

.login-logo-icon {
  width: 74px !important;
  height: 74px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, #35e2c8 0%, #5aa7ff 55%, #7c3aed 125%) !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  box-shadow:
    0 20px 52px rgba(56, 228, 207, .22),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  animation: loginLogoPulse 3.2s ease-in-out infinite !important;
}

.login-eyebrow {
  margin-top: 12px !important;
  color: #9eece1 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .13em !important;
}

.login-logo h1 {
  margin: 0 !important;
  color: #f6fbff !important;
  font-size: 46px !important;
  line-height: .95 !important;
  font-weight: 950 !important;
}

.login-logo p {
  margin: 0 !important;
  color: #94a8b6 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

.modern-login-form {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 11px !important;
}

.modern-login-form label {
  margin: 10px 0 -3px !important;
  color: #b9c9d6 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.modern-login-form input {
  height: 52px !important;
  padding: 0 16px !important;
  border-radius: 15px !important;
  background: rgba(4, 11, 17, .72) !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  color: #f4f9fc !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.modern-login-form input:hover {
  border-color: rgba(148, 163, 184, .34) !important;
}

.modern-login-form input:focus {
  border-color: rgba(56, 228, 207, .72) !important;
  box-shadow:
    0 0 0 4px rgba(56, 228, 207, .13),
    0 16px 42px rgba(0, 0, 0, .22) !important;
}

.login-submit {
  width: 100% !important;
  height: 54px !important;
  margin-top: 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, #38e4cf 0%, #5aa7ff 55%, #7c3aed 135%) !important;
  color: #061014 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow:
    0 18px 50px rgba(56, 228, 207, .20),
    inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}

.login-submit:hover {
  transform: translateY(-2px) !important;
  filter: saturate(1.12) brightness(1.04) !important;
  box-shadow:
    0 26px 72px rgba(90, 167, 255, .24),
    inset 0 1px 0 rgba(255, 255, 255, .40) !important;
}

.login-alert {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 0 20px !important;
  border-radius: 14px !important;
}

.login-side-panel {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  gap: 12px !important;
  animation: loginSideIn .72s cubic-bezier(.2, .8, .2, 1) .08s both !important;
}

.login-side-panel div {
  min-height: 92px !important;
  display: grid !important;
  align-content: center !important;
  padding: 18px !important;
  border-radius: 20px !important;
  background: rgba(12, 21, 31, .54) !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .20) !important;
  backdrop-filter: blur(16px) !important;
}

.login-side-panel span {
  color: #7f93a1 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}

.login-side-panel strong {
  margin-top: 7px !important;
  color: #eaf4fa !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.login-side-panel div:first-child strong:before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  display: inline-block !important;
  margin-right: 8px !important;
  border-radius: 999px !important;
  background: #38e4cf !important;
  box-shadow: 0 0 0 5px rgba(56, 228, 207, .12) !important;
}

@keyframes loginCardIn {
  from {
    opacity: 0;
    transform: translateY(18px) rotateX(4deg) scale(.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes loginSideIn {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes loginFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(18px, -16px, 0) scale(1.08);
  }
}

@keyframes loginGlowDrift {
  from {
    transform: translateX(-4%) rotate(-1deg);
  }
  to {
    transform: translateX(4%) rotate(1deg);
  }
}

@keyframes loginLogoPulse {
  0%, 100% {
    box-shadow: 0 20px 52px rgba(56, 228, 207, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  50% {
    box-shadow: 0 28px 72px rgba(90, 167, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .34);
  }
}

@media (max-width: 920px) {
  body:has(.login-stage) {
    overflow: auto !important;
  }

  .login-stage {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 34px 0 !important;
  }

  .login-side-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .login-shell .container {
    width: min(100%, calc(100vw - 20px)) !important;
  }

  .modern-login-card {
    padding: 28px !important;
    border-radius: 22px !important;
  }

  .login-logo h1 {
    font-size: 38px !important;
  }

  .login-side-panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-stage *,
  .login-orb,
  .login-grid-lines {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== DARK ENTERPRISE V12 - CLEAN PRO LOGIN ===== */
body:has(.login-stage) {
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(45, 212, 191, .10), transparent 0 18rem),
    radial-gradient(circle at 50% 72%, rgba(59, 130, 246, .08), transparent 0 24rem),
    linear-gradient(180deg, #050a0f 0%, #071017 48%, #050a0f 100%) !important;
}

.login-shell {
  display: grid !important;
  place-items: center !important;
  min-height: 100vh !important;
  padding: 24px !important;
}

.login-shell .container {
  width: min(100%, 520px) !important;
}

.login-stage {
  width: 100% !important;
  min-height: auto !important;
  display: block !important;
  perspective: none !important;
}

.login-side-panel {
  display: none !important;
}

.login-orb {
  width: 360px !important;
  height: 360px !important;
  opacity: .18 !important;
  filter: blur(34px) !important;
}

.login-orb-one {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-70%, -70%) !important;
}

.login-orb-two {
  right: 50% !important;
  bottom: 50% !important;
  transform: translate(70%, 72%) !important;
}

.login-grid-lines {
  inset: -18vh -18vw !important;
  opacity: .14 !important;
  filter: blur(34px) !important;
}

.modern-login-card {
  width: 100% !important;
  max-width: 520px !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 34px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018)),
    rgba(13, 21, 30, .92) !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(18px) !important;
  text-align: left !important;
}

.modern-login-card:before {
  opacity: .58 !important;
}

.login-card-sheen {
  opacity: .42 !important;
  background:
    linear-gradient(120deg, transparent 0 32%, rgba(255, 255, 255, .055) 42%, transparent 52%),
    radial-gradient(circle at 50% -12%, rgba(45, 212, 191, .18), transparent 38%) !important;
}

.login-logo {
  justify-items: center !important;
  text-align: center !important;
  margin-bottom: 28px !important;
}

.login-logo-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 18px !important;
  font-size: 19px !important;
  background: linear-gradient(135deg, #22d3ee, #2563eb 58%, #7c3aed) !important;
  box-shadow:
    0 18px 42px rgba(37, 99, 235, .24),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

.login-eyebrow {
  margin-top: 16px !important;
  color: #75e6da !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
}

.login-logo h1 {
  font-size: 42px !important;
  line-height: 1 !important;
}

.login-logo p {
  color: #93a4b1 !important;
  font-size: 13px !important;
}

.modern-login-form {
  gap: 10px !important;
}

.modern-login-form label {
  margin: 8px 0 -2px !important;
  color: #aebfcb !important;
  font-size: 12px !important;
}

.modern-login-form input {
  height: 50px !important;
  border-radius: 12px !important;
  background: rgba(5, 12, 18, .74) !important;
  border: 1px solid rgba(148, 163, 184, .17) !important;
}

.modern-login-form input:focus {
  border-color: rgba(45, 212, 191, .72) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .12) !important;
}

.login-submit {
  height: 50px !important;
  margin-top: 16px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #2dd4bf, #3b82f6) !important;
  color: #041016 !important;
  box-shadow: 0 16px 42px rgba(59, 130, 246, .22) !important;
}

.login-submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 58px rgba(45, 212, 191, .22) !important;
}

@media (max-width: 620px) {
  body:has(.login-stage) {
    overflow: auto !important;
  }

  .login-shell {
    padding: 14px !important;
  }

  .modern-login-card {
    padding: 26px !important;
    border-radius: 18px !important;
  }

  .login-logo h1 {
    font-size: 36px !important;
  }
}

/* ===== DARK ENTERPRISE V13 - BLUE GLASS LOGIN ===== */
body:has(.login-stage) {
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(97, 203, 255, .60), transparent 0 25rem),
    radial-gradient(circle at 14% 76%, rgba(16, 92, 190, .54), transparent 0 20rem),
    radial-gradient(circle at 86% 78%, rgba(77, 190, 255, .44), transparent 0 18rem),
    linear-gradient(135deg, #003d90 0%, #0878d9 45%, #0065c6 100%) !important;
}

body:has(.login-stage)::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .05), transparent 28%, transparent 72%, rgba(0, 21, 63, .18)),
    radial-gradient(circle at 50% 50%, transparent 0 34rem, rgba(0, 13, 36, .28) 58rem) !important;
  z-index: 0 !important;
}

.login-shell {
  display: grid !important;
  min-height: 100vh !important;
  place-items: center !important;
  padding: 28px !important;
}

.login-shell .container {
  width: min(100%, 1120px) !important;
}

.login-stage {
  position: relative !important;
  display: grid !important;
  min-height: 640px !important;
  place-items: center !important;
  isolation: isolate !important;
  overflow: visible !important;
  perspective: none !important;
}

.login-blue-panel {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(76vw, 820px) !important;
  height: min(58vh, 460px) !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(0, 42, 105, .55), rgba(0, 117, 220, .42)),
    rgba(0, 45, 120, .26) !important;
  box-shadow:
    0 44px 130px rgba(0, 17, 66, .34),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  backdrop-filter: blur(3px) !important;
  z-index: 1 !important;
}

.login-grid-lines {
  display: none !important;
}

.login-orb {
  position: absolute !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 999px !important;
  filter: blur(34px) !important;
  opacity: .32 !important;
  z-index: 0 !important;
  animation: loginFloat 9s ease-in-out infinite !important;
}

.login-orb-one {
  left: 16% !important;
  top: 24% !important;
  transform: none !important;
  background: #38bdf8 !important;
}

.login-orb-two {
  right: 16% !important;
  bottom: 16% !important;
  transform: none !important;
  background: #0ea5e9 !important;
  animation-delay: -4s !important;
}

.login-side-panel {
  display: none !important;
}

.modern-login-card {
  position: relative !important;
  z-index: 4 !important;
  width: 270px !important;
  max-width: calc(100vw - 34px) !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 24px !important;
  border-radius: 16px !important;
  text-align: left !important;
  background:
    linear-gradient(145deg, rgba(77, 172, 255, .54), rgba(31, 124, 222, .32)),
    rgba(63, 151, 238, .34) !important;
  border: 1px solid rgba(255, 255, 255, .23) !important;
  box-shadow:
    22px 26px 46px rgba(0, 26, 86, .30),
    inset 0 1px 0 rgba(255, 255, 255, .30) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  animation: loginCardIn .6s ease-out both !important;
}

.modern-login-card::before {
  opacity: .55 !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .38), transparent 34%),
    linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, .11) 45%, transparent 57%) !important;
}

.login-card-sheen {
  display: none !important;
}

.login-logo {
  display: grid !important;
  justify-items: center !important;
  gap: 7px !important;
  margin: 0 0 22px !important;
  text-align: center !important;
}

.login-logo-icon {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .96) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

.login-eyebrow {
  display: none !important;
}

.login-logo h1 {
  margin-top: 18px !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  text-shadow: 0 10px 26px rgba(0, 28, 90, .22) !important;
}

.login-logo p {
  margin: 0 !important;
  color: rgba(255, 255, 255, .70) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.modern-login-form {
  gap: 8px !important;
}

.modern-login-form label {
  margin: 6px 0 -2px !important;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.modern-login-form input {
  width: 100% !important;
  height: 29px !important;
  padding: 0 10px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  background: rgba(255, 255, 255, .95) !important;
  color: #062048 !important;
  font-size: 11px !important;
  box-shadow: 0 9px 18px rgba(0, 37, 106, .11) !important;
}

.modern-login-form input:focus {
  border-color: rgba(255, 255, 255, .90) !important;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .17),
    0 12px 24px rgba(0, 37, 106, .18) !important;
}

.login-submit {
  width: 100% !important;
  height: 31px !important;
  margin-top: 14px !important;
  border-radius: 5px !important;
  background: #042b5f !important;
  color: #ffffff !important;
  font-size: 10px !important;
  box-shadow: 0 14px 30px rgba(0, 31, 82, .28) !important;
}

.login-submit:hover {
  transform: translateY(-1px) !important;
  background: #031f46 !important;
  box-shadow: 0 18px 34px rgba(0, 31, 82, .35) !important;
}

.login-alert {
  border-radius: 8px !important;
  font-size: 11px !important;
}

.login-shape {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 2 !important;
  filter: drop-shadow(18px 24px 22px rgba(0, 31, 86, .22)) !important;
  animation: loginShapeFloat 7.5s ease-in-out infinite !important;
}

.login-shape-ring {
  top: 68px !important;
  left: calc(50% - 105px) !important;
  width: 74px !important;
  height: 74px !important;
  border: 15px solid rgba(90, 214, 255, .70) !important;
  border-right-color: rgba(6, 96, 192, .48) !important;
  border-bottom-color: rgba(8, 118, 220, .35) !important;
  border-radius: 50% !important;
}

.login-shape-loop {
  left: calc(50% - 345px) !important;
  bottom: 145px !important;
  width: 106px !important;
  height: 72px !important;
  border: 17px solid rgba(172, 224, 255, .55) !important;
  border-right-color: transparent !important;
  border-radius: 999px !important;
  transform: rotate(-35deg) !important;
  animation-delay: -2.5s !important;
}

.login-shape-pipe {
  left: calc(50% - 370px) !important;
  top: 245px !important;
  width: 126px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #d7f2ff, #72c8ff 52%, #1b83df) !important;
  transform: rotate(-42deg) !important;
  animation-delay: -1.2s !important;
}

.login-shape-pipe::before {
  content: "" !important;
  position: absolute !important;
  right: 72px !important;
  top: 44px !important;
  width: 76px !important;
  height: 25px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #d7f2ff, #68c4ff 55%, #1f7ed5) !important;
}

.login-shape-wave {
  right: calc(50% - 350px) !important;
  bottom: 205px !important;
  width: 118px !important;
  height: 38px !important;
  border-top: 13px solid rgba(177, 231, 255, .62) !important;
  border-radius: 50% !important;
  transform: rotate(3deg) !important;
  animation-delay: -3.8s !important;
}

.login-shape-wave::before,
.login-shape-wave::after {
  content: "" !important;
  position: absolute !important;
  top: -13px !important;
  width: 42px !important;
  height: 38px !important;
  border-top: 13px solid rgba(177, 231, 255, .62) !important;
  border-radius: 50% !important;
}

.login-shape-wave::before {
  left: 34px !important;
}

.login-shape-wave::after {
  left: 70px !important;
}

.login-shape-pill {
  right: calc(50% - 325px) !important;
  top: 230px !important;
  width: 94px !important;
  height: 188px !important;
  border: 28px solid rgba(0, 76, 178, .36) !important;
  border-left-color: rgba(100, 207, 255, .25) !important;
  border-radius: 999px !important;
  transform: rotate(24deg) !important;
  animation-delay: -4.8s !important;
}

.login-shape-cloud {
  right: calc(50% - 500px) !important;
  bottom: 100px !important;
  width: 220px !important;
  height: 58px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(186, 231, 255, .38), rgba(118, 202, 255, .52)) !important;
  transform: rotate(-7deg) !important;
  animation-delay: -5.4s !important;
}

.login-shape-cloud::before,
.login-shape-cloud::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 999px !important;
  background: inherit !important;
}

.login-shape-cloud::before {
  left: 44px !important;
  top: -28px !important;
  width: 86px !important;
  height: 72px !important;
}

.login-shape-cloud::after {
  right: 36px !important;
  top: -20px !important;
  width: 74px !important;
  height: 64px !important;
}

@keyframes loginShapeFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -14px;
  }
}

@media (max-width: 760px) {
  body:has(.login-stage) {
    overflow: auto !important;
  }

  .login-shell {
    padding: 18px !important;
  }

  .login-stage {
    min-height: 620px !important;
  }

  .login-blue-panel {
    width: calc(100vw - 38px) !important;
    height: 440px !important;
  }

  .modern-login-card {
    width: min(290px, calc(100vw - 62px)) !important;
  }

  .login-shape-ring {
    top: 44px !important;
    left: calc(50% - 40px) !important;
  }

  .login-shape-loop,
  .login-shape-pipe {
    left: 18px !important;
  }

  .login-shape-pill,
  .login-shape-wave {
    right: 14px !important;
  }

  .login-shape-cloud {
    right: -62px !important;
    bottom: 74px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-shape,
  .modern-login-card,
  .login-orb {
    animation: none !important;
  }
}

/* ===== DARK ENTERPRISE V14 - BIGGER BLUE LOGIN ===== */
body:has(.login-stage) {
  background:
    radial-gradient(circle at 50% 42%, rgba(134, 221, 255, .46), transparent 0 26rem),
    radial-gradient(circle at 19% 72%, rgba(35, 131, 225, .44), transparent 0 25rem),
    radial-gradient(circle at 83% 70%, rgba(39, 181, 255, .36), transparent 0 24rem),
    linear-gradient(135deg, #0050ad 0%, #0a85df 52%, #0068c9 100%) !important;
}

.login-shell .container {
  width: min(100%, 1280px) !important;
}

.login-stage {
  min-height: 720px !important;
}

.login-blue-panel {
  width: min(82vw, 980px) !important;
  height: min(62vh, 520px) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(70, 184, 255, .22), transparent 0 18rem),
    linear-gradient(135deg, rgba(0, 49, 119, .62), rgba(0, 111, 212, .46)),
    rgba(0, 57, 142, .34) !important;
  box-shadow:
    0 54px 150px rgba(0, 17, 66, .34),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -70px 110px rgba(0, 41, 111, .18) !important;
}

.modern-login-card {
  width: 360px !important;
  padding: 34px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(86, 181, 255, .66), rgba(32, 132, 232, .44)),
    rgba(55, 149, 239, .46) !important;
  border: 1px solid rgba(255, 255, 255, .32) !important;
  box-shadow:
    28px 34px 62px rgba(0, 28, 88, .30),
    0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 1px 0 rgba(255, 255, 255, .36) !important;
}

.modern-login-card::before {
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .40), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(0, 73, 180, .20), transparent 38%),
    linear-gradient(115deg, transparent 0 33%, rgba(255, 255, 255, .12) 45%, transparent 58%) !important;
}

.login-logo {
  margin-bottom: 30px !important;
}

.login-logo-icon {
  font-size: 16px !important;
  font-weight: 900 !important;
}

.login-logo h1 {
  margin-top: 26px !important;
  font-size: 30px !important;
  font-weight: 900 !important;
}

.login-logo p {
  margin-top: 4px !important;
  font-size: 13px !important;
}

.modern-login-form {
  gap: 10px !important;
}

.modern-login-form label {
  margin: 10px 0 -2px !important;
  font-size: 12px !important;
}

.modern-login-form input {
  height: 46px !important;
  padding: 0 14px !important;
  border-radius: 7px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.login-submit {
  height: 46px !important;
  margin-top: 18px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #0d42b8, #06349a) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.login-shape {
  opacity: .86 !important;
  filter: drop-shadow(24px 30px 28px rgba(0, 31, 86, .24)) !important;
}

.login-shape-ring {
  top: 76px !important;
  left: calc(50% - 96px) !important;
  width: 92px !important;
  height: 92px !important;
  border-width: 18px !important;
}

.login-shape-pipe {
  left: calc(50% - 430px) !important;
  top: 270px !important;
  width: 156px !important;
  height: 44px !important;
}

.login-shape-pipe::before {
  right: 88px !important;
  top: 54px !important;
  width: 92px !important;
  height: 31px !important;
}

.login-shape-loop {
  left: calc(50% - 400px) !important;
  bottom: 138px !important;
  width: 136px !important;
  height: 92px !important;
  border-width: 20px !important;
}

.login-shape-pill {
  right: calc(50% - 425px) !important;
  top: 260px !important;
  width: 118px !important;
  height: 224px !important;
  border-width: 34px !important;
  opacity: .54 !important;
}

.login-shape-wave {
  right: calc(50% - 430px) !important;
  bottom: 162px !important;
  width: 150px !important;
  border-top-width: 15px !important;
}

.login-shape-wave::before,
.login-shape-wave::after {
  top: -15px !important;
  width: 52px !important;
  border-top-width: 15px !important;
}

.login-shape-wave::before {
  left: 44px !important;
}

.login-shape-wave::after {
  left: 88px !important;
}

.login-shape-cloud {
  right: calc(50% - 560px) !important;
  bottom: 88px !important;
  width: 260px !important;
  height: 72px !important;
  opacity: .72 !important;
}

.login-shape-cloud::before {
  width: 100px !important;
  height: 84px !important;
}

.login-shape-cloud::after {
  width: 88px !important;
  height: 76px !important;
}

@media (max-width: 760px) {
  .login-stage {
    min-height: 680px !important;
  }

  .login-blue-panel {
    width: calc(100vw - 32px) !important;
    height: 500px !important;
  }

  .modern-login-card {
    width: min(350px, calc(100vw - 56px)) !important;
    padding: 28px !important;
  }

  .login-logo h1 {
    font-size: 27px !important;
  }

  .login-shape-pipe,
  .login-shape-loop {
    left: -6px !important;
  }

  .login-shape-pill,
  .login-shape-wave {
    right: -18px !important;
  }
}

/* ===== DARK ENTERPRISE V15 - MOBILE LOGIN FIT ===== */
@media (max-width: 760px) {
  html:has(.login-stage),
  body:has(.login-stage) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body:has(.login-stage) {
    background:
      radial-gradient(circle at 50% 38%, rgba(150, 226, 255, .40), transparent 0 16rem),
      radial-gradient(circle at 12% 69%, rgba(21, 122, 226, .42), transparent 0 15rem),
      linear-gradient(150deg, #0053b5 0%, #0a84de 54%, #0069c9 100%) !important;
  }

  body:has(.login-stage)::before {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .035), transparent 62%),
      radial-gradient(circle at 50% 50%, transparent 0 18rem, rgba(0, 13, 36, .18) 32rem) !important;
  }

  .login-shell {
    width: 100% !important;
    min-height: 100svh !important;
    padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    place-items: center !important;
    overflow: hidden !important;
  }

  .login-shell .container {
    width: 100% !important;
    max-width: 420px !important;
  }

  .login-stage {
    width: 100% !important;
    min-height: min(760px, calc(100svh - 32px)) !important;
    padding: 18px 0 !important;
    overflow: hidden !important;
    place-items: center !important;
  }

  .login-blue-panel {
    width: calc(100vw - 28px) !important;
    max-width: 390px !important;
    height: min(72svh, 548px) !important;
    min-height: 456px !important;
    top: 50% !important;
    border-radius: 18px !important;
  }

  .modern-login-card {
    width: min(318px, calc(100vw - 52px)) !important;
    padding: 24px !important;
    border-radius: 18px !important;
    box-shadow:
      18px 26px 50px rgba(0, 28, 88, .28),
      0 0 0 1px rgba(255, 255, 255, .06),
      inset 0 1px 0 rgba(255, 255, 255, .34) !important;
  }

  .modern-login-card::before {
    border-radius: 18px !important;
  }

  .login-logo {
    margin-bottom: 22px !important;
    gap: 5px !important;
  }

  .login-logo-icon {
    font-size: 14px !important;
  }

  .login-logo h1 {
    margin-top: 18px !important;
    font-size: 25px !important;
  }

  .login-logo p {
    font-size: 12px !important;
  }

  .modern-login-form {
    gap: 8px !important;
  }

  .modern-login-form label {
    margin: 8px 0 -1px !important;
    font-size: 11px !important;
  }

  .modern-login-form input {
    height: 42px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }

  .modern-login-form input::placeholder {
    color: rgba(6, 32, 72, .32) !important;
  }

  .login-submit {
    height: 43px !important;
    margin-top: 15px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  .login-shape {
    opacity: .45 !important;
    filter: drop-shadow(14px 18px 18px rgba(0, 31, 86, .18)) !important;
  }

  .login-shape-ring {
    top: 76px !important;
    left: calc(50% - 55px) !important;
    width: 74px !important;
    height: 74px !important;
    border-width: 14px !important;
  }

  .login-shape-pipe {
    left: -24px !important;
    top: 260px !important;
    width: 122px !important;
    height: 34px !important;
  }

  .login-shape-pipe::before {
    right: 68px !important;
    top: 44px !important;
    width: 74px !important;
    height: 24px !important;
  }

  .login-shape-loop {
    left: -38px !important;
    bottom: 168px !important;
    width: 112px !important;
    height: 76px !important;
    border-width: 17px !important;
  }

  .login-shape-pill {
    right: -48px !important;
    top: 250px !important;
    width: 86px !important;
    height: 178px !important;
    border-width: 25px !important;
  }

  .login-shape-wave {
    right: -34px !important;
    bottom: 172px !important;
    width: 116px !important;
    border-top-width: 12px !important;
  }

  .login-shape-cloud {
    right: -90px !important;
    bottom: 62px !important;
    width: 210px !important;
    height: 58px !important;
    opacity: .42 !important;
  }
}

@media (max-width: 380px) {
  .modern-login-card {
    width: min(300px, calc(100vw - 42px)) !important;
    padding: 22px !important;
  }

  .login-logo h1 {
    font-size: 23px !important;
  }

  .login-blue-panel {
    width: calc(100vw - 20px) !important;
  }
}

/* ===== DARK ENTERPRISE V16 - REMOVE MOBILE LOGIN BLACK BANDS ===== */
html:has(.login-stage),
body:has(.login-stage),
body:has(.login-stage) .login-shell,
body:has(.login-stage) .login-shell .container,
body:has(.login-stage) .login-stage {
  background-color: #0878d9 !important;
}

body:has(.login-stage) {
  margin: 0 !important;
}

@media (max-width: 760px) {
  html:has(.login-stage) {
    min-height: 100% !important;
    background:
      linear-gradient(150deg, #0053b5 0%, #0a84de 54%, #0069c9 100%) fixed !important;
  }

  body:has(.login-stage) {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background:
      radial-gradient(circle at 50% 38%, rgba(150, 226, 255, .40), transparent 0 16rem),
      radial-gradient(circle at 12% 69%, rgba(21, 122, 226, .42), transparent 0 15rem),
      linear-gradient(150deg, #0053b5 0%, #0a84de 54%, #0069c9 100%) fixed !important;
  }

  .login-shell {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: transparent !important;
  }

  .login-shell .container {
    max-width: none !important;
    background: transparent !important;
  }

  .login-stage {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 0 18px !important;
    background: transparent !important;
  }
}

/* ===== DARK ENTERPRISE V17 - IOS SAFARI CHROME COLOR ===== */
html:has(.login-stage) {
  color-scheme: light !important;
  background: #0878d9 !important;
}

body:has(.login-stage) {
  color-scheme: light !important;
  background-color: #0878d9 !important;
}

@media (max-width: 760px) {
  html:has(.login-stage),
  body:has(.login-stage) {
    overscroll-behavior: none !important;
  }

  html:has(.login-stage) {
    background:
      linear-gradient(#0878d9, #0878d9) padding-box,
      linear-gradient(150deg, #0053b5 0%, #0a84de 54%, #0069c9 100%) fixed !important;
  }

  body:has(.login-stage) {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  body:has(.login-stage)::after {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: max(env(safe-area-inset-bottom), 32px) !important;
    pointer-events: none !important;
    background: #0878d9 !important;
    z-index: 0 !important;
  }
}

/* ===== DARK ENTERPRISE V18 - POLISHED LOGIN BUTTON ===== */
.login-submit {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 50px !important;
  margin-top: 20px !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, .34), transparent 0 38%),
    linear-gradient(135deg, #4f7dff 0%, #2358ee 46%, #1232bf 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 1px rgba(0, 18, 84, .28) !important;
  box-shadow:
    0 18px 34px rgba(11, 51, 173, .34),
    0 7px 14px rgba(4, 28, 101, .22),
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(0, 12, 80, .36) !important;
  transform: translateZ(0) !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease !important;
}

.login-submit::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px 1px auto !important;
  height: 42% !important;
  border-radius: 11px 11px 9px 9px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.login-submit::after {
  content: "" !important;
  position: absolute !important;
  top: -45% !important;
  left: -38% !important;
  width: 34% !important;
  height: 190% !important;
  transform: rotate(22deg) !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent) !important;
  opacity: .55 !important;
  pointer-events: none !important;
  transition: left .42s ease !important;
}

.login-submit:hover {
  transform: translateY(-2px) !important;
  filter: saturate(1.08) brightness(1.04) !important;
  box-shadow:
    0 24px 46px rgba(11, 51, 173, .42),
    0 10px 20px rgba(4, 28, 101, .25),
    inset 0 1px 0 rgba(255, 255, 255, .36),
    inset 0 -1px 0 rgba(0, 12, 80, .36) !important;
}

.login-submit:hover::after {
  left: 112% !important;
}

.login-submit:active {
  transform: translateY(0) scale(.99) !important;
  box-shadow:
    0 11px 22px rgba(11, 51, 173, .30),
    inset 0 2px 8px rgba(0, 12, 80, .26) !important;
}

.login-submit:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, .22),
    0 0 0 7px rgba(27, 87, 242, .30),
    0 20px 40px rgba(11, 51, 173, .38),
    inset 0 1px 0 rgba(255, 255, 255, .36) !important;
}

@media (max-width: 760px) {
  .login-submit {
    height: 46px !important;
    margin-top: 16px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }

  .login-submit::before {
    border-radius: 10px 10px 8px 8px !important;
  }
}

/* ===== DARK ENTERPRISE V19 - REFINED LOGIN CARD HEADER ===== */
.modern-login-card {
  padding: 36px 36px 34px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .24), transparent 0 8rem),
    radial-gradient(circle at 100% 95%, rgba(0, 68, 173, .22), transparent 0 10rem),
    linear-gradient(145deg, rgba(66, 169, 255, .72), rgba(24, 132, 230, .54) 54%, rgba(20, 122, 222, .48)),
    rgba(47, 149, 241, .58) !important;
  border: 1px solid rgba(221, 244, 255, .42) !important;
  box-shadow:
    30px 34px 70px rgba(0, 27, 86, .32),
    0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .48),
    inset 0 -42px 70px rgba(0, 61, 158, .13) !important;
}

.modern-login-card::before {
  border-radius: 22px !important;
  opacity: .75 !important;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, .22), transparent 32%),
    linear-gradient(90deg, transparent 0 44%, rgba(255, 255, 255, .09) 52%, transparent 63%) !important;
}

.login-logo {
  gap: 9px !important;
  margin-bottom: 28px !important;
}

.login-logo-icon {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .50), transparent 0 34%),
    linear-gradient(135deg, #8ee7ff 0%, #4da2ff 48%, #5157f4 100%) !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  box-shadow:
    0 18px 36px rgba(16, 78, 190, .32),
    inset 0 1px 0 rgba(255, 255, 255, .48),
    inset 0 -10px 18px rgba(20, 57, 181, .16) !important;
}

.login-logo h1 {
  margin-top: 14px !important;
  font-size: 32px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 12px 24px rgba(0, 37, 114, .20) !important;
}

.login-logo p {
  margin-top: 2px !important;
  color: rgba(239, 249, 255, .82) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.modern-login-form label {
  color: rgba(255, 255, 255, .94) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 1px rgba(0, 44, 120, .18) !important;
}

.modern-login-form input {
  border-color: rgba(255, 255, 255, .56) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .96)) !important;
  box-shadow:
    0 12px 22px rgba(0, 45, 120, .13),
    inset 0 1px 0 rgba(255, 255, 255, .85) !important;
}

@media (max-width: 760px) {
  .modern-login-card {
    padding: 26px 24px 25px !important;
    border-radius: 20px !important;
  }

  .modern-login-card::before {
    border-radius: 20px !important;
  }

  .login-logo-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }

  .login-logo h1 {
    margin-top: 12px !important;
    font-size: 27px !important;
  }

  .login-logo p {
    font-size: 12px !important;
  }
}

/* ===== DARK ENTERPRISE V20 - NAVY BLUE GLASS PANEL ===== */
:root {
  --glass-bg: #07131f;
  --glass-bg-deep: #050c15;
  --glass-panel: rgba(13, 31, 50, .72);
  --glass-panel-strong: rgba(17, 40, 64, .86);
  --glass-panel-soft: rgba(255, 255, 255, .045);
  --glass-line: rgba(142, 199, 255, .16);
  --glass-line-strong: rgba(129, 202, 255, .30);
  --glass-text: #f2f8ff;
  --glass-muted: #94a9bb;
  --glass-soft: #c6d8e7;
  --glass-blue: #4f8cff;
  --glass-blue-2: #1d5dff;
  --glass-cyan: #37d5ff;
  --glass-green: #51e6b2;
  --glass-yellow: #f6c65b;
  --glass-red: #ff5f7a;
}

body:not(:has(.login-stage)) {
  background:
    radial-gradient(circle at 22% 12%, rgba(55, 213, 255, .13), transparent 0 25rem),
    radial-gradient(circle at 78% 0%, rgba(79, 140, 255, .16), transparent 0 28rem),
    radial-gradient(circle at 55% 86%, rgba(81, 230, 178, .08), transparent 0 30rem),
    linear-gradient(145deg, var(--glass-bg-deep) 0%, var(--glass-bg) 48%, #081827 100%) fixed !important;
  color: var(--glass-text) !important;
}

body:not(:has(.login-stage))::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
  opacity: .42 !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .86), transparent 82%) !important;
  z-index: 0 !important;
}

body:not(:has(.login-stage))::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(115deg, transparent 0 32%, rgba(79, 140, 255, .055) 43%, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(55, 213, 255, .09), transparent 0 23rem) !important;
  opacity: .85 !important;
  z-index: 0 !important;
}

.app-shell {
  position: relative !important;
  z-index: 1 !important;
  grid-template-columns: 286px minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 18px !important;
}

.app-main {
  min-width: 0 !important;
}

.container {
  max-width: 1580px !important;
}

.sidebar,
.topbar-v5,
.topbar-v4,
.dashboard-toolbar,
.toolbar,
.shop-card,
.dashboard-shop-card,
.table-card,
.edit-card,
.summary-card,
.stat-box,
.opinions,
.socials div,
.invoice-summary-card,
.integration-card,
.integration-summary-card,
.alerts-metric,
.alert-item,
.ticket-panel,
.ticket-detail-panel,
.messenger-sidebar-panel,
.messenger-thread-panel,
.manager-card,
.manager-metrics article,
.shop-history-metrics article,
.checklist-item,
.feature-toggle {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .060), rgba(255, 255, 255, .026)),
    var(--glass-panel) !important;
  border: 1px solid var(--glass-line) !important;
  box-shadow:
    0 24px 70px rgba(0, 10, 22, .34),
    inset 0 1px 0 rgba(255, 255, 255, .075) !important;
  backdrop-filter: blur(20px) saturate(128%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(128%) !important;
}

.sidebar,
.topbar-v5,
.topbar-v4 {
  background:
    radial-gradient(circle at 20% 0%, rgba(55, 213, 255, .12), transparent 0 14rem),
    linear-gradient(180deg, rgba(18, 45, 72, .82), rgba(7, 19, 31, .88)),
    rgba(8, 19, 31, .86) !important;
}

.sidebar {
  top: 18px !important;
  height: calc(100vh - 36px) !important;
  padding: 18px !important;
  border-radius: 18px !important;
  overflow: auto !important;
}

.brand {
  padding: 4px 2px 18px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid rgba(142, 199, 255, .14) !important;
}

.brand-logo,
.logo,
.mini-logo,
.topbar-avatar {
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, .42), transparent 0 36%),
    linear-gradient(135deg, #62d9ff 0%, #4f8cff 52%, #3554f4 100%) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow:
    0 16px 34px rgba(31, 107, 255, .26),
    inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}

.brand-logo {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
}

.brand strong,
.topbar-title strong,
.page-header h1,
.hero h1,
h1,
h2,
h3 {
  color: var(--glass-text) !important;
  letter-spacing: 0 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.brand span,
.topbar-title .topbar-kicker,
.page-header p,
.muted,
small {
  color: var(--glass-muted) !important;
}

.side-nav {
  gap: 6px !important;
}

.side-nav a {
  position: relative !important;
  min-height: 42px !important;
  padding: 9px 11px !important;
  border-radius: 13px !important;
  border: 1px solid transparent !important;
  color: var(--glass-soft) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  transform: none !important;
}

.side-nav a::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 3px !important;
  height: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--glass-cyan), var(--glass-green)) !important;
  transform: translateY(-50%) !important;
  transition: height .16s ease !important;
}

.side-nav a span {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .065) !important;
  border: 1px solid rgba(142, 199, 255, .10) !important;
  color: #bcd6ea !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.side-nav a:hover {
  color: #ffffff !important;
  background: rgba(79, 140, 255, .10) !important;
  border-color: rgba(142, 199, 255, .16) !important;
}

.side-nav a:hover::before,
.side-nav .active-nav::before {
  height: 24px !important;
}

.side-nav .active-nav {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, rgba(55, 213, 255, .16), rgba(79, 140, 255, .15)),
    rgba(255, 255, 255, .045) !important;
  border-color: rgba(55, 213, 255, .34) !important;
  box-shadow:
    0 16px 34px rgba(22, 104, 220, .16),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.side-nav .active-nav span {
  background: linear-gradient(135deg, rgba(55, 213, 255, .22), rgba(79, 140, 255, .22)) !important;
  color: #ffffff !important;
}

.topbar-v5,
.topbar-v4 {
  top: 14px !important;
  min-height: 64px !important;
  padding: 12px 14px !important;
  margin-bottom: 18px !important;
  border-radius: 16px !important;
}

.topbar-title .topbar-kicker,
.eyebrow {
  color: #8bcfff !important;
  letter-spacing: .12em !important;
  font-size: 10px !important;
}

.topbar-title strong {
  font-size: 19px !important;
}

.topbar-actions {
  gap: 8px !important;
}

.topbar-icon,
.topbar-profile {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)),
    rgba(9, 24, 39, .78) !important;
  border: 1px solid rgba(142, 199, 255, .20) !important;
  color: var(--glass-text) !important;
  box-shadow:
    0 14px 30px rgba(0, 9, 22, .22),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.topbar-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

.topbar-profile {
  min-height: 42px !important;
  border-radius: 13px !important;
  padding: 5px 9px 5px 6px !important;
}

.topbar-profile:hover,
.topbar-icon:hover {
  border-color: rgba(55, 213, 255, .42) !important;
  transform: translateY(-1px) !important;
}

.topbar-badge {
  background: linear-gradient(135deg, #ff5f7a, #ff375f) !important;
  color: #fff !important;
  border: 2px solid #0b1724 !important;
  box-shadow: 0 8px 18px rgba(255, 55, 95, .30) !important;
}

.topbar-dropdown {
  background:
    linear-gradient(180deg, rgba(20, 44, 68, .96), rgba(8, 19, 31, .98)) !important;
  border: 1px solid rgba(142, 199, 255, .22) !important;
  border-radius: 16px !important;
  box-shadow: 0 26px 80px rgba(0, 8, 22, .46) !important;
}

.page-header {
  margin: 0 0 18px !important;
  padding: 6px 0 0 !important;
}

.page-header h1,
.hero h1 {
  font-size: clamp(32px, 3.2vw, 48px) !important;
  line-height: 1.04 !important;
}

.dashboard-toolbar,
.toolbar,
.alerts-filter-bar,
.checklist-filter-bar {
  padding: 12px !important;
  gap: 10px !important;
  border-radius: 16px !important;
}

input,
select,
textarea {
  min-height: 42px !important;
  border-radius: 12px !important;
  background: rgba(4, 14, 24, .72) !important;
  border: 1px solid rgba(142, 199, 255, .16) !important;
  color: var(--glass-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 10px 24px rgba(0, 8, 22, .16) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(55, 213, 255, .56) !important;
  box-shadow:
    0 0 0 4px rgba(55, 213, 255, .11),
    0 16px 34px rgba(0, 10, 22, .22) !important;
}

.button-link,
.details,
.logout,
button:not(.review-toggle):not(.info-button):not(.login-submit) {
  min-height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(142, 199, 255, .22) !important;
  background:
    linear-gradient(180deg, rgba(79, 140, 255, .92), rgba(29, 93, 255, .90)) !important;
  color: #ffffff !important;
  box-shadow:
    0 14px 30px rgba(29, 93, 255, .24),
    inset 0 1px 0 rgba(255, 255, 255, .20) !important;
  font-weight: 850 !important;
}

.details,
.button-link.invoice-clear-filter,
.button-link.invoice-export-link,
.manager-actions .button-link,
.shop-history-actions .button-link {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .032)),
    rgba(9, 24, 39, .72) !important;
  color: var(--glass-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.button-link:hover,
.details:hover,
button:not(.review-toggle):not(.info-button):not(.login-submit):hover {
  transform: translateY(-1px) !important;
  border-color: rgba(55, 213, 255, .38) !important;
  filter: brightness(1.05) saturate(1.08) !important;
}

.summary,
.invoice-summary-grid,
.integration-summary-grid,
.manager-metrics,
.shop-history-metrics {
  gap: 14px !important;
}

.summary-card,
.invoice-summary-card,
.integration-summary-card,
.manager-metrics article,
.shop-history-metrics article,
.alerts-metric,
.ticket-metric {
  min-height: 104px !important;
  padding: 16px !important;
  border-radius: 16px !important;
}

.summary-card b,
.invoice-summary-card b,
.integration-summary-card b,
.manager-metrics strong,
.shop-history-metrics strong,
.alerts-metric strong,
.ticket-metric strong {
  color: var(--glass-text) !important;
  font-size: clamp(26px, 2vw, 36px) !important;
  font-variant-numeric: tabular-nums !important;
}

.summary-card span,
.invoice-summary-card span,
.integration-summary-card span,
.manager-metrics span,
.shop-history-metrics span,
.alerts-metric span,
.ticket-metric span {
  color: #9fdcff !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

.grid,
.dashboard-grid,
.integration-grid,
.manager-grid,
.shop-history-grid {
  gap: 16px !important;
}

.shop-card,
.dashboard-shop-card,
.integration-card {
  border-radius: 16px !important;
  padding: 16px !important;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}

.shop-card:hover,
.dashboard-shop-card:hover,
.integration-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(55, 213, 255, .34) !important;
  box-shadow:
    0 30px 82px rgba(0, 10, 22, .42),
    0 0 0 1px rgba(55, 213, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.dashboard-shop-head,
.shop-header {
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(142, 199, 255, .12) !important;
}

.dashboard-shop-head h2,
.shop-header h2 {
  font-size: 17px !important;
  color: var(--glass-text) !important;
}

.stat-box,
.opinions,
.socials div,
.invoice-details-box div,
.point-info-box,
.shop-history-note,
.checklist-shop-status,
.attachment-tile,
.fault-file-thumb {
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .046), rgba(255, 255, 255, .020)),
    rgba(5, 16, 28, .54) !important;
  border: 1px solid rgba(142, 199, 255, .13) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.review-positive {
  background: rgba(81, 230, 178, .075) !important;
  border-color: rgba(81, 230, 178, .22) !important;
}

.review-negative {
  background: rgba(255, 95, 122, .09) !important;
  border-color: rgba(255, 95, 122, .26) !important;
}

.review-badge,
.active,
.ok,
.warning,
.late,
.ticket-status,
.point-badge,
.checklist-pills span {
  border-radius: 999px !important;
  font-size: 11px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.active,
.ok {
  color: #b9ffe6 !important;
  background: rgba(81, 230, 178, .11) !important;
  border-color: rgba(81, 230, 178, .28) !important;
}

.warning {
  color: #ffe6a7 !important;
  background: rgba(246, 198, 91, .12) !important;
  border-color: rgba(246, 198, 91, .30) !important;
}

.late {
  color: #ffd0d9 !important;
  background: rgba(255, 95, 122, .12) !important;
  border-color: rgba(255, 95, 122, .30) !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
}

th {
  color: #9fdcff !important;
  background: rgba(6, 18, 30, .78) !important;
  border-bottom: 0 !important;
}

td {
  background: rgba(255, 255, 255, .025) !important;
  border-top: 1px solid rgba(142, 199, 255, .08) !important;
  border-bottom: 1px solid rgba(142, 199, 255, .08) !important;
}

tbody tr:hover td {
  background: rgba(79, 140, 255, .065) !important;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  .sidebar {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: 420px !important;
  }

  .topbar-v5,
  .topbar-v4 {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 760px) {
  .app-shell {
    gap: 12px !important;
  }

  .sidebar {
    border-radius: 16px !important;
    padding: 14px !important;
  }

  .topbar-v5,
  .topbar-v4 {
    display: grid !important;
    gap: 12px !important;
    border-radius: 16px !important;
  }

  .topbar-actions {
    justify-content: space-between !important;
  }

  .topbar-profile {
    max-width: 100% !important;
  }

  .dashboard-toolbar,
  .toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .page-header h1,
  .hero h1 {
    font-size: 34px !important;
  }

  .shop-card,
  .dashboard-shop-card,
  .table-card,
  .edit-card {
    border-radius: 15px !important;
    padding: 14px !important;
  }
}

/* ===== DARK ENTERPRISE V21 - MESSENGER LIKE CHAT ===== */
.messenger-page-header {
  margin-bottom: 12px !important;
}

.messenger-shell {
  display: grid !important;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr) !important;
  gap: 14px !important;
  min-height: calc(100vh - 156px) !important;
  align-items: stretch !important;
}

.messenger-sidebar-panel,
.messenger-thread-panel {
  border-radius: 22px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.messenger-sidebar-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 680px !important;
}

.messenger-panel-head,
.messenger-thread-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 74px !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid rgba(142, 199, 255, .13) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .024)),
    rgba(5, 16, 28, .34) !important;
}

.messenger-panel-head {
  justify-content: space-between !important;
}

.messenger-panel-head h2,
.messenger-thread-head h2 {
  margin: 0 !important;
  color: var(--glass-text) !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
}

.messenger-panel-head span,
.messenger-thread-head span {
  display: block !important;
  margin-top: 4px !important;
  color: var(--glass-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.messenger-search {
  padding: 12px 14px 4px !important;
}

.messenger-search input {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  padding-left: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .060), rgba(255, 255, 255, .026)),
    rgba(4, 14, 24, .72) !important;
}

.messenger-new-drawer {
  margin: 10px 14px 8px !important;
  border: 1px solid rgba(142, 199, 255, .14) !important;
  border-radius: 16px !important;
  background: rgba(5, 16, 28, .44) !important;
  overflow: hidden !important;
}

.messenger-new-drawer summary {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 14px !important;
  cursor: pointer !important;
  color: var(--glass-text) !important;
  font-weight: 900 !important;
  list-style: none !important;
}

.messenger-new-drawer summary::-webkit-details-marker {
  display: none !important;
}

.messenger-new-drawer summary::after {
  content: "+" !important;
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(79, 140, 255, .18) !important;
  color: #bfe7ff !important;
}

.messenger-new-drawer[open] summary::after {
  content: "-" !important;
}

.messenger-start-form {
  margin: 0 !important;
  padding: 12px !important;
  border: 0 !important;
  border-top: 1px solid rgba(142, 199, 255, .10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.messenger-section-title {
  padding: 14px 18px 8px !important;
  color: #9fdcff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.messenger-conversation-list {
  display: grid !important;
  gap: 6px !important;
  max-height: none !important;
  overflow: auto !important;
  padding: 0 10px 10px !important;
}

.messenger-conversation {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 11px !important;
  min-height: 66px !important;
  padding: 10px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--glass-text) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.messenger-conversation:hover,
.messenger-conversation.is-active {
  background:
    linear-gradient(135deg, rgba(55, 213, 255, .12), rgba(79, 140, 255, .10)),
    rgba(255, 255, 255, .035) !important;
  border-color: rgba(55, 213, 255, .22) !important;
}

.messenger-conversation.has-unread {
  background: rgba(79, 140, 255, .08) !important;
}

.messenger-conversation strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--glass-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.messenger-conversation small {
  display: block !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--glass-muted) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.messenger-conversation > span,
.messenger-conversation-meta span {
  min-width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--glass-cyan), var(--glass-blue)) !important;
  color: #031224 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

.messenger-conversation-meta {
  display: grid !important;
  justify-items: end !important;
  gap: 6px !important;
}

.messenger-conversation-meta time {
  color: #86a9c2 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.messenger-avatar {
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, .36), transparent 0 34%),
    linear-gradient(135deg, rgba(55, 213, 255, .32), rgba(79, 140, 255, .30)) !important;
  border: 1px solid rgba(142, 199, 255, .18) !important;
  color: #f7fbff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.messenger-avatar.large {
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
}

.messenger-thread-panel {
  min-height: 680px !important;
  display: flex !important;
  flex-direction: column !important;
}

.messenger-back {
  display: none !important;
}

.messenger-members {
  display: flex !important;
  gap: 6px !important;
  overflow: auto !important;
  padding: 9px 16px !important;
  border-bottom: 1px solid rgba(142, 199, 255, .10) !important;
  background: rgba(5, 16, 28, .20) !important;
}

.messenger-members span {
  flex: 0 0 auto !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .055) !important;
  color: var(--glass-soft) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.messenger-thread {
  flex: 1 !important;
  min-height: 420px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 20px 18px !important;
  overflow: auto !important;
  background:
    radial-gradient(circle at 15% 20%, rgba(55, 213, 255, .08), transparent 0 18rem),
    radial-gradient(circle at 90% 80%, rgba(79, 140, 255, .10), transparent 0 20rem),
    rgba(3, 10, 18, .20) !important;
}

.messenger-message {
  max-width: min(650px, 74%) !important;
  width: fit-content !important;
  padding: 10px 12px 8px !important;
  border: 1px solid rgba(142, 199, 255, .13) !important;
  border-radius: 18px 18px 18px 6px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .080), rgba(255, 255, 255, .040)),
    rgba(14, 33, 52, .78) !important;
  box-shadow: 0 14px 32px rgba(0, 8, 22, .18) !important;
}

.messenger-message.is-own {
  align-self: flex-end !important;
  border-radius: 18px 18px 6px 18px !important;
  border-color: rgba(67, 163, 255, .34) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .20), transparent 0 44%),
    linear-gradient(135deg, rgba(79, 140, 255, .96), rgba(29, 93, 255, .92)) !important;
  color: #ffffff !important;
}

.messenger-message-meta {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 5px !important;
}

.messenger-message-meta strong {
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  opacity: .92 !important;
}

.messenger-message-meta span {
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  opacity: .62 !important;
}

.messenger-message p {
  margin: 0 !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.messenger-typing {
  min-height: 26px !important;
  padding: 0 18px 8px !important;
  color: #9fdcff !important;
  background: rgba(3, 10, 18, .20) !important;
  font-size: 12px !important;
}

.messenger-reply-form[data-messenger-form] {
  position: sticky !important;
  bottom: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  padding: 12px !important;
  border-top: 1px solid rgba(142, 199, 255, .14) !important;
  background:
    linear-gradient(180deg, rgba(13, 31, 50, .88), rgba(6, 17, 29, .95)) !important;
  backdrop-filter: blur(18px) !important;
}

.messenger-composer {
  display: grid !important;
  gap: 8px !important;
}

.messenger-emoji-bar {
  display: flex !important;
  gap: 6px !important;
  overflow: auto !important;
  padding-bottom: 2px !important;
}

.messenger-emoji-bar button {
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .070) !important;
  border: 1px solid rgba(142, 199, 255, .15) !important;
  box-shadow: none !important;
}

.messenger-reply-form textarea {
  min-height: 44px !important;
  max-height: 150px !important;
  resize: none !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
}

.messenger-file-button {
  width: max-content !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(142, 199, 255, .16) !important;
  background: rgba(255, 255, 255, .055) !important;
  color: var(--glass-soft) !important;
  cursor: pointer !important;
}

.messenger-file-button.has-file::after {
  content: attr(data-file-name) !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #9fdcff !important;
}

.messenger-file-button input {
  display: none !important;
}

.messenger-placeholder {
  margin: auto !important;
  width: min(420px, calc(100% - 32px)) !important;
  padding: 26px !important;
  border-radius: 22px !important;
  text-align: center !important;
}

@media (max-width: 980px) {
  .messenger-shell {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .messenger-sidebar-panel,
  .messenger-thread-panel {
    min-height: auto !important;
  }
}

@media (max-width: 760px) {
  .messenger-page-header {
    display: none !important;
  }

  .messenger-shell {
    display: block !important;
    min-height: calc(100dvh - 112px) !important;
  }

  .messenger-shell.is-chat-open .messenger-sidebar-panel {
    display: none !important;
  }

  .messenger-thread-panel {
    min-height: calc(100dvh - 112px) !important;
    border-radius: 18px !important;
  }

  .messenger-panel-head,
  .messenger-thread-head {
    min-height: 64px !important;
    padding: 12px !important;
  }

  .messenger-back {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    border: 1px solid rgba(142, 199, 255, .18) !important;
    background: rgba(255, 255, 255, .065) !important;
    color: transparent !important;
    text-decoration: none !important;
  }

  .messenger-back::before {
    content: "<" !important;
    color: var(--glass-text) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
  }

  .messenger-conversation-list {
    padding-bottom: 14px !important;
  }

  .messenger-thread {
    min-height: calc(100dvh - 278px) !important;
    padding: 14px 12px !important;
  }

  .messenger-message {
    max-width: 86% !important;
  }

  .messenger-reply-form[data-messenger-form] {
    grid-template-columns: 1fr auto !important;
    padding: 10px !important;
  }

  .messenger-reply-form[data-messenger-form] > button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    color: transparent !important;
  }

  .messenger-reply-form[data-messenger-form] > button::after {
    content: ">" !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
  }
}
/* V22 - messenger timeline polish */
.messenger-day-separator {
    align-self: center !important;
    margin: 8px auto 10px !important;
    padding: 6px 12px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, .72) !important;
    color: rgba(226, 232, 240, .78) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    line-height: 1 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
}

.messenger-message.is-own .messenger-message-meta {
    justify-content: flex-end !important;
}

.messenger-message.is-own .messenger-message-meta strong {
    display: none !important;
}

.messenger-message-status {
    margin-top: 5px !important;
    text-align: right !important;
    color: rgba(226, 232, 240, .72) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
}

/* V23 - messenger app feel */
.messenger-page-header {
    margin-bottom: 14px !important;
}

.messenger-shell {
    grid-template-columns: 360px minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: calc(100vh - 156px) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.messenger-sidebar-panel,
.messenger-thread-panel {
    border: 1px solid rgba(96, 165, 250, .16) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(59, 130, 246, .12), transparent 0 34%),
        linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(3, 10, 18, .96)) !important;
    box-shadow: 0 22px 60px rgba(0, 8, 22, .28) !important;
    overflow: hidden !important;
}

.messenger-sidebar-panel {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.messenger-panel-head {
    padding: 16px 16px 10px !important;
    border-bottom: 0 !important;
    background: transparent !important;
}

.messenger-panel-head h2 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
}

.messenger-panel-head span {
    margin-top: 4px !important;
    color: rgba(203, 213, 225, .68) !important;
    font-size: 12px !important;
}

.messenger-search {
    padding: 0 14px 12px !important;
}

.messenger-search input {
    height: 42px !important;
    border-radius: 999px !important;
    border-color: rgba(96, 165, 250, .18) !important;
    background: rgba(2, 6, 23, .56) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.messenger-new-drawer {
    margin: 0 14px 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(96, 165, 250, .14) !important;
    background: rgba(15, 23, 42, .58) !important;
}

.messenger-new-drawer > summary {
    min-height: 42px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #dbeafe !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.messenger-start-form {
    padding: 12px !important;
    border-top: 1px solid rgba(96, 165, 250, .12) !important;
}

.messenger-section-title {
    padding: 8px 18px 6px !important;
    color: rgba(147, 197, 253, .72) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}

.messenger-conversation-list {
    padding: 0 10px 8px !important;
    gap: 4px !important;
}

.messenger-conversation {
    position: relative !important;
    min-height: 66px !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 9px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

.messenger-conversation.is-hidden {
    display: none !important;
}

.messenger-conversation:hover {
    transform: translateX(2px) !important;
    border-color: rgba(96, 165, 250, .15) !important;
    background: rgba(30, 41, 59, .42) !important;
}

.messenger-conversation.is-active {
    border-color: rgba(56, 189, 248, .38) !important;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .20), rgba(8, 145, 178, .14)),
        rgba(15, 23, 42, .76) !important;
}

.messenger-conversation.has-unread::before,
.messenger-conversation.is-active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 18px !important;
    bottom: 18px !important;
    width: 3px !important;
    border-radius: 999px !important;
    background: #38bdf8 !important;
}

.messenger-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .38), transparent 0 22%),
        linear-gradient(135deg, #2563eb, #06b6d4) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .22) !important;
}

.messenger-avatar {
    position: relative !important;
}

.messenger-avatar.is-online::after {
    content: "" !important;
    position: absolute !important;
    right: -1px !important;
    bottom: -1px !important;
    width: 12px !important;
    height: 12px !important;
    border: 3px solid rgba(15, 23, 42, .96) !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .14) !important;
}

.messenger-avatar.large {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
}

.messenger-conversation strong {
    display: block !important;
    max-width: 100% !important;
    color: #e5eef8 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.messenger-conversation small {
    display: block !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    color: rgba(203, 213, 225, .58) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.messenger-conversation > span {
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .32) !important;
}

.messenger-thread-panel {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.messenger-thread-head {
    flex: 0 0 auto !important;
    min-height: 74px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(96, 165, 250, .12) !important;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .84), rgba(15, 23, 42, .60)) !important;
}

.messenger-thread-head h2 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
}

.messenger-thread-head span {
    color: rgba(203, 213, 225, .62) !important;
    font-size: 12px !important;
}

.messenger-members {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(96, 165, 250, .10) !important;
    background: rgba(2, 6, 23, .18) !important;
}

.messenger-members span {
    border-radius: 999px !important;
    background: rgba(30, 41, 59, .66) !important;
    border-color: rgba(96, 165, 250, .12) !important;
}

.messenger-group-settings {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(96, 165, 250, .10) !important;
    background: rgba(2, 6, 23, .16) !important;
}

.messenger-group-settings > summary {
    min-height: 42px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #dbeafe !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.messenger-group-settings-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 14px 12px !important;
}

.messenger-group-settings-form {
    padding: 12px !important;
    border: 1px solid rgba(96, 165, 250, .12) !important;
    border-radius: 16px !important;
    background: rgba(15, 23, 42, .54) !important;
}

.messenger-group-settings-form label {
    display: block !important;
    margin-bottom: 8px !important;
    color: rgba(203, 213, 225, .72) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

.messenger-inline-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
}

.messenger-inline-form input,
.messenger-inline-form select {
    min-height: 40px !important;
    border-radius: 13px !important;
}

.messenger-inline-form button,
.messenger-member-row button {
    min-height: 40px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    white-space: nowrap !important;
}

.messenger-group-manage-members {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 14px 14px !important;
}

.messenger-member-row {
    min-width: 0 !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 8px 7px 12px !important;
    border: 1px solid rgba(96, 165, 250, .12) !important;
    border-radius: 14px !important;
    background: rgba(15, 23, 42, .46) !important;
}

.messenger-member-row span {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #e5eef8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.messenger-member-row em {
    color: rgba(148, 163, 184, .68) !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

.messenger-thread {
    flex: 1 1 auto !important;
    min-height: 430px !important;
    gap: 8px !important;
    padding: 18px !important;
    background:
        radial-gradient(circle at 10% 12%, rgba(59, 130, 246, .08), transparent 0 26rem),
        radial-gradient(circle at 92% 88%, rgba(6, 182, 212, .07), transparent 0 24rem),
        rgba(2, 6, 23, .18) !important;
}

.messenger-message {
    max-width: min(620px, 68%) !important;
    padding: 9px 12px 8px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 19px 19px 19px 7px !important;
    background:
        linear-gradient(180deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .90)) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22) !important;
}

.messenger-message.is-own {
    border-radius: 19px 19px 7px 19px !important;
    border-color: rgba(96, 165, 250, .30) !important;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .98), rgba(8, 145, 178, .96)) !important;
}

.messenger-message p {
    font-size: 13px !important;
    line-height: 1.42 !important;
}

.messenger-reply-form[data-messenger-form] {
    flex: 0 0 auto !important;
    padding: 12px 14px !important;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .84), rgba(2, 6, 23, .96)) !important;
}

.messenger-composer {
    grid-template-columns: 1fr !important;
}

.messenger-reply-form textarea {
    min-height: 48px !important;
    border-radius: 18px !important;
    border-color: rgba(96, 165, 250, .18) !important;
    background: rgba(15, 23, 42, .82) !important;
}

.messenger-file-button {
    min-height: 30px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
}

.messenger-reply-form[data-messenger-form] > button {
    min-height: 48px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .28) !important;
}

@media (max-width: 760px) {
    .messenger-shell {
        min-height: calc(100dvh - 74px) !important;
    }

    .messenger-sidebar-panel,
    .messenger-thread-panel {
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        min-height: calc(100dvh - 74px) !important;
    }

    .messenger-thread {
        min-height: calc(100dvh - 224px) !important;
        padding: 14px 10px !important;
    }

    .messenger-message {
        max-width: 84% !important;
    }

    .messenger-conversation {
        min-height: 72px !important;
        padding: 10px 12px !important;
    }
}

/* V24 - messenger fine tune */
.messenger-sidebar-panel {
    scrollbar-color: rgba(56, 189, 248, .42) rgba(15, 23, 42, .46) !important;
}

.messenger-conversation > div:nth-child(2) {
    min-width: 0 !important;
}

.messenger-conversation-main {
    min-width: 0 !important;
}

.messenger-conversation-main small b {
    color: rgba(226, 232, 240, .78) !important;
    font-weight: 950 !important;
}

.messenger-presence-label {
    display: block !important;
    margin-top: 4px !important;
    color: rgba(148, 163, 184, .62) !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

.messenger-conversation .messenger-avatar.is-online ~ .messenger-conversation-main .messenger-presence-label {
    color: rgba(134, 239, 172, .86) !important;
}

.messenger-conversation-side {
    min-width: 42px !important;
    display: grid !important;
    justify-items: end !important;
    align-content: center !important;
    gap: 6px !important;
}

.messenger-conversation-side time {
    color: rgba(203, 213, 225, .52) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
}

.messenger-conversation-side span {
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .32) !important;
}

.messenger-conversation::after {
    content: "" !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    border-top: 2px solid rgba(203, 213, 225, .30) !important;
    border-right: 2px solid rgba(203, 213, 225, .30) !important;
    transform: translateY(-50%) rotate(45deg) !important;
    opacity: 0 !important;
    transition: opacity .18s ease, right .18s ease !important;
}

.messenger-conversation:hover::after,
.messenger-conversation.is-active::after {
    right: 10px !important;
    opacity: 1 !important;
}

.messenger-conversation.has-unread strong {
    color: #ffffff !important;
}

.messenger-conversation.has-unread small {
    color: rgba(226, 232, 240, .82) !important;
    font-weight: 800 !important;
}

.messenger-thread::before {
    content: "" !important;
    position: sticky !important;
    top: -18px !important;
    display: block !important;
    height: 1px !important;
    margin-bottom: -1px !important;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .24), transparent) !important;
    opacity: .65 !important;
}

.messenger-message {
    animation: messengerBubbleIn .18s ease both !important;
}

@keyframes messengerBubbleIn {
    from {
        opacity: 0;
        transform: translateY(5px) scale(.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.messenger-typing {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.messenger-typing.is-visible::before {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #38bdf8 !important;
    box-shadow: 0 0 0 6px rgba(56, 189, 248, .10) !important;
    animation: messengerPulse 1.1s ease infinite !important;
}

@keyframes messengerPulse {
    0%, 100% {
        transform: scale(.82);
        opacity: .7;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

.messenger-attachment {
    margin-top: 8px !important;
    border-radius: 14px !important;
    border-color: rgba(147, 197, 253, .20) !important;
    background: rgba(2, 6, 23, .22) !important;
    overflow: hidden !important;
}

.messenger-attachment img {
    max-width: min(320px, 100%) !important;
    max-height: 240px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

.messenger-reply-form[data-messenger-form] > button:hover,
.messenger-file-button:hover,
.messenger-emoji-bar button:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.06) !important;
}

.messenger-reply-form[data-messenger-form] > button,
.messenger-file-button,
.messenger-emoji-bar button {
    transition: transform .16s ease, filter .16s ease, border-color .16s ease !important;
}

.messenger-jump-button {
    position: absolute !important;
    left: 50% !important;
    bottom: 92px !important;
    z-index: 8 !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(147, 197, 253, .22) !important;
    border-radius: 999px !important;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .96), rgba(8, 145, 178, .94)) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .01em !important;
    box-shadow: 0 16px 36px rgba(37, 99, 235, .28) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 8px) scale(.98) !important;
    transition: opacity .18s ease, transform .18s ease, filter .18s ease !important;
}

.messenger-jump-button.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) scale(1) !important;
}

.messenger-jump-button:hover {
    filter: brightness(1.08) !important;
}

/* V25 - global messenger notifications */
.side-nav a {
    position: relative !important;
}

.side-nav-label {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    font-style: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.side-nav-badge {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .30) !important;
}

.side-nav-badge.is-empty {
    display: none !important;
}

.side-nav a.has-message-unread {
    border-color: rgba(56, 189, 248, .24) !important;
}

.message-toast {
    position: fixed !important;
    right: 22px !important;
    bottom: 22px !important;
    z-index: 1200 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(147, 197, 253, .26) !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .18), transparent 0 32%),
        linear-gradient(135deg, rgba(37, 99, 235, .96), rgba(8, 145, 178, .94)) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: 0 22px 52px rgba(0, 0, 0, .34), 0 12px 28px rgba(37, 99, 235, .24) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(.98) !important;
    transition: opacity .18s ease, transform .18s ease !important;
}

.message-toast::before {
    content: "✉" !important;
    width: 26px !important;
    height: 26px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .16) !important;
}

.message-toast.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* V26 - messenger thread search */
.messenger-thread-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-top: 1px solid rgba(148, 163, 184, .10) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(56, 189, 248, .10), transparent 0 34%),
        rgba(2, 6, 23, .18) !important;
}

.messenger-thread-search input {
    width: 100% !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(147, 197, 253, .16) !important;
    border-radius: 999px !important;
    background: rgba(2, 6, 23, .38) !important;
    color: #eaf6ff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.messenger-thread-search input::placeholder {
    color: rgba(203, 213, 225, .52) !important;
}

.messenger-thread-search input:focus {
    border-color: rgba(56, 189, 248, .64) !important;
    background: rgba(8, 17, 31, .66) !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .10), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.messenger-thread-search span {
    min-width: 74px !important;
    color: rgba(186, 230, 253, .82) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    text-align: right !important;
}

.messenger-thread.is-searching .messenger-message.is-search-dim {
    opacity: .28 !important;
    filter: saturate(.65) !important;
}

.messenger-message.is-search-match {
    border-color: rgba(56, 189, 248, .72) !important;
    box-shadow:
        0 0 0 1px rgba(56, 189, 248, .18),
        0 16px 38px rgba(14, 165, 233, .14) !important;
}

/* V27 - messenger reactions */
.messenger-reactions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 8px !important;
}

.messenger-reactions > button,
.messenger-reaction-picker > button {
    min-width: 30px !important;
    min-height: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .70) !important;
    color: #eef7ff !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 1 !important;
    transform: none !important;
}

.messenger-message.is-own .messenger-reactions > button,
.messenger-message.is-own .messenger-reaction-picker > button {
    background: rgba(2, 6, 23, .22) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.messenger-reactions > button b {
    color: rgba(226, 232, 240, .86) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
}

.messenger-reactions > button.is-own {
    border-color: rgba(125, 211, 252, .65) !important;
    background: rgba(14, 165, 233, .18) !important;
}

.messenger-reaction-picker {
    display: inline-flex !important;
    gap: 4px !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    pointer-events: none !important;
    transition: opacity .16s ease, transform .16s ease !important;
}

.messenger-message:hover .messenger-reaction-picker,
.messenger-message:focus-within .messenger-reaction-picker {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

    .messenger-reactions > button:hover,
    .messenger-reaction-picker > button:hover {
        border-color: rgba(125, 211, 252, .52) !important;
        background: rgba(14, 165, 233, .18) !important;
        filter: none !important;
    }

/* V28 - communicator layout cleanup */
.messenger-page-header {
    display: none !important;
}

.messenger-shell {
    height: calc(100dvh - 112px) !important;
    min-height: 680px !important;
    display: grid !important;
    grid-template-columns: 340px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 8px !important;
}

.messenger-sidebar-panel,
.messenger-thread-panel {
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(15, 32, 54, .86), rgba(4, 12, 22, .96)) !important;
    border-color: rgba(96, 165, 250, .18) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28) !important;
}

.messenger-sidebar-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 14px !important;
}

.messenger-panel-head {
    min-height: 54px !important;
    padding: 0 0 12px !important;
    flex: 0 0 auto !important;
}

.messenger-panel-head h2 {
    font-size: 20px !important;
}

.messenger-panel-head span {
    margin-top: 3px !important;
    font-size: 11px !important;
}

.messenger-search,
.messenger-new-drawer,
.messenger-section-title {
    flex: 0 0 auto !important;
}

.messenger-conversation-list {
    max-height: none !important;
    overflow: auto !important;
    padding-right: 3px !important;
}

.messenger-conversation-list:last-child {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.messenger-conversation {
    min-height: 58px !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    border-radius: 15px !important;
}

.messenger-conversation strong {
    font-size: 12px !important;
}

.messenger-conversation small {
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
}

.messenger-presence-label {
    margin-top: 4px !important;
    font-size: 10px !important;
}

.messenger-thread-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.messenger-thread-head {
    min-height: 62px !important;
    padding: 10px 16px !important;
    background:
        linear-gradient(180deg, rgba(14, 30, 52, .92), rgba(9, 19, 34, .84)) !important;
}

.messenger-thread-head .messenger-avatar.large {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
}

.messenger-thread-head h2 {
    font-size: 17px !important;
}

.messenger-thread-head span {
    margin-top: 3px !important;
    font-size: 11px !important;
}

.messenger-thread-search {
    padding: 8px 12px !important;
}

.messenger-thread-search input {
    min-height: 34px !important;
}

.messenger-thread {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding: 16px 18px !important;
    overflow: auto !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(37, 99, 235, .10), transparent 0 280px),
        linear-gradient(180deg, rgba(6, 13, 25, .96), rgba(3, 10, 18, .98)) !important;
}

.messenger-thread::before {
    display: none !important;
}

.messenger-day-separator {
    margin: 4px auto 12px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, .78) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    color: rgba(226, 232, 240, .72) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
}

.messenger-message {
    width: fit-content !important;
    min-width: 150px !important;
    max-width: min(520px, 58%) !important;
    margin: 0 !important;
    padding: 9px 12px 7px !important;
    border-radius: 16px 16px 16px 6px !important;
    background: rgba(24, 35, 55, .92) !important;
    border-color: rgba(148, 163, 184, .14) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
}

.messenger-message.is-own {
    align-self: flex-end !important;
    border-radius: 16px 16px 6px 16px !important;
    background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    border-color: rgba(125, 211, 252, .24) !important;
}

.messenger-message-meta {
    margin-bottom: 5px !important;
    gap: 10px !important;
}

.messenger-message-meta strong {
    max-width: 260px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
}

.messenger-message-meta span {
    margin-left: auto !important;
    font-size: 10px !important;
}

.messenger-message p {
    font-size: 12px !important;
    line-height: 1.38 !important;
}

.messenger-message-status {
    margin-top: 7px !important;
    font-size: 9px !important;
}

.messenger-reply-form[data-messenger-form] {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    gap: 8px !important;
}

.messenger-emoji-bar {
    padding-bottom: 2px !important;
}

.messenger-reply-form textarea {
    min-height: 42px !important;
}

.messenger-reply-form[data-messenger-form] > button {
    min-height: 42px !important;
    border-radius: 14px !important;
}

@media (max-width: 1180px) {
    .messenger-shell {
        grid-template-columns: 310px minmax(0, 1fr) !important;
    }

    .messenger-message {
        max-width: min(500px, 70%) !important;
    }
}

@media (max-width: 760px) {
    .messenger-shell {
        height: calc(100dvh - 20px) !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-top: 0 !important;
    }

    .messenger-sidebar-panel,
    .messenger-thread-panel {
        height: calc(100dvh - 20px) !important;
        border-radius: 0 !important;
    }

    .messenger-shell.is-chat-open .messenger-sidebar-panel {
        display: none !important;
    }

    .messenger-message {
        max-width: 86% !important;
        min-width: 120px !important;
    }

    .messenger-panel-head {
        padding-top: max(14px, env(safe-area-inset-top)) !important;
    }

    .messenger-thread-head {
        padding-top: max(12px, env(safe-area-inset-top)) !important;
    }

    .messenger-reply-form[data-messenger-form] {
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }

    .messenger-emoji-bar {
        display: none !important;
    }

    .messenger-message p {
        font-size: 14px !important;
    }

    .messenger-jump-button {
        bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    }

    .messenger-group-settings-grid,
    .messenger-group-manage-members {
        grid-template-columns: 1fr !important;
    }

    .messenger-inline-form {
        grid-template-columns: 1fr !important;
    }

    .message-toast {
        left: 14px !important;
        right: 14px !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        justify-content: center !important;
    }
}

/* V29 - communicator repair after compact view */
.messenger-shell {
    grid-template-columns: 380px minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 760px !important;
    align-items: start !important;
}

.messenger-sidebar-panel {
    height: auto !important;
    min-height: 760px !important;
    max-height: calc(100dvh - 116px) !important;
}

.messenger-thread-panel {
    height: auto !important;
    min-height: 760px !important;
    max-height: calc(100dvh - 116px) !important;
}

.messenger-conversation-list,
.messenger-conversation-list:last-child {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: 360px !important;
    display: grid !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    align-items: start !important;
    overflow: auto !important;
}

.messenger-conversation {
    height: auto !important;
    min-height: 64px !important;
    max-height: none !important;
    align-self: start !important;
}

.messenger-conversation.is-active {
    height: auto !important;
    min-height: 64px !important;
}

.messenger-thread {
    justify-content: flex-start !important;
    align-content: flex-start !important;
    align-items: stretch !important;
    gap: 10px !important;
    min-height: 520px !important;
    max-height: calc(100dvh - 330px) !important;
}

.messenger-message {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    max-width: min(560px, 64%) !important;
}

.messenger-message.is-own {
    align-self: flex-end !important;
}

.messenger-reply-form[data-messenger-form] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
}

.messenger-reply-form[data-messenger-form] > button {
    width: auto !important;
    min-width: 76px !important;
}

@media (max-width: 1180px) {
    .messenger-shell {
        grid-template-columns: 330px minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    .messenger-shell {
        grid-template-columns: 1fr !important;
        min-height: calc(100dvh - 20px) !important;
        height: auto !important;
    }

    .messenger-sidebar-panel,
    .messenger-thread-panel {
        min-height: calc(100dvh - 20px) !important;
        max-height: none !important;
    }

    .messenger-conversation-list,
    .messenger-conversation-list:last-child {
        max-height: none !important;
    }

    .messenger-thread {
        min-height: calc(100dvh - 250px) !important;
        max-height: none !important;
    }

    .messenger-message {
        max-width: 88% !important;
    }
}

/* V30 - compact message bubbles */
.messenger-message {
    min-width: 0 !important;
    width: auto !important;
    max-width: min(460px, 56%) !important;
    min-height: 0 !important;
    padding: 7px 10px 6px !important;
    border-radius: 13px 13px 13px 5px !important;
}

.messenger-message.is-own {
    border-radius: 13px 13px 5px 13px !important;
}

.messenger-message-meta {
    min-height: 0 !important;
    margin-bottom: 4px !important;
    align-items: center !important;
}

.messenger-message-meta strong {
    max-width: 220px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
}

.messenger-message-meta span {
    font-size: 9px !important;
    line-height: 1 !important;
}

.messenger-message p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
}

.messenger-message-status {
    margin-top: 5px !important;
    font-size: 8px !important;
    line-height: 1 !important;
}

.messenger-reactions {
    margin-top: 5px !important;
}

.messenger-reactions > button,
.messenger-reaction-picker > button {
    min-width: 24px !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
}

.messenger-reactions > button b {
    font-size: 9px !important;
}

@media (max-width: 760px) {
    .messenger-message {
        max-width: 86% !important;
    }
}

/* V31 - tiny floating reactions */
.messenger-message {
    position: relative !important;
    padding: 7px 10px 7px !important;
    overflow: visible !important;
}

.messenger-reactions {
    position: absolute !important;
    left: 8px !important;
    bottom: -16px !important;
    z-index: 4 !important;
    margin: 0 !important;
    gap: 3px !important;
    max-width: calc(100% - 16px) !important;
    pointer-events: none !important;
}

.messenger-message.is-own .messenger-reactions {
    left: auto !important;
    right: 8px !important;
    justify-content: flex-end !important;
}

.messenger-reactions > button {
    min-width: 22px !important;
    width: auto !important;
    min-height: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    gap: 2px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    pointer-events: auto !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .20) !important;
}

.messenger-reactions > button b {
    font-size: 8px !important;
    line-height: 1 !important;
}

.messenger-reaction-picker {
    position: absolute !important;
    left: 0 !important;
    bottom: 20px !important;
    padding: 3px !important;
    gap: 2px !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 999px !important;
    background: rgba(8, 17, 31, .92) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(10px) !important;
    pointer-events: none !important;
}

.messenger-message.is-own .messenger-reaction-picker {
    left: auto !important;
    right: 0 !important;
}

.messenger-reaction-picker > button {
    min-width: 20px !important;
    width: 20px !important;
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 11px !important;
    box-shadow: none !important;
}

.messenger-message:hover .messenger-reaction-picker,
.messenger-message:focus-within .messenger-reaction-picker {
    pointer-events: auto !important;
}

/* V32 - reaction badge like compact messenger sticker */
.messenger-reactions {
    display: none !important;
}

.messenger-message {
    position: relative !important;
    overflow: visible !important;
}

.messenger-reaction-badges {
    position: absolute !important;
    right: 8px !important;
    bottom: -9px !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.messenger-message:not(.is-own) .messenger-reaction-badges {
    right: auto !important;
    left: 8px !important;
}

.messenger-reaction-badges:empty {
    display: none !important;
}

.messenger-reaction-badges > button {
    min-width: 20px !important;
    height: 18px !important;
    min-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 0 5px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, .94) !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .26) !important;
    pointer-events: auto !important;
}

.messenger-reaction-badges > button b {
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.messenger-reaction-badges > button span {
    line-height: 1 !important;
}

.messenger-message .messenger-reaction-picker {
    position: absolute !important;
    right: 4px !important;
    left: auto !important;
    bottom: calc(100% + 5px) !important;
    z-index: 8 !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    padding: 3px !important;
    gap: 1px !important;
    border-radius: 999px !important;
    background: rgba(8, 17, 31, .96) !important;
    opacity: 0 !important;
    transform: translateY(4px) scale(.98) !important;
    pointer-events: none !important;
}

.messenger-message:not(.is-own) .messenger-reaction-picker {
    right: auto !important;
    left: 4px !important;
}

.messenger-message .messenger-reaction-picker > button {
    width: 19px !important;
    min-width: 19px !important;
    height: 19px !important;
    min-height: 19px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 11px !important;
    box-shadow: none !important;
}

.messenger-message:hover .messenger-reaction-picker,
.messenger-message:focus-within .messenger-reaction-picker {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

/* V33 - normal message flow */
.messenger-thread {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    gap: 4px !important;
    padding: 14px 18px 22px !important;
}

.messenger-message {
    display: block !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    width: fit-content !important;
    max-width: min(430px, 54%) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 0 12px 0 !important;
}

.messenger-message.is-own {
    align-self: flex-end !important;
    margin-right: 14px !important;
    margin-left: 0 !important;
}

.messenger-message:not(.is-own) {
    margin-left: 14px !important;
    margin-right: 0 !important;
}

.messenger-message-meta {
    display: flex !important;
    justify-content: space-between !important;
}

.messenger-reaction-badges {
    bottom: -10px !important;
}

.messenger-reaction-badges > button {
    min-width: 18px !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
}

.messenger-reaction-badges > button b {
    font-size: 7px !important;
}

@media (max-width: 760px) {
    .messenger-message {
        max-width: 86% !important;
        margin-bottom: 12px !important;
    }

    .messenger-message.is-own {
        margin-right: 8px !important;
    }

    .messenger-message:not(.is-own) {
        margin-left: 8px !important;
    }
}

/* V34 - keep reaction badge outside bubble content */
.messenger-message {
    margin-bottom: 22px !important;
}

.messenger-reaction-badges {
    bottom: -19px !important;
    right: 10px !important;
}

.messenger-message:not(.is-own) .messenger-reaction-badges {
    left: 10px !important;
    right: auto !important;
}

.messenger-reaction-badges > button {
    height: 17px !important;
    min-height: 17px !important;
    min-width: 18px !important;
    padding: 0 4px !important;
}

.messenger-message-status {
    padding-bottom: 0 !important;
}

@media (max-width: 760px) {
    .messenger-message {
        margin-bottom: 22px !important;
    }
}

/* V35 - hard place reactions below bubble */
.messenger-reaction-badges {
    top: calc(100% + 3px) !important;
    bottom: auto !important;
    right: 8px !important;
}

.messenger-message:not(.is-own) .messenger-reaction-badges {
    top: calc(100% + 3px) !important;
    bottom: auto !important;
    left: 8px !important;
    right: auto !important;
}

.messenger-message {
    margin-bottom: 24px !important;
}

.messenger-message.is-own {
    margin-bottom: 24px !important;
}

/* V36 - make reaction picker hoverable */
.messenger-message .messenger-reaction-picker {
    bottom: calc(100% - 2px) !important;
    padding-bottom: 7px !important;
}

.messenger-message .messenger-reaction-picker::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -8px !important;
    height: 10px !important;
    background: transparent !important;
}

.messenger-message:hover .messenger-reaction-picker,
.messenger-message:focus-within .messenger-reaction-picker,
.messenger-message .messenger-reaction-picker:hover {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

/* V37 - compact message actions and non-overlapping reactions */
.messenger-message {
    position: relative !important;
    overflow: visible !important;
    margin-bottom: 18px !important;
    padding-bottom: 18px !important;
}

.messenger-message p {
    margin-bottom: 2px !important;
}

.messenger-reaction-badges {
    position: absolute !important;
    top: auto !important;
    bottom: 3px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 4 !important;
    display: inline-flex !important;
    gap: 3px !important;
    pointer-events: auto !important;
}

.messenger-message:not(.is-own) .messenger-reaction-badges {
    right: auto !important;
    left: 8px !important;
}

.messenger-reaction-badges:empty {
    display: none !important;
}

.messenger-reaction-badges > button {
    width: auto !important;
    min-width: 20px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

.messenger-message .messenger-reaction-picker {
    position: absolute !important;
    right: 4px !important;
    left: auto !important;
    bottom: calc(100% - 1px) !important;
    z-index: 20 !important;
    display: inline-flex !important;
    width: auto !important;
    padding: 4px !important;
    gap: 2px !important;
    border-radius: 999px !important;
    background: rgba(8, 18, 34, .98) !important;
    border: 1px solid rgba(87, 160, 255, .24) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .36) !important;
    opacity: 0 !important;
    transform: translateY(4px) scale(.98) !important;
    pointer-events: none !important;
}

.messenger-message:not(.is-own) .messenger-reaction-picker {
    right: auto !important;
    left: 4px !important;
}

.messenger-message .messenger-reaction-picker > button {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    background: rgba(37, 99, 235, .9) !important;
}

.messenger-message:hover .messenger-reaction-picker,
.messenger-message:focus-within .messenger-reaction-picker,
.messenger-message .messenger-reaction-picker:hover {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.messenger-message-actions {
    position: absolute !important;
    top: -20px !important;
    right: 6px !important;
    z-index: 12 !important;
    display: inline-flex !important;
    gap: 4px !important;
    opacity: 0 !important;
    transform: translateY(3px) !important;
    pointer-events: none !important;
    transition: opacity .16s ease, transform .16s ease !important;
}

.messenger-message:not(.is-own) .messenger-message-actions {
    right: auto !important;
    left: 6px !important;
}

.messenger-message:hover .messenger-message-actions,
.messenger-message:focus-within .messenger-message-actions {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.messenger-message-actions button {
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    background: rgba(15, 23, 42, .96) !important;
    color: rgba(226, 232, 240, .9) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .26) !important;
}

.messenger-message-edited,
.messenger-message-deleted {
    margin-top: 4px !important;
    color: rgba(148, 163, 184, .82) !important;
    font-size: 10px !important;
    font-weight: 750 !important;
}

.messenger-message-deleted {
    margin: 0 !important;
    font-style: italic !important;
}

.messenger-message.is-deleted {
    opacity: .74 !important;
}

/* V38 - reaction picker beside bubble, selected reactions in safe flow */
.messenger-message {
    padding-bottom: 8px !important;
    margin-bottom: 10px !important;
}

.messenger-message p {
    margin-bottom: 4px !important;
}

.messenger-reaction-badges {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    gap: 3px !important;
}

.messenger-message:not(.is-own) .messenger-reaction-badges {
    justify-content: flex-start !important;
}

.messenger-reaction-badges:empty {
    display: none !important;
}

.messenger-reaction-badges > button {
    min-width: 18px !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    box-shadow: none !important;
}

.messenger-reaction-badges > button b {
    font-size: 8px !important;
}

.messenger-message .messenger-reaction-picker {
    top: 50% !important;
    bottom: auto !important;
    right: auto !important;
    left: calc(100% + 8px) !important;
    z-index: 40 !important;
    padding: 4px !important;
    transform: translateY(-50%) translateX(-4px) scale(.98) !important;
}

.messenger-message.is-own .messenger-reaction-picker {
    left: auto !important;
    right: calc(100% + 8px) !important;
    transform: translateY(-50%) translateX(4px) scale(.98) !important;
}

.messenger-message:hover .messenger-reaction-picker,
.messenger-message:focus-within .messenger-reaction-picker,
.messenger-message .messenger-reaction-picker:hover {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) scale(1) !important;
    pointer-events: auto !important;
}

.messenger-message .messenger-reaction-picker::after {
    top: 0 !important;
    bottom: 0 !important;
    width: 12px !important;
    height: auto !important;
}

.messenger-message:not(.is-own) .messenger-reaction-picker::after {
    left: -10px !important;
    right: auto !important;
}

.messenger-message.is-own .messenger-reaction-picker::after {
    right: -10px !important;
    left: auto !important;
}

/* V39 - keep reactions and edit controls in separate zones */
.messenger-message {
    min-height: 46px !important;
}

.messenger-message .messenger-reaction-picker {
    top: auto !important;
    bottom: 7px !important;
    left: calc(100% + 10px) !important;
    right: auto !important;
    transform: translateY(0) translateX(-4px) scale(.98) !important;
}

.messenger-message.is-own .messenger-reaction-picker {
    top: auto !important;
    bottom: 7px !important;
    left: auto !important;
    right: calc(100% + 10px) !important;
    transform: translateY(0) translateX(4px) scale(.98) !important;
}

.messenger-message:hover .messenger-reaction-picker,
.messenger-message:focus-within .messenger-reaction-picker,
.messenger-message .messenger-reaction-picker:hover {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scale(1) !important;
    pointer-events: auto !important;
}

.messenger-message .messenger-reaction-picker::after {
    top: -2px !important;
    bottom: -2px !important;
    height: auto !important;
    width: 14px !important;
}

.messenger-message:not(.is-own) .messenger-reaction-picker::after {
    left: -12px !important;
    right: auto !important;
}

.messenger-message.is-own .messenger-reaction-picker::after {
    right: -12px !important;
    left: auto !important;
}

.messenger-message-actions {
    top: -24px !important;
    z-index: 55 !important;
}

/* V40 - click-to-open reactions, no floating bar on hover */
.messenger-reaction-trigger {
    position: absolute !important;
    bottom: 6px !important;
    left: -22px !important;
    right: auto !important;
    z-index: 45 !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(96, 165, 250, .28) !important;
    background: rgba(15, 23, 42, .92) !important;
    color: rgba(191, 219, 254, .92) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 16px !important;
    opacity: 0 !important;
    transform: scale(.92) !important;
    pointer-events: none !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .24) !important;
    transition: opacity .14s ease, transform .14s ease !important;
}

.messenger-message.is-own .messenger-reaction-trigger {
    left: auto !important;
    right: -22px !important;
}

.messenger-message:hover .messenger-reaction-trigger,
.messenger-message:focus-within .messenger-reaction-trigger,
.messenger-message.is-reacting .messenger-reaction-trigger {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
}

.messenger-message .messenger-reaction-picker,
.messenger-message:hover .messenger-reaction-picker,
.messenger-message:focus-within .messenger-reaction-picker,
.messenger-message .messenger-reaction-picker:hover {
    top: auto !important;
    bottom: 28px !important;
    left: -4px !important;
    right: auto !important;
    opacity: 0 !important;
    transform: translateY(4px) scale(.96) !important;
    pointer-events: none !important;
}

.messenger-message.is-own .messenger-reaction-picker,
.messenger-message.is-own:hover .messenger-reaction-picker,
.messenger-message.is-own:focus-within .messenger-reaction-picker {
    left: auto !important;
    right: -4px !important;
}

.messenger-message.is-reacting .messenger-reaction-picker,
.messenger-message.is-reacting .messenger-reaction-picker:hover {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.messenger-message .messenger-reaction-picker::after {
    display: none !important;
}

/* V41 - safe inline controls for small chat bubbles */
.messenger-message {
    min-height: 0 !important;
    padding-bottom: 8px !important;
    overflow: visible !important;
}

.messenger-reaction-badges {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    margin: 5px 0 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.messenger-message:not(.is-own) .messenger-reaction-badges {
    justify-content: flex-start !important;
}

.messenger-reaction-trigger,
.messenger-message.is-own .messenger-reaction-trigger {
    position: static !important;
    display: flex !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 5px 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transform: none !important;
    pointer-events: none !important;
}

.messenger-message:not(.is-own) .messenger-reaction-trigger {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.messenger-message:hover .messenger-reaction-trigger,
.messenger-message:focus-within .messenger-reaction-trigger,
.messenger-message.is-reacting .messenger-reaction-trigger {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.messenger-message .messenger-reaction-picker,
.messenger-message:hover .messenger-reaction-picker,
.messenger-message:focus-within .messenger-reaction-picker,
.messenger-message .messenger-reaction-picker:hover,
.messenger-message.is-own .messenger-reaction-picker,
.messenger-message.is-own:hover .messenger-reaction-picker,
.messenger-message.is-own:focus-within .messenger-reaction-picker {
    position: static !important;
    display: none !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 6px 0 0 auto !important;
    padding: 4px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

.messenger-message:not(.is-own) .messenger-reaction-picker,
.messenger-message:not(.is-own):hover .messenger-reaction-picker,
.messenger-message:not(.is-own):focus-within .messenger-reaction-picker {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.messenger-message.is-reacting .messenger-reaction-picker,
.messenger-message.is-reacting .messenger-reaction-picker:hover {
    display: inline-flex !important;
}

.messenger-message-actions,
.messenger-message:not(.is-own) .messenger-message-actions {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    gap: 5px !important;
    justify-content: flex-end !important;
    opacity: 0 !important;
    transform: none !important;
    pointer-events: none !important;
}

.messenger-message:not(.is-own) .messenger-message-actions {
    justify-content: flex-start !important;
}

.messenger-message:hover .messenger-message-actions,
.messenger-message:focus-within .messenger-message-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.messenger-message-actions button {
    height: 19px !important;
    min-height: 19px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    box-shadow: none !important;
}

/* V42 - reactions outside bubble without growing the bubble */
.messenger-message {
    position: relative !important;
    overflow: visible !important;
    min-height: 0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 26px !important;
}

.messenger-message.is-reacting {
    margin-bottom: 48px !important;
}

.messenger-reaction-badges {
    position: absolute !important;
    top: auto !important;
    bottom: -17px !important;
    left: auto !important;
    right: 8px !important;
    z-index: 8 !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 !important;
    gap: 3px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    pointer-events: auto !important;
}

.messenger-message:not(.is-own) .messenger-reaction-badges {
    left: 8px !important;
    right: auto !important;
    justify-content: flex-start !important;
}

.messenger-reaction-badges:empty {
    display: none !important;
}

.messenger-reaction-trigger,
.messenger-message.is-own .messenger-reaction-trigger {
    position: absolute !important;
    top: auto !important;
    bottom: -18px !important;
    left: auto !important;
    right: -20px !important;
    z-index: 12 !important;
    display: flex !important;
    margin: 0 !important;
    opacity: 0 !important;
    transform: scale(.92) !important;
    pointer-events: none !important;
}

.messenger-message:not(.is-own) .messenger-reaction-trigger {
    left: -20px !important;
    right: auto !important;
}

.messenger-message:hover .messenger-reaction-trigger,
.messenger-message:focus-within .messenger-reaction-trigger,
.messenger-message.is-reacting .messenger-reaction-trigger {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
}

.messenger-message .messenger-reaction-picker,
.messenger-message:hover .messenger-reaction-picker,
.messenger-message:focus-within .messenger-reaction-picker,
.messenger-message .messenger-reaction-picker:hover,
.messenger-message.is-own .messenger-reaction-picker,
.messenger-message.is-own:hover .messenger-reaction-picker,
.messenger-message.is-own:focus-within .messenger-reaction-picker {
    position: absolute !important;
    top: auto !important;
    bottom: -43px !important;
    left: auto !important;
    right: 0 !important;
    z-index: 20 !important;
    display: inline-flex !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    opacity: 0 !important;
    transform: translateY(3px) scale(.97) !important;
    pointer-events: none !important;
}

.messenger-message:not(.is-own) .messenger-reaction-picker,
.messenger-message:not(.is-own):hover .messenger-reaction-picker,
.messenger-message:not(.is-own):focus-within .messenger-reaction-picker {
    left: 0 !important;
    right: auto !important;
}

.messenger-message.is-reacting .messenger-reaction-picker,
.messenger-message.is-reacting .messenger-reaction-picker:hover {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.messenger-message-actions,
.messenger-message:not(.is-own) .messenger-message-actions {
    position: absolute !important;
    top: -24px !important;
    bottom: auto !important;
    left: auto !important;
    right: 6px !important;
    z-index: 55 !important;
    width: auto !important;
    margin: 0 !important;
}

.messenger-message:not(.is-own) .messenger-message-actions {
    left: 6px !important;
    right: auto !important;
}

/* V43 - reactions disabled in messenger UI */
.messenger-reactions,
.messenger-reaction-badges,
.messenger-reaction-trigger,
.messenger-reaction-picker {
    display: none !important;
}

.messenger-message {
    min-height: 0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
}

/* V44 - expanded emoji set and GIF upload */
.messenger-composer > .messenger-emoji-bar:not(.messenger-emoji-bar-more) {
    display: none !important;
}

.messenger-emoji-bar-more {
    display: flex !important;
    flex-wrap: wrap !important;
    max-height: 76px !important;
    overflow: auto !important;
    padding: 2px 2px 4px !important;
    gap: 6px !important;
}

.messenger-emoji-bar-more button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 15px !important;
}

/* V45 - GIF search in messenger */
.messenger-gif-box {
    position: relative !important;
    width: max-content !important;
}

.messenger-gif-toggle {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(96, 165, 250, .26) !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, .92), rgba(14, 165, 233, .82)) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .22) !important;
}

.messenger-gif-panel {
    position: absolute !important;
    left: 0 !important;
    bottom: calc(100% + 8px) !important;
    z-index: 80 !important;
    display: none !important;
    width: min(390px, 80vw) !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(96, 165, 250, .22) !important;
    background: rgba(8, 18, 34, .98) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .44) !important;
}

.messenger-gif-box.is-open .messenger-gif-panel {
    display: block !important;
}

.messenger-gif-panel input {
    width: 100% !important;
    min-height: 38px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
}

.messenger-gif-results {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    max-height: 260px !important;
    overflow: auto !important;
}

.messenger-gif-results button {
    position: relative !important;
    min-height: 74px !important;
    height: 74px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .72) !important;
    box-shadow: none !important;
}

.messenger-gif-results img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.messenger-gif-empty {
    grid-column: 1 / -1 !important;
    padding: 16px !important;
    color: rgba(203, 213, 225, .78) !important;
    font-size: 12px !important;
    text-align: center !important;
}

/* V47 - manual communicator status */
.messenger-panel-head {
    gap: 10px !important;
}

.messenger-status-select {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-left: auto !important;
    padding: 5px 7px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(96, 165, 250, .18) !important;
    background: rgba(15, 23, 42, .48) !important;
}

.messenger-status-select span {
    color: rgba(148, 163, 184, .92) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.messenger-status-select select {
    min-height: 28px !important;
    height: 28px !important;
    width: auto !important;
    min-width: 128px !important;
    padding: 0 25px 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(96, 165, 250, .22) !important;
    background: rgba(8, 18, 34, .92) !important;
    color: rgba(226, 232, 240, .96) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

.messenger-status-select select.is-saving {
    opacity: .62 !important;
}

.messenger-status-select select.is-error {
    border-color: rgba(248, 113, 113, .72) !important;
}

@media (max-width: 760px) {
    .messenger-panel-head {
        flex-wrap: wrap !important;
    }

    .messenger-status-select {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: space-between !important;
    }

    .messenger-status-select select {
        flex: 1 !important;
    }
}

/* V46 - tidy messenger composer toolbar */
.messenger-reply-form[data-messenger-form] {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 12px !important;
    padding: 12px 14px !important;
}

.messenger-composer {
    display: grid !important;
    grid-template-columns: minmax(160px, 1fr) auto auto !important;
    grid-template-areas:
        "text text text"
        "emoji gif file" !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.messenger-reply-form textarea {
    grid-area: text !important;
    width: 100% !important;
    min-height: 48px !important;
    max-height: 118px !important;
    border-radius: 16px !important;
}

.messenger-emoji-bar-more {
    grid-area: emoji !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1px 2px 5px !important;
    gap: 5px !important;
    scrollbar-width: thin !important;
}

.messenger-emoji-bar-more button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

.messenger-gif-box {
    grid-area: gif !important;
}

.messenger-file-button {
    grid-area: file !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 11px !important;
    white-space: nowrap !important;
}

.messenger-gif-toggle {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 12px !important;
}

.messenger-reply-form[data-messenger-form] > button[type="submit"] {
    min-height: 42px !important;
    height: 42px !important;
    min-width: 76px !important;
    align-self: end !important;
    margin-bottom: 0 !important;
}

@media (max-width: 760px) {
    .messenger-reply-form[data-messenger-form] {
        grid-template-columns: 1fr !important;
    }

    .messenger-composer {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "text text"
            "emoji emoji"
            "gif file" !important;
    }

    .messenger-reply-form[data-messenger-form] > button[type="submit"] {
        width: 100% !important;
    }
}

/* V48 - blue glass admin skin matching login */
body:not(:has(.login-stage)) {
    --blue-bg-0: #04152a;
    --blue-bg-1: #063d86;
    --blue-bg-2: #0a7ddd;
    --blue-panel: rgba(9, 73, 147, .42);
    --blue-panel-strong: rgba(12, 102, 194, .48);
    --blue-card: rgba(8, 47, 92, .54);
    --blue-card-soft: rgba(10, 72, 138, .32);
    --blue-border: rgba(139, 202, 255, .22);
    --blue-border-strong: rgba(152, 218, 255, .38);
    --blue-text: #f7fbff;
    --blue-muted: rgba(220, 238, 255, .72);
    background:
        linear-gradient(135deg, #04316f 0%, #0873cf 42%, #0a8fe8 100%) fixed !important;
    color: var(--blue-text) !important;
}

body:not(:has(.login-stage))::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
        linear-gradient(115deg, rgba(255,255,255,.16), transparent 24%, rgba(3,23,52,.24) 56%, transparent 78%),
        linear-gradient(180deg, rgba(2,18,42,.06), rgba(2,18,42,.32)) !important;
    opacity: .86 !important;
    z-index: 0 !important;
}

body:not(:has(.login-stage)) .app-shell {
    position: relative !important;
    z-index: 1 !important;
    grid-template-columns: 294px minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 20px !important;
}

body:not(:has(.login-stage)) .app-main {
    min-width: 0 !important;
}

body:not(:has(.login-stage)) .container {
    max-width: 1620px !important;
}

body:not(:has(.login-stage)) .sidebar,
body:not(:has(.login-stage)) .topbar-v5,
body:not(:has(.login-stage)) .topbar-v4,
body:not(:has(.login-stage)) .dashboard-hero,
body:not(:has(.login-stage)) .dashboard-toolbar,
body:not(:has(.login-stage)) .shop-card,
body:not(:has(.login-stage)) .dashboard-shop-card,
body:not(:has(.login-stage)) .table-card,
body:not(:has(.login-stage)) .edit-card,
body:not(:has(.login-stage)) .summary-card,
body:not(:has(.login-stage)) .stat-box,
body:not(:has(.login-stage)) .alerts-metric,
body:not(:has(.login-stage)) .alert-item,
body:not(:has(.login-stage)) .ticket-panel,
body:not(:has(.login-stage)) .ticket-detail-panel,
body:not(:has(.login-stage)) .messenger-sidebar-panel,
body:not(:has(.login-stage)) .messenger-thread-panel,
body:not(:has(.login-stage)) .integration-card,
body:not(:has(.login-stage)) .invoice-summary-card {
    border: 1px solid var(--blue-border) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 44%, rgba(5,34,78,.26)),
        var(--blue-card) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 22px 70px rgba(2, 21, 48, .30) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

body:not(:has(.login-stage)) .sidebar {
    top: 20px !important;
    height: calc(100vh - 40px) !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
    background:
        linear-gradient(180deg, rgba(40,154,255,.34), rgba(5,35,77,.72)),
        rgba(4, 33, 76, .72) !important;
}

body:not(:has(.login-stage)) .brand {
    padding: 0 0 20px !important;
    margin-bottom: 22px !important;
    border-bottom: 1px solid rgba(209, 235, 255, .22) !important;
}

body:not(:has(.login-stage)) .brand-logo,
body:not(:has(.login-stage)) .logo,
body:not(:has(.login-stage)) .mini-logo,
body:not(:has(.login-stage)) .topbar-avatar {
    border-radius: 14px !important;
    background: linear-gradient(135deg, #5bd8ff 0%, #398bff 52%, #2854e8 100%) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(25, 108, 236, .34) !important;
}

body:not(:has(.login-stage)) .brand-logo {
    width: 52px !important;
    height: 52px !important;
}

body:not(:has(.login-stage)) .brand strong,
body:not(:has(.login-stage)) .topbar-title strong {
    color: #fff !important;
    text-shadow: 0 1px 18px rgba(131, 205, 255, .22) !important;
}

body:not(:has(.login-stage)) .brand span,
body:not(:has(.login-stage)) .topbar-kicker,
body:not(:has(.login-stage)) .page-header p,
body:not(:has(.login-stage)) .dashboard-hero p,
body:not(:has(.login-stage)) .muted {
    color: var(--blue-muted) !important;
}

body:not(:has(.login-stage)) .side-nav {
    gap: 8px !important;
}

body:not(:has(.login-stage)) .side-nav a {
    min-height: 46px !important;
    padding: 11px 13px !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(238, 247, 255, .84) !important;
    font-weight: 820 !important;
}

body:not(:has(.login-stage)) .side-nav a span {
    width: 30px !important;
    height: 30px !important;
    border-radius: 12px !important;
    display: inline-grid !important;
    place-items: center !important;
    background: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.9) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
}

body:not(:has(.login-stage)) .side-nav a:hover,
body:not(:has(.login-stage)) .side-nav .active-nav {
    color: #fff !important;
    border-color: rgba(183, 225, 255, .32) !important;
    background: linear-gradient(135deg, rgba(61,154,255,.38), rgba(42,102,235,.22)) !important;
    box-shadow: inset 4px 0 0 rgba(74, 223, 255, .86), 0 12px 28px rgba(4, 36, 86, .22) !important;
    transform: none !important;
}

body:not(:has(.login-stage)) .side-nav .active-nav span {
    background: linear-gradient(135deg, #75eaff, #2e69ff) !important;
    color: #fff !important;
}

body:not(:has(.login-stage)) .topbar-v5,
body:not(:has(.login-stage)) .topbar-v4 {
    top: 16px !important;
    min-height: 76px !important;
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(110deg, rgba(20,127,237,.42), rgba(6,50,105,.70) 48%, rgba(30,132,255,.35)),
        rgba(5, 38, 86, .76) !important;
}

body:not(:has(.login-stage)) .topbar-title {
    min-width: 220px !important;
}

body:not(:has(.login-stage)) .topbar-actions {
    gap: 10px !important;
}

body:not(:has(.login-stage)) .topbar-icon,
body:not(:has(.login-stage)) .topbar-profile,
body:not(:has(.login-stage)) button.topbar-profile {
    border-color: rgba(198, 232, 255, .26) !important;
    background: linear-gradient(135deg, rgba(72,169,255,.34), rgba(37,91,221,.38)) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px rgba(0, 43, 112, .24) !important;
}

body:not(:has(.login-stage)) .topbar-profile {
    min-height: 48px !important;
    border-radius: 16px !important;
}

body:not(:has(.login-stage)) .topbar-profile span {
    color: rgba(226, 243, 255, .76) !important;
}

body:not(:has(.login-stage)) .dashboard-fresh {
    color: #f8fbff !important;
}

body:not(:has(.login-stage)) .dashboard-hero {
    display: grid !important;
    grid-template-columns: minmax(240px, .62fr) minmax(520px, 1.38fr) !important;
    gap: 22px !important;
    padding: 28px !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, rgba(24,133,247,.52), rgba(4,64,137,.64) 46%, rgba(14,126,226,.36)),
        rgba(6, 56, 121, .68) !important;
}

body:not(:has(.login-stage)) .dashboard-hero h1 {
    color: #fff !important;
    font-size: clamp(30px, 2.4vw, 46px) !important;
    line-height: 1.02 !important;
}

body:not(:has(.login-stage)) .dashboard-eyebrow,
body:not(:has(.login-stage)) .topbar-kicker {
    color: #aee4ff !important;
    letter-spacing: .08em !important;
}

body:not(:has(.login-stage)) .dashboard-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body:not(:has(.login-stage)) .dashboard-kpi,
body:not(:has(.login-stage)) .dashboard-scoreline div,
body:not(:has(.login-stage)) .dashboard-reviews,
body:not(:has(.login-stage)) .dashboard-social-row div,
body:not(:has(.login-stage)) .dashboard-shop-state,
body:not(:has(.login-stage)) .point-info-box {
    border-color: rgba(187, 224, 255, .22) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(6, 42, 92, .36)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body:not(:has(.login-stage)) .dashboard-kpi strong,
body:not(:has(.login-stage)) .dashboard-scoreline strong {
    color: #fff !important;
}

body:not(:has(.login-stage)) .dashboard-toolbar {
    padding: 14px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, rgba(4,41,92,.62), rgba(14,94,183,.34)),
        rgba(5, 42, 94, .72) !important;
}

body:not(:has(.login-stage)) input,
body:not(:has(.login-stage)) select,
body:not(:has(.login-stage)) textarea {
    border-color: rgba(198, 232, 255, .24) !important;
    background: rgba(3, 28, 67, .62) !important;
    color: #fff !important;
}

body:not(:has(.login-stage)) input:focus,
body:not(:has(.login-stage)) select:focus,
body:not(:has(.login-stage)) textarea:focus {
    border-color: rgba(125, 223, 255, .78) !important;
    box-shadow: 0 0 0 4px rgba(77, 184, 255, .18) !important;
    background: rgba(3, 31, 76, .82) !important;
}

body:not(:has(.login-stage)) .button-link,
body:not(:has(.login-stage)) .details,
body:not(:has(.login-stage)) .logout,
body:not(:has(.login-stage)) form button:not(.review-toggle):not(.info-button):not(.login-submit),
body:not(:has(.login-stage)) .toolbar button:not(.review-toggle):not(.info-button) {
    border-color: rgba(198, 232, 255, .26) !important;
    background: linear-gradient(135deg, #55baff, #2856e8) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(25, 90, 215, .24) !important;
}

body:not(:has(.login-stage)) .button-link:hover,
body:not(:has(.login-stage)) .details:hover,
body:not(:has(.login-stage)) form button:not(.review-toggle):not(.info-button):not(.login-submit):hover {
    border-color: rgba(228, 246, 255, .52) !important;
    filter: brightness(1.05) !important;
    transform: translateY(-1px) !important;
}

body:not(:has(.login-stage)) .shop-card,
body:not(:has(.login-stage)) .dashboard-shop-card {
    border-radius: 18px !important;
    background:
        linear-gradient(150deg, rgba(255,255,255,.085), rgba(4,37,82,.54)),
        rgba(5, 43, 94, .64) !important;
}

body:not(:has(.login-stage)) .shop-card:hover,
body:not(:has(.login-stage)) .dashboard-shop-card:hover {
    border-color: rgba(159, 221, 255, .38) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 24px 74px rgba(2, 31, 83, .36) !important;
    transform: translateY(-2px) !important;
}

body:not(:has(.login-stage)) .dashboard-shop-head h2,
body:not(:has(.login-stage)) .dashboard-section-title span {
    color: #fff !important;
}

body:not(:has(.login-stage)) .review-toggle,
body:not(:has(.login-stage)) .info-button {
    border-color: rgba(161, 218, 255, .28) !important;
    background: rgba(28, 91, 166, .52) !important;
    color: #eaf7ff !important;
}

body:not(:has(.login-stage)) .dashboard-shop-footer {
    border-top-color: rgba(198, 232, 255, .18) !important;
}

body:not(:has(.login-stage)) .dashboard-shop-footer strong b,
body:not(:has(.login-stage)) .dashboard-shop-footer strong em {
    color: #b9efff !important;
}

@media (max-width: 1200px) {
    body:not(:has(.login-stage)) .dashboard-hero {
        grid-template-columns: 1fr !important;
    }

    body:not(:has(.login-stage)) .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    body:not(:has(.login-stage)) .app-shell {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    body:not(:has(.login-stage)) .sidebar {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
    }

    body:not(:has(.login-stage)) .topbar-v5,
    body:not(:has(.login-stage)) .topbar-v4 {
        position: relative !important;
        top: 0 !important;
    }

    body:not(:has(.login-stage)) .dashboard-kpis {
        grid-template-columns: 1fr !important;
    }
}

/* V49 - daily activity statistics */
.daily-stats-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(280px, .9fr);
    gap: 16px;
    margin-bottom: 18px;
}

.daily-stats-head,
.daily-stats-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.daily-stats-head span,
.daily-stats-table-head span {
    display: block;
    color: var(--blue-muted, #94a3b8);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.daily-stats-head h2,
.daily-stats-table-head h2 {
    margin: 3px 0 0;
    color: #fff;
}

.daily-stats-head > strong {
    display: inline-grid;
    place-items: center;
    min-width: 52px;
    height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #55baff, #2856e8);
    color: #fff;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .28);
}

.daily-stats-import form {
    display: grid;
    gap: 14px;
}

.daily-stats-import label small {
    display: block;
    margin-top: 7px;
    color: rgba(203, 213, 225, .72);
    font-size: 12px;
    line-height: 1.45;
}

.daily-stats-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.daily-stats-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.daily-stats-chip-list span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(148, 211, 255, .24);
    background: rgba(12, 74, 144, .34);
    color: rgba(239, 248, 255, .92);
    font-size: 12px;
    font-weight: 850;
}

.daily-stats-note {
    margin: 14px 0 0;
    line-height: 1.5;
}

.daily-stats-summary {
    display: grid;
    grid-template-columns: repeat(9, minmax(110px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.daily-stats-summary .stat-box {
    min-height: 96px;
}

.daily-stats-summary .stat-box b {
    font-size: 30px;
}

.daily-stats-table table small {
    display: block;
    margin-top: 3px;
    color: rgba(203, 213, 225, .62);
}

.daily-stats-alias-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.daily-stats-alias-form select {
    max-width: none;
}

.employee-stats-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) minmax(160px, .5fr) minmax(240px, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}

.employee-stats-toolbar select,
.employee-stats-toolbar input {
    max-width: none;
}

.employee-stats-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.employee-stats-profile span {
    display: block;
    color: var(--blue-muted, #94a3b8);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.employee-stats-profile h2 {
    margin: 4px 0 0;
    color: #fff;
}

.employee-stats-profile p {
    margin: 5px 0 0;
    color: rgba(203, 213, 225, .72);
}

.employee-stats-profile strong {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(148, 211, 255, .24);
    background: rgba(12, 74, 144, .34);
    color: #fff;
}

.employee-stats-summary {
    grid-template-columns: repeat(10, minmax(105px, 1fr));
}

.employee-compare-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) minmax(150px, .45fr) minmax(220px, 1fr) minmax(220px, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}

.employee-compare-toolbar select,
.employee-compare-toolbar input {
    max-width: none;
}

.employee-compare-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.employee-compare-hero article {
    min-height: 118px;
    padding: 20px;
    border: 1px solid rgba(148, 211, 255, .18);
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .18), transparent 38%),
        linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(8, 18, 33, .88));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.employee-compare-hero span {
    display: block;
    color: rgba(147, 197, 253, .82);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.employee-compare-hero h2 {
    margin: 8px 0 0;
    color: #f8fbff;
    font-size: 24px;
}

.employee-compare-hero p {
    margin: 6px 0 0;
    color: rgba(203, 213, 225, .72);
}

.employee-compare-table {
    margin-bottom: 16px;
}

.employee-compare-table td:nth-child(2),
.employee-compare-table td:nth-child(3),
.employee-compare-table td:nth-child(4) {
    font-weight: 900;
}

.pwa-steps {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    padding-left: 22px;
}

.pwa-steps li {
    padding-left: 4px;
    color: rgba(226, 232, 240, .82);
    line-height: 1.45;
}

.pwa-steps li::marker {
    color: #67e8f9;
    font-weight: 950;
}

.metric-diff-positive,
.metric-diff-negative,
.metric-diff-neutral {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 950;
}

.metric-diff-positive {
    border: 1px solid rgba(34, 197, 94, .28);
    background: rgba(22, 163, 74, .14);
    color: #86efac;
}

.metric-diff-negative {
    border: 1px solid rgba(248, 113, 113, .28);
    background: rgba(220, 38, 38, .14);
    color: #fca5a5;
}

.metric-diff-neutral {
    border: 1px solid rgba(148, 163, 184, .24);
    background: rgba(148, 163, 184, .10);
    color: #cbd5e1;
}

.daily-stats-table th,
.daily-stats-table td {
    white-space: nowrap;
}

@media (max-width: 1300px) {
    .daily-stats-summary {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}

@media (max-width: 760px) {
    .daily-stats-grid,
    .daily-stats-summary {
        grid-template-columns: 1fr;
    }

    .daily-stats-actions {
        justify-content: stretch;
    }

    .daily-stats-actions button {
        width: 100%;
    }

    .daily-stats-alias-form {
        grid-template-columns: 1fr;
    }

    .employee-stats-toolbar {
        grid-template-columns: 1fr;
    }

    .employee-compare-toolbar,
    .employee-compare-hero {
        grid-template-columns: 1fr;
    }

    .employee-stats-profile {
        align-items: flex-start;
        flex-direction: column;
    }
}