/* ============================================================
   Darkstate AI Chatbot — Premium Floating Widget
   ============================================================ */

/* --- Keyframes ------------------------------------------------ */

@keyframes ai-chatbot-fadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ai-chatbot-msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ai-chatbot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 30, 69, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(224, 30, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 30, 69, 0); }
}

@keyframes ai-chatbot-dot {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
  40%           { opacity: 1;   transform: scale(1); }
}

@keyframes ai-chatbot-statusGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

@keyframes ai-chatbot-accentShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes ai-chatbot-tooltipIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ai-chatbot-scrollBtnIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Wrapper --------------------------------------------------- */

.ai-chatbot-wrapper {
  position: fixed;
  z-index: 10050;
  bottom: 0;
  right: 0;
  pointer-events: none;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ai-chatbot-wrapper * {
  box-sizing: border-box;
}

/* ============================================================
   Floating Action Button
   ============================================================ */

.ai-chatbot-fab {
  pointer-events: auto;
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10051;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  background: linear-gradient(135deg, #E01E45 0%, #b91838 50%, #E01E45 100%);
  background-size: 200% 200%;
  color: #fff;
  box-shadow:
    0 6px 28px rgba(224, 30, 69, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease,
    background-position 0.5s ease;
  animation: ai-chatbot-pulse 2.8s ease-in-out 2s 3;
}

.ai-chatbot-fab:hover {
  transform: scale(1.1);
  background-position: 100% 100%;
  box-shadow:
    0 8px 36px rgba(224, 30, 69, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ai-chatbot-fab:active {
  transform: scale(0.93);
}

.ai-chatbot-fab:focus-visible {
  outline: 2px solid #FF4D6D;
  outline-offset: 3px;
}

.ai-chatbot-fab__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-chatbot-fab__icon-wrap svg {
  width: 24px;
  height: 24px;
}

.ai-chatbot-fab--open {
  background: linear-gradient(135deg, #8e112d 0%, #6e0d22 100%);
  animation: none;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ai-chatbot-fab--open .ai-chatbot-fab__icon-wrap {
  transform: rotate(90deg);
}

/* --- FAB Tooltip ----------------------------------------------- */

.ai-chatbot-fab-tooltip {
  pointer-events: auto;
  position: fixed;
  bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  right: calc(94px + env(safe-area-inset-right, 0px));
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  white-space: nowrap;
  z-index: 10052;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: ai-chatbot-tooltipIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.ai-chatbot-fab-tooltip__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 0 0 2px;
  opacity: 0.5;
  transition: opacity 0.15s;
  font-family: inherit;
}

.ai-chatbot-fab-tooltip__close:hover {
  opacity: 1;
}

/* ============================================================
   Chat Panel
   ============================================================ */

.ai-chatbot-panel {
  pointer-events: none;
  position: fixed;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  width: 400px;
  max-height: 620px;
  border-radius: 20px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  transition:
    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: inherit;
}

.ai-chatbot-panel--open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Accent line at top of panel */
.ai-chatbot-accent-line {
  height: 3px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent 0%, #E01E45 20%, #FF4D6D 40%, #1BA3F0 60%, #E01E45 80%, transparent 100%);
  background-size: 200% 100%;
  animation: ai-chatbot-accentShimmer 4s linear infinite;
}

/* ============================================================
   DARK THEME
   ============================================================ */

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-panel {
  background: #141417;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.7),
    0 8px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* Header */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-header {
  background: linear-gradient(180deg, rgba(224, 30, 69, 0.1) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-header__avatar {
  background: linear-gradient(135deg, #E01E45, #ff4d6d);
  color: #fff;
  box-shadow: 0 3px 12px rgba(224, 30, 69, 0.35);
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-header__title {
  color: #F2F2F5;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-header__status {
  color: #77788A;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-header__action-btn {
  color: #5E5F6E;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-header__action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #A0A1B0;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-header__close {
  color: #5E5F6E;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-header__close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #D0D0DA;
}

/* Messages area */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-messages {
  background: #0B0B0E;
}

/* Bot avatar */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-message__avatar {
  background: #1C1C22;
  color: #E01E45;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* User bubble */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-message--user .ai-chatbot-message__bubble {
  background: linear-gradient(135deg, #E01E45 0%, #c4173b 100%);
  color: #ffffff;
  box-shadow: 0 2px 14px rgba(224, 30, 69, 0.22);
}

/* Bot bubble */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-message--bot .ai-chatbot-message__bubble {
  background: #19191E;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #D5D5DD;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-message--bot .ai-chatbot-message__bubble:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Timestamps */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-message__time {
  color: #4A4B58;
}

/* Feedback */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-feedback__btn {
  color: #4A4B58;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-feedback__btn:hover {
  color: #8E8FA0;
  background: rgba(255, 255, 255, 0.04);
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-feedback__btn--active {
  color: #E01E45;
}

/* Typing */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-typing {
  background: #19191E;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-typing__dot {
  background: #6A6B7A;
}

/* Quick actions */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-quick-action {
  background: rgba(224, 30, 69, 0.06);
  border-color: rgba(224, 30, 69, 0.18);
  color: #D4899A;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-quick-action:hover:not(:disabled) {
  background: rgba(224, 30, 69, 0.14);
  border-color: rgba(224, 30, 69, 0.4);
  color: #FF6B88;
}

/* Suggestions */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-suggestions__label {
  color: #4A4B58;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-suggestion {
  background: rgba(27, 163, 240, 0.06);
  border-color: rgba(27, 163, 240, 0.15);
  color: #7BBEE8;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-suggestion:hover:not(:disabled) {
  background: rgba(27, 163, 240, 0.12);
  border-color: rgba(27, 163, 240, 0.35);
  color: #A0D4F5;
}

/* Input */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-input {
  background: #141417;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-input__field {
  background: #0B0B0E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ECECEF;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-input__field::placeholder {
  color: #505060;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-input__field:focus {
  border-color: rgba(224, 30, 69, 0.45);
  box-shadow: 0 0 0 3px rgba(224, 30, 69, 0.08);
}

/* Footer */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-footer {
  background: #141417;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  color: #3A3A48;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-footer strong {
  color: #55566A;
}

/* Scroll button */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-scroll-btn {
  background: #1C1C22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #A0A1B0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-scroll-btn:hover {
  background: #252530;
  color: #ECECEF;
}

/* Tooltip */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-fab-tooltip {
  background: #1E1E25;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #D0D0DA;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-fab-tooltip__close {
  color: #6A6B7A;
}

/* Scrollbar */
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-messages::-webkit-scrollbar { width: 5px; }
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 10px; }
.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-messages::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ============================================================
   LIGHT THEME
   ============================================================ */

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-panel {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.1),
    0 8px 28px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

/* Header */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-header {
  background: linear-gradient(180deg, rgba(224, 30, 69, 0.05) 0%, transparent 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-header__avatar {
  background: linear-gradient(135deg, #E01E45, #ff4d6d);
  color: #fff;
  box-shadow: 0 3px 12px rgba(224, 30, 69, 0.22);
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-header__title {
  color: #1A1A2E;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-header__status {
  color: #8888A0;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-header__action-btn {
  color: #A0A0B4;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-header__action-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #5A5A72;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-header__close {
  color: #A0A0B4;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-header__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1A1A2E;
}

/* Messages area */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-messages {
  background: #F6F6FA;
}

/* Bot avatar */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-message__avatar {
  background: #FFFFFF;
  color: #E01E45;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* User bubble */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-message--user .ai-chatbot-message__bubble {
  background: linear-gradient(135deg, #E01E45 0%, #c4173b 100%);
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(224, 30, 69, 0.18);
}

/* Bot bubble */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-message--bot .ai-chatbot-message__bubble {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #2A2A3E;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-message--bot .ai-chatbot-message__bubble:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Timestamps */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-message__time {
  color: #B0B0C0;
}

/* Feedback */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-feedback__btn {
  color: #B0B0C0;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-feedback__btn:hover {
  color: #6A6A80;
  background: rgba(0, 0, 0, 0.04);
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-feedback__btn--active {
  color: #E01E45;
}

/* Typing */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-typing {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-typing__dot {
  background: #A0A0B4;
}

/* Quick actions */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-quick-action {
  background: rgba(224, 30, 69, 0.04);
  border-color: rgba(224, 30, 69, 0.15);
  color: #B8183A;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-quick-action:hover:not(:disabled) {
  background: rgba(224, 30, 69, 0.09);
  border-color: rgba(224, 30, 69, 0.3);
  color: #E01E45;
}

/* Suggestions */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-suggestions__label {
  color: #B0B0C0;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-suggestion {
  background: rgba(27, 163, 240, 0.05);
  border-color: rgba(27, 163, 240, 0.15);
  color: #1488CC;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-suggestion:hover:not(:disabled) {
  background: rgba(27, 163, 240, 0.1);
  border-color: rgba(27, 163, 240, 0.3);
  color: #0E6EAD;
}

/* Input */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-input {
  background: #FFFFFF;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-input__field {
  background: #F0F0F5;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1A1A2E;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-input__field::placeholder {
  color: #A0A0B4;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-input__field:focus {
  border-color: rgba(224, 30, 69, 0.4);
  box-shadow: 0 0 0 3px rgba(224, 30, 69, 0.06);
  background: #FFFFFF;
}

/* Footer */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-footer {
  background: #FFFFFF;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  color: #C0C0D0;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-footer strong {
  color: #8A8AA0;
}

/* Scroll button */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-scroll-btn {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #5A5A72;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-scroll-btn:hover {
  background: #F5F5F8;
  color: #1A1A2E;
}

/* Tooltip */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-fab-tooltip {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #2A2A3E;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-fab-tooltip__close {
  color: #A0A0B4;
}

/* Scrollbar */
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-messages::-webkit-scrollbar { width: 5px; }
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 10px; }
.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-messages::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.16); }

/* ============================================================
   Header — layout
   ============================================================ */

.ai-chatbot-header {
  padding: 14px 14px 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  min-height: 62px;
}

.ai-chatbot-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ai-chatbot-header__avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-chatbot-header__avatar svg {
  width: 18px;
  height: 18px;
}

.ai-chatbot-header__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ai-chatbot-header__title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.ai-chatbot-header__status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 2px;
}

.ai-chatbot-header__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: ai-chatbot-statusGlow 2.5s ease-in-out infinite;
}

.ai-chatbot-header__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ai-chatbot-header__action-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.ai-chatbot-header__action-btn svg {
  width: 13px;
  height: 13px;
}

.ai-chatbot-header__action-btn:focus-visible {
  outline: 2px solid #E01E45;
  outline-offset: 1px;
}

.ai-chatbot-header__close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
  outline: none;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.ai-chatbot-header__close:focus-visible {
  outline: 2px solid #E01E45;
  outline-offset: 1px;
}

.ai-chatbot-header__close svg {
  width: 13px;
  height: 13px;
}

/* ============================================================
   Messages Area
   ============================================================ */

.ai-chatbot-messages {
  flex: 1 1;
  overflow-y: auto;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  position: relative;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.12) transparent;
}

/* ============================================================
   Scroll-to-bottom button
   ============================================================ */

.ai-chatbot-scroll-btn {
  pointer-events: auto;
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  animation: ai-chatbot-scrollBtnIn 0.25s ease;
  transition: background 0.15s, color 0.15s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.ai-chatbot-scroll-btn svg {
  width: 13px;
  height: 13px;
}

/* ============================================================
   Message Row
   ============================================================ */

.ai-chatbot-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  animation: ai-chatbot-msgIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-chatbot-message--grouped {
  margin-bottom: 3px;
}

.ai-chatbot-message--last-in-group {
  margin-bottom: 14px;
}

.ai-chatbot-message--user {
  flex-direction: row-reverse;
}

.ai-chatbot-message--bot {
  flex-direction: row;
}

/* Bot avatar */
.ai-chatbot-message__avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: opacity 0.15s;
}

.ai-chatbot-message__avatar--hidden {
  visibility: hidden;
}

.ai-chatbot-message__avatar svg {
  width: 13px;
  height: 13px;
}

.ai-chatbot-message__content {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  min-width: 0;
}

.ai-chatbot-message--user .ai-chatbot-message__content {
  align-items: flex-end;
}

.ai-chatbot-message--bot .ai-chatbot-message__content {
  align-items: flex-start;
}

/* ============================================================
   Bubble
   ============================================================ */

.ai-chatbot-message__bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ai-chatbot-message--user .ai-chatbot-message__bubble {
  border-radius: 14px 14px 4px 14px;
}

.ai-chatbot-message--bot .ai-chatbot-message__bubble {
  border-radius: 14px 14px 14px 4px;
}

/* ============================================================
   Timestamp
   ============================================================ */

.ai-chatbot-message__time {
  font-size: 10.5px;
  margin-top: 4px;
  padding: 0 2px;
  line-height: 1.2;
  -webkit-user-select: none;
          user-select: none;
}

/* ============================================================
   Feedback buttons
   ============================================================ */

.ai-chatbot-feedback {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  padding: 0 2px;
}

.ai-chatbot-feedback__btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  padding: 0;
}

.ai-chatbot-feedback__btn svg {
  width: 12px;
  height: 12px;
}

.ai-chatbot-feedback__btn:focus-visible {
  outline: 2px solid #E01E45;
  outline-offset: 1px;
}

.ai-chatbot-feedback .ai-chatbot-message__time {
  margin-top: 0;
  margin-left: 4px;
}

/* ============================================================
   Typing Indicator
   ============================================================ */

.ai-chatbot-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  border-radius: 14px 14px 14px 4px;
}

.ai-chatbot-typing__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: ai-chatbot-dot 1.4s ease-in-out infinite;
}

.ai-chatbot-typing__dot:nth-child(2) { animation-delay: 0.2s; }
.ai-chatbot-typing__dot:nth-child(3) { animation-delay: 0.4s; }

/* ============================================================
   Quick Actions
   ============================================================ */

.ai-chatbot-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 2px;
}

.ai-chatbot-quick-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.4;
}

.ai-chatbot-quick-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ai-chatbot-quick-action:focus-visible {
  outline: 2px solid #E01E45;
  outline-offset: 1px;
}

.ai-chatbot-quick-action__icon {
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}

/* ============================================================
   Follow-up Suggestions
   ============================================================ */

.ai-chatbot-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px 0 2px;
}

.ai-chatbot-suggestions__label {
  font-size: 11px;
  font-weight: 500;
  margin-right: 2px;
}

.ai-chatbot-suggestion {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.4;
}

.ai-chatbot-suggestion:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ai-chatbot-suggestion:focus-visible {
  outline: 2px solid #1BA3F0;
  outline-offset: 1px;
}

/* ============================================================
   Input Area
   ============================================================ */

.ai-chatbot-input {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ai-chatbot-input__field {
  flex: 1 1;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.45;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  min-width: 0;
}

.ai-chatbot-input__send {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #E01E45, #c4173b);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 10px rgba(224, 30, 69, 0.25);
}

.ai-chatbot-input__send:hover:not(:disabled) {
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(224, 30, 69, 0.35);
}

.ai-chatbot-input__send:active:not(:disabled) {
  transform: scale(0.93);
}

.ai-chatbot-input__send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.ai-chatbot-input__send:focus-visible {
  outline: 2px solid #FF4D6D;
  outline-offset: 2px;
}

.ai-chatbot-input__send svg {
  width: 15px;
  height: 15px;
}

/* ============================================================
   Footer
   ============================================================ */

.ai-chatbot-footer {
  text-align: center;
  padding: 7px 14px;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

/* ============================================================
   Responsive — Mobile
   ============================================================ */

@media (max-width: 480px) {
  .ai-chatbot-panel {
    width: 100vw;
    max-width: 100vw;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
  }

  .ai-chatbot-fab {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    width: 52px;
    height: 52px;
  }

  .ai-chatbot-fab__icon-wrap svg {
    width: 22px;
    height: 22px;
  }

  .ai-chatbot-fab-tooltip {
    display: none;
  }

  .ai-chatbot-messages {
    padding: 14px 12px 6px;
  }

  .ai-chatbot-message__content {
    max-width: 88%;
  }

  .ai-chatbot-scroll-btn {
    bottom: 68px;
  }
}

/* ============================================================
   Additional Class Rules (JS-referenced classes)
   ============================================================ */

/* 1. Accent line — thin gradient header stripe */
.ai-chatbot-accent-line {
  height: 3px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #E01E45 25%,
    #1BA3F0 50%,
    #E01E45 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: ai-chatbot-accentShimmer 4s linear infinite;
}

/* 2. Header actions flex container */
.ai-chatbot-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 3. Clear-chat / action button */
.ai-chatbot-header__action-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.ai-chatbot-header__action-btn svg {
  width: 13px;
  height: 13px;
}

.ai-chatbot-header__action-btn:focus-visible {
  outline: 2px solid #E01E45;
  outline-offset: 1px;
}

/* 4. Feedback row (thumbs + timestamp) */
.ai-chatbot-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 0 2px;
}

/* 5. Feedback icon buttons */
.ai-chatbot-feedback__btn {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: all 0.15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  padding: 0;
}

.ai-chatbot-feedback__btn:hover {
  opacity: 0.8;
}

.ai-chatbot-feedback__btn svg {
  width: 12px;
  height: 12px;
}

.ai-chatbot-feedback__btn:focus-visible {
  outline: 2px solid #E01E45;
  outline-offset: 1px;
}

/* 6. Active feedback state */
.ai-chatbot-feedback__btn--active {
  opacity: 1;
  color: #E01E45;
}

/* 7. Follow-up suggestions container */
.ai-chatbot-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px 0 2px;
}

/* 8. "Related:" label */
.ai-chatbot-suggestions__label {
  font-size: 11px;
  font-weight: 500;
  margin-right: 2px;
}

/* 9. Suggestion pill button (blue-tinted) */
.ai-chatbot-suggestion {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.4;
}

.ai-chatbot-suggestion:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ai-chatbot-suggestion:focus-visible {
  outline: 2px solid #1BA3F0;
  outline-offset: 1px;
}

/* 10. Floating scroll-to-bottom button */
.ai-chatbot-scroll-btn {
  pointer-events: auto;
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  animation: ai-chatbot-scrollBtnIn 0.25s ease;
  transition: background 0.15s, color 0.15s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.ai-chatbot-scroll-btn svg {
  width: 13px;
  height: 13px;
}

/* 11. FAB tooltip bubble */
.ai-chatbot-fab-tooltip {
  pointer-events: auto;
  position: fixed;
  bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  right: calc(94px + env(safe-area-inset-right, 0px));
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  white-space: nowrap;
  z-index: 10052;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: ai-chatbot-tooltipIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 12. Tooltip close X button */
.ai-chatbot-fab-tooltip__close {
  display: inline;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  margin-left: 8px;
  opacity: 0.5;
  transition: opacity 0.15s;
  font-family: inherit;
}

.ai-chatbot-fab-tooltip__close:hover {
  opacity: 1;
}

/* 13. Grouped message — same sender, reduced spacing */
.ai-chatbot-message--grouped {
  margin-bottom: 3px;
}

/* 14. Last message in group — restore normal margin */
.ai-chatbot-message--last-in-group {
  margin-bottom: 14px;
}

/* 15. Hidden avatar — preserves space */
.ai-chatbot-message__avatar--hidden {
  visibility: hidden;
}

/* --- Dark-theme overrides for new classes ---------------------- */

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-scroll-btn {
  background: #1A1A1F;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #D8D8DE;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-scroll-btn:hover {
  background: #252530;
  color: #ECECEF;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-fab-tooltip {
  background: #1A1A1F;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #D8D8DE;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-fab-tooltip__close {
  color: #6A6B7A;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-suggestion {
  background: rgba(27, 163, 240, 0.08);
  border-color: rgba(27, 163, 240, 0.2);
  color: #7BC4F0;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-suggestion:hover:not(:disabled) {
  background: rgba(27, 163, 240, 0.15);
  color: #90D0F8;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-feedback__btn {
  color: #4A4B58;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-feedback__btn:hover {
  color: #8E8FA0;
  background: rgba(255, 255, 255, 0.04);
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-feedback__btn--active {
  color: #E01E45;
}

.ai-chatbot-wrapper[data-theme="dark"] .ai-chatbot-suggestions__label {
  color: #4A4B58;
}

/* --- Light-theme overrides for new classes --------------------- */

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-scroll-btn {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #2A2A3E;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-scroll-btn:hover {
  background: #F5F5F8;
  color: #1A1A2E;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-fab-tooltip {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #2A2A3E;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-fab-tooltip__close {
  color: #A0A0B4;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-suggestion {
  background: rgba(27, 163, 240, 0.05);
  border-color: rgba(27, 163, 240, 0.2);
  color: #1488CC;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-suggestion:hover:not(:disabled) {
  background: rgba(27, 163, 240, 0.1);
  color: #1BA3F0;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-feedback__btn {
  color: #B0B0C0;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-feedback__btn:hover {
  color: #6A6A80;
  background: rgba(0, 0, 0, 0.04);
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-feedback__btn--active {
  color: #E01E45;
}

.ai-chatbot-wrapper[data-theme="light"] .ai-chatbot-suggestions__label {
  color: #B0B0C0;
}

/* ============================================================
   Reduced Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .ai-chatbot-fab,
  .ai-chatbot-panel,
  .ai-chatbot-message,
  .ai-chatbot-typing,
  .ai-chatbot-fab__icon-wrap,
  .ai-chatbot-header__close,
  .ai-chatbot-header__action-btn,
  .ai-chatbot-input__send,
  .ai-chatbot-quick-action,
  .ai-chatbot-suggestion,
  .ai-chatbot-input__field,
  .ai-chatbot-scroll-btn,
  .ai-chatbot-accent-line,
  .ai-chatbot-fab-tooltip,
  .ai-chatbot-feedback__btn {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.ninjadash-ui-popover .ant-popover-inner-content {
  padding: 0 !important;
}

.ninjadash-ui-popover .ant-popover-inner {
  background: #111217 !important;
  background: var(--color-paper, #111217) !important;
  border: 1px solid color-mix(in srgb, #2a2a2a 85%, #E01E45) !important;
  border: 1px solid color-mix(in srgb, var(--color-border, #2a2a2a) 85%, var(--color-primary, #E01E45)) !important;
  border-radius: 14px !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.38),
    0 3px 10px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
  overflow: hidden;
}

.ninjadash-ui-popover .ant-popover-inner:hover {
  border-color: color-mix(in srgb, #E01E45 34%, #2a2a2a) !important;
  border-color: color-mix(in srgb, var(--color-primary, #E01E45) 34%, var(--color-border, #2a2a2a)) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(224, 30, 69, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(var(--color-primary-rgb, 224, 30, 69), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.ninjadash-ui-popover .ant-popover-arrow::before,
.ninjadash-ui-popover .ant-popover-arrow::after {
  background: #111217 !important;
  background: var(--color-paper, #111217) !important;
}

.ninjadash-ui-popover.ant-popover-placement-bottom .ant-popover-inner,
.ninjadash-ui-popover.ant-popover-placement-bottomLeft .ant-popover-inner,
.ninjadash-ui-popover.ant-popover-placement-bottomRight .ant-popover-inner {
  border-top: 2px solid rgba(224, 30, 69, 0.28) !important;
  border-top: 2px solid rgba(var(--color-primary-rgb, 224, 30, 69), 0.28) !important;
}

.ninjadash-ui-popover.ant-popover-placement-top .ant-popover-inner,
.ninjadash-ui-popover.ant-popover-placement-topLeft .ant-popover-inner,
.ninjadash-ui-popover.ant-popover-placement-topRight .ant-popover-inner {
  border-bottom: 2px solid rgba(224, 30, 69, 0.28) !important;
  border-bottom: 2px solid rgba(var(--color-primary-rgb, 224, 30, 69), 0.28) !important;
}

@media (max-width: 479px) {
  .ninjadash-ui-popover .ant-popover-inner {
    border-radius: 12px !important;
  }
}

/* ============================================
   DEMO BANNER STYLES
   ============================================ */

.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(250, 173, 20, 0.12) 0%, rgba(240, 160, 10, 0.08) 100%);
  border: 1px solid rgba(250, 173, 20, 0.4);
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: #1a1a1c;
  color: var(--color-text-primary, #1a1a1c);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(250, 173, 20, 0.1) inset;
  transition: all 0.25s ease;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
}

.demo-banner:hover {
  background: linear-gradient(135deg, rgba(250, 173, 20, 0.18) 0%, rgba(240, 160, 10, 0.12) 100%);
  border-color: rgba(250, 173, 20, 0.55);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(250, 173, 20, 0.15) inset;
}

/* Icon styling */
.demo-banner__icon {
  color: #d4940a;
  font-size: 14px;
  flex-shrink: 0;
  animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

/* Title styling */
.demo-banner__title {
  font-weight: 600;
  color: #1a1a1c;
  color: var(--color-text-primary, #1a1a1c);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Testing badge */
.demo-banner__testing-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(250, 173, 20, 0.2);
  border: 1px solid rgba(250, 173, 20, 0.4);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #faad14;
  white-space: nowrap;
  animation: testing-pulse 1.5s ease-in-out infinite;
}

@keyframes testing-pulse {
  0%, 100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(250, 173, 20, 0.3);
  }
}

.demo-banner--testing {
  border-color: rgba(250, 173, 20, 0.5);
}

/* Detail text styling */
.demo-banner__detail {
  color: #6a6b75;
  color: var(--color-text-secondary, #6a6b75);
  white-space: nowrap;
  font-size: 12px;
  display: none;
}

/* Dismiss button */
.demo-banner__dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: #6a6b75;
  color: var(--color-text-secondary, #6a6b75);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  margin-left: 4px;
  padding: 0;
  font-weight: 400;
}

.demo-banner__dismiss:hover {
  background: rgba(0, 0, 0, 0.15);
  color: #1a1a1c;
  color: var(--color-text-primary, #1a1a1c);
  transform: scale(1.1);
}

.demo-banner__dismiss:active {
  transform: scale(0.95);
}

/* ============================================
   INLINE MODE (Desktop - inside header)
   ============================================ */

.demo-banner--inline {
  padding: 6px 12px;
  gap: 8px;
}

.demo-banner--inline .demo-banner__detail {
  display: none;
}

/* ============================================
   FULL WIDTH MODE (Mobile - below navbar)
   ============================================ */

.demo-banner--full-width {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 998;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 8px 16px;
  gap: 8px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(250, 173, 20, 0.15) inset;
}

/* Safe area support for notched devices on full-width banner */
@supports (top: env(safe-area-inset-top)) {
  .demo-banner--full-width {
    top: calc(64px + env(safe-area-inset-top));
  }
}

.demo-banner--full-width .demo-banner__icon {
  font-size: 13px;
}

.demo-banner--full-width .demo-banner__title {
  font-size: 12px;
}

.demo-banner--full-width .demo-banner__detail {
  display: none;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 479px) {
  .demo-banner {
    padding: 7px 12px;
    gap: 6px;
    font-size: 11px;
    border-radius: 8px;
  }

  .demo-banner__icon {
    font-size: 12px;
  }

  .demo-banner__title {
    font-size: 11px;
    font-weight: 600;
  }

  .demo-banner__dismiss {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 14px;
  }
}

/* Small mobile */
@media (max-width: 359px) {
  .demo-banner {
    padding: 6px 10px;
    gap: 4px;
  }

  .demo-banner__title {
    font-size: 10px;
  }
}

/* ============================================
   TOUCH-FRIENDLY ADJUSTMENTS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  .demo-banner {
    padding: 10px 16px;
    min-height: 44px;
  }

  .demo-banner__dismiss {
    width: 32px;
    height: 32px;
    font-size: 18px;
    border-radius: 8px;
  }

  .demo-banner--full-width .demo-banner__dismiss {
    width: 36px;
    height: 36px;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .demo-banner {
    animation: none;
    transition: none;
  }

  .demo-banner__icon {
    animation: none;
  }

  .demo-banner__testing-badge {
    animation: none;
  }

  .demo-banner:hover {
    transform: none;
  }

  .demo-banner__dismiss:hover {
    transform: none;
  }
}

/* ============================================
   SAFE AREA SUPPORT (Notched devices)
   ============================================ */

@supports (padding-top: env(safe-area-inset-top)) {
  .demo-banner--full-width {
    top: calc(64px + env(safe-area-inset-top));
    top: calc(var(--header-height, 64px) + env(safe-area-inset-top));
    padding-top: calc(8px + env(safe-area-inset-top) * 0.5);
    padding-bottom: calc(8px + env(safe-area-inset-bottom) * 0.5);
  }
}

.bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 12px;
  transition: transform 0.2s ease;
}

.bullet:hover {
  transform: scale(1.3);
}

html[dir="rtl"] .bullet {
  margin-left: 12px;
  margin-right: 0;
}

.primary {
  background: #fb3586;
  color: #fff;
  box-shadow: 0 0 8px rgba(251, 53, 134, 0.4);
}

.secondary {
  background: #E01E45;
  color: #fff;
  box-shadow: 0 0 8px rgba(224, 30, 69, 0.4);
}

.success {
  background: #01b81a;
  color: #fff;
  box-shadow: 0 0 8px rgba(1, 184, 26, 0.4);
}

.info {
  background: #00aaff;
  color: #fff;
  box-shadow: 0 0 8px rgba(0, 170, 255, 0.4);
}

.warning {
  background: #fa8b0c;
  color: #fff;
  box-shadow: 0 0 8px rgba(250, 139, 12, 0.4);
}

/* Mobile Responsive Styles */
@media (max-width: 479px) {
  .bullet {
    width: 10px;
    height: 10px;
    margin-right: 8px;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .bullet {
    box-shadow: 0 0 6px currentColor;
  }
}

/* Meet the Team (console) — matches landing `Team.js` section */

.meet-team-console-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  padding-top: 2.75rem;
  padding-bottom: 3.5rem;
  margin-bottom: 0.5rem;
  border-radius: 1rem;
  background-color: var(--color-elevated);
  background-image: linear-gradient(
      180deg,
      var(--color-background) 0%,
      var(--color-elevated) 100%
    ),
    radial-gradient(circle at 25% 25%, rgba(224, 30, 69, 0.015) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(224, 30, 69, 0.015) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  background-repeat: no-repeat, repeat, repeat;
}

@media (min-width: 640px) {
  .meet-team-console-section {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
  }
}

@media (min-width: 768px) {
  .meet-team-console-section {
    padding-top: 4.5rem;
    padding-bottom: 5.5rem;
  }
}

.meet-team-console-section-top-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-primary) 30%, transparent),
    transparent
  );
  pointer-events: none;
}

.meet-team-console-page .meet-team-console-hero {
  position: relative;
  text-align: center;
  margin-bottom: 2rem;
  padding: 2.25rem 1.25rem 2rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-elevated) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.meet-team-console-page .meet-team-console-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 25% 25%, rgba(224, 30, 69, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(224, 30, 69, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.85;
  pointer-events: none;
}

.meet-team-console-page .meet-team-console-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-primary) 35%, transparent),
    transparent
  );
  pointer-events: none;
}

.meet-team-console-page .meet-team-console-hero-inner {
  position: relative;
  z-index: 1;
}

.meet-team-console-page .meet-team-console-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-sans);
  color: color-mix(in srgb, var(--color-link) 72%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}

.meet-team-console-page .meet-team-console-title {
  margin: 0 0 1rem;
  font-family: var(--font-sans);
  font-size: clamp(1.625rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  line-height: 1.15;
}

.meet-team-console-page .meet-team-console-title-accent {
  color: var(--color-link);
}

.meet-team-console-page .meet-team-console-divider {
  width: 48px;
  height: 3px;
  margin: 0 auto 1.25rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-link));
}

.meet-team-console-page .meet-team-console-intro {
  margin: 0 auto;
  max-width: 48rem;
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 1.6vw, 1.125rem);
  font-weight: 300;
  line-height: 1.625;
  color: color-mix(in srgb, var(--color-text-secondary) 80%, transparent);
}

.meet-team-console-hiring-wrap {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 2.5rem;
  padding: 0 0.5rem;
}

@media (min-width: 640px) {
  .meet-team-console-hiring-wrap {
    margin-top: 4rem;
    padding: 0 1rem;
  }
}

.meet-team-console-page .meet-team-console-hiring {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  max-width: 32rem;
  padding: 0.65rem 1.25rem;
  border-radius: 0.75rem;
  background: rgba(224, 30, 69, 0.05);
  border: 1px solid rgba(224, 30, 69, 0.15);
}

.meet-team-console-page .meet-team-console-hiring-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
  animation: meet-team-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .meet-team-console-page .meet-team-console-hiring-dot {
    animation: none;
  }
}

@keyframes meet-team-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.meet-team-console-page .meet-team-console-hiring-text {
  font-size: clamp(0.75rem, 1.4vw, 0.875rem);
  font-family: var(--font-sans);
  line-height: 1.375;
  color: color-mix(in srgb, var(--color-text-secondary) 70%, transparent);
}

.meet-team-console-page .meet-team-console-hiring a {
  color: var(--color-link);
  font-weight: 600;
  margin-left: 0.2rem;
}

.meet-team-console-page .meet-team-console-hiring a:hover {
  color: var(--color-primary);
}

/* Strip default ant card chrome so inner glass card shows */
.meet-team-console-page .meet-team-console-card-ant.ant-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.meet-team-console-page .meet-team-console-card-ant.ant-card::before {
  display: none;
}

.meet-team-console-page .meet-team-console-card-ant.ant-card:hover {
  transform: none;
  box-shadow: none !important;
}

.meet-team-console-page .meet-team-console-card-ant .ant-card-body {
  padding: 0 !important;
}

.meet-team-console-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  gap: 1rem;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .meet-team-console-grid {
    gap: 1.5rem;
  }
}

@media (min-width: 768px) {
  .meet-team-console-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.meet-team-console-grid-cell {
  min-width: 0;
}

/* Contact card — landing TeamMemberCard–like (variant="platformTeam" only; CSS loaded with ContactGrid) */
.meet-team-platform-card-root {
  position: relative;
}

.meet-team-platform-card-inner {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(24, 24, 27, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #3f3f46;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}

.meet-team-platform-card-root:hover .meet-team-platform-card-inner {
  transform: translateY(-8px);
  border-color: #52525b;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(224, 30, 69, 0.08);
}

.meet-team-platform-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.meet-team-platform-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
  filter: brightness(0.88) contrast(1.05);
  transition: transform 0.65s ease;
}

.meet-team-platform-card-root:hover .meet-team-platform-card-media img {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .meet-team-platform-card-inner,
  .meet-team-platform-card-media img {
    transition-duration: 0.01ms;
  }
  .meet-team-platform-card-root:hover .meet-team-platform-card-inner {
    transform: none;
  }
  .meet-team-platform-card-root:hover .meet-team-platform-card-media img {
    transform: none;
  }
}

.meet-team-platform-card-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 30%,
    rgba(9, 9, 11, 0.4) 60%,
    rgba(9, 9, 11, 0.95) 100%
  );
}

.meet-team-platform-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #E01E45, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.meet-team-platform-card-root:hover .meet-team-platform-card-accent {
  opacity: 1;
}

.meet-team-platform-card-figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1.5rem 1rem;
  text-align: left;
}

@media (min-width: 640px) {
  .meet-team-platform-card-figcaption {
    padding: 1.5rem 1.5rem 1rem;
  }
}

.meet-team-platform-card-figcaption h3 {
  margin: 0 0 0.15rem;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 700;
  font-family: var(--font-sans);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.meet-team-platform-card-role {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--color-link);
  letter-spacing: 0.06em;
}

.meet-team-platform-card-body {
  padding: 0.75rem 1.25rem 1.25rem;
  border-top: 1px solid #3f3f46;
}

@media (min-width: 640px) {
  .meet-team-platform-card-body {
    padding: 0.75rem 1.5rem 1.5rem;
  }
}

.meet-team-platform-card-bio {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  font-family: var(--font-sans);
  color: color-mix(in srgb, var(--color-text-secondary) 60%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.75rem;
}

.meet-team-platform-card-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(4px);
}

.meet-team-platform-card-root:hover .meet-team-platform-card-social {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .meet-team-platform-card-social {
    opacity: 0.85;
    transform: none;
    transition: none;
  }
  .meet-team-platform-card-root:hover .meet-team-platform-card-social {
    transform: none;
  }
}

.meet-team-console-social-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: default;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  background: rgba(var(--color-primary-rgb), 0.08);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 640px) {
  .meet-team-console-social-btn {
    width: 2rem;
    height: 2rem;
  }
}

.meet-team-console-social-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.15);
  border-color: rgba(var(--color-primary-rgb), 0.3);
  box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.1);
}

.meet-team-console-social-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: color-mix(in srgb, var(--color-link) 70%, transparent);
}

/* Sidebar spacing + alignment */
.note-sidebar-top {
  padding: 20px 20px 0 !important;
}

.note-sidebar-bottom {
  padding: 10px 10px 20px !important;
}

.note-search {
  padding: 12px 10px 6px !important;
}

.note-search .ant-input-affix-wrapper {
  border-radius: 8px !important;
  height: 40px;
}

/* Nav spacing cleanup */
.note-sidebar-bottom ul li a {
  padding: 10px 14px !important;
  border-radius: 8px;
}

.nav-text span:first-child {
  font-size: 14px;
}

.nav-count {
  font-size: 11px !important;
  min-width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
}

/* Labels section spacing */
.nav-labels {
  margin-top: 24px !important;
}

.nav-labels p {
  padding: 0 14px !important;
  margin-bottom: 6px !important;
}

/* Cards grid spacing fix */
.ant-row {
  row-gap: 18px;
}

/* Note card refinement */
.ant-card {
  border-radius: 12px !important;
}

.ant-card-body {
  padding: 18px !important;
}

/* Improve empty state */
.note-empty {
  padding: 60px 20px !important;
  opacity: 0.7;
}

/* Responsive fixes */
@media (max-width: 991px) {
  .notes-panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .desktop-add-note {
    width: 100%;
  }
}

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f67f;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f67f;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
  /* Keep landing styles scoped; don't override app shell. */
/* ============================================
     IMPROVED TEXT READABILITY ON DARK BACKGROUNDS
     ============================================ */
/* Primary mineral text - improved contrast for dark backgrounds */
.text-mineral-300 {
    color: rgba(220, 222, 228, 0.95) !important;
  }
.text-mineral-400 {
    color: rgba(185, 188, 199, 0.95) !important;
  }
.text-mineral-500 {
    color: rgba(165, 168, 180, 0.88) !important;
  }
.text-mineral-600 {
    color: rgba(150, 153, 165, 0.8) !important;
  }
/* Secondary text - maintain hierarchy with readable contrast */
.text-mineral-300\/90 {
    color: rgba(220, 222, 228, 0.92) !important;
  }
.text-mineral-300\/80 {
    color: rgba(220, 222, 228, 0.88) !important;
  }
.text-mineral-300\/75 {
    color: rgba(220, 222, 228, 0.85) !important;
  }
.text-mineral-300\/70 {
    color: rgba(220, 222, 228, 0.82) !important;
  }
.text-mineral-300\/65 {
    color: rgba(220, 222, 228, 0.78) !important;
  }
.text-mineral-300\/60 {
    color: rgba(220, 222, 228, 0.75) !important;
  }
.text-mineral-300\/55 {
    color: rgba(220, 222, 228, 0.72) !important;
  }
.text-mineral-300\/50 {
    color: rgba(220, 222, 228, 0.68) !important;
  }
.text-mineral-300\/40 {
    color: rgba(220, 222, 228, 0.62) !important;
  }
/* Mineral-400 opacity variants */
.text-mineral-400\/95 {
    color: rgba(185, 188, 199, 0.92) !important;
  }
.text-mineral-400\/90 {
    color: rgba(185, 188, 199, 0.88) !important;
  }
.text-mineral-400\/80 {
    color: rgba(185, 188, 199, 0.85) !important;
  }
.text-mineral-400\/70 {
    color: rgba(185, 188, 199, 0.8) !important;
  }
.text-mineral-400\/60 {
    color: rgba(185, 188, 199, 0.75) !important;
  }
.text-mineral-400\/50 {
    color: rgba(185, 188, 199, 0.7) !important;
  }
.text-mineral-400\/40 {
    color: rgba(185, 188, 199, 0.65) !important;
  }
/* ============================================
     IMPROVED TOOLTIP STYLING
     ============================================ */
.ant-tooltip {
    pointer-events: auto !important;
  }
.ant-tooltip .ant-tooltip-inner {
    background: linear-gradient(
      135deg,
      rgba(30, 30, 35, 0.98) 0%,
      rgba(20, 20, 24, 0.98) 100%
    ) !important;
    border: 1px solid rgba(224, 30, 69, 0.35) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: rgba(229, 231, 235, 0.95) !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 0 20px rgba(224, 30, 69, 0.08) !important;
    max-width: 260px !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: tooltip-fade-in 0.2s ease-out !important;
  }
@keyframes tooltip-fade-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
.ant-tooltip .ant-tooltip-arrow {
    display: block !important;
  }
.ant-tooltip .ant-tooltip-arrow::before,
  .ant-tooltip .ant-tooltip-arrow::after {
    background: linear-gradient(
      135deg,
      rgba(30, 30, 35, 0.99) 0%,
      rgba(20, 20, 24, 0.99) 100%
    ) !important;
    border-color: rgba(224, 30, 69, 0.35) !important;
    width: 10px !important;
    height: 10px !important;
  }
/* Tooltip arrow positioning */
/* Tooltip title styling */
.ant-tooltip .ant-tooltip-title {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }
/* Tooltip with title arrow */
.ant-tooltip.has-title .ant-tooltip-arrow::before {
    display: none !important;
  }
/* Tooltip text styling */
.ant-tooltip .ant-tooltip-inner .ant-tooltip-text {
    color: rgba(209, 213, 219, 0.9) !important;
  }
/* Tooltip icon styling */
.ant-tooltip .ant-tooltip-inner .anticon {
    margin-right: 6px !important;
    color: rgba(224, 30, 69, 0.9) !important;
  }
/* Tooltip danger variant */
.ant-tooltip-danger .ant-tooltip-inner {
    background: linear-gradient(
      135deg,
      rgba(50, 20, 20, 0.98) 0%,
      rgba(40, 15, 15, 0.98) 100%
    ) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(239, 68, 68, 0.15) !important;
  }
/* Tooltip success variant */
.ant-tooltip-success .ant-tooltip-inner {
    background: linear-gradient(
      135deg,
      rgba(20, 40, 20, 0.98) 0%,
      rgba(15, 30, 15, 0.98) 100%
    ) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(34, 197, 94, 0.12) !important;
  }
/* Tooltip warning variant */
.ant-tooltip-warning .ant-tooltip-inner {
    background: linear-gradient(
      135deg,
      rgba(45, 35, 15, 0.98) 0%,
      rgba(35, 25, 10, 0.98) 100%
    ) !important;
    border-color: rgba(234, 179, 8, 0.4) !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(234, 179, 8, 0.12) !important;
  }
/* Mobile tooltip adjustments */
@media (max-width: 479px) {
    .ant-tooltip .ant-tooltip-inner {
      padding: 10px 12px !important;
      font-size: 12px !important;
      max-width: calc(100vw - 48px) !important;
      border-radius: 8px !important;
    }
  }
/* Touch-friendly tooltip on mobile */
@media (hover: none) and (pointer: coarse) {
    .ant-tooltip .ant-tooltip-inner {
      padding: 12px 14px !important;
      font-size: 13px !important;
    }
  }
/* ============================================
     LANDING PAGE ELEMENT IMPROVEMENTS
     ============================================ */
/* Better text hierarchy in sections */
.section-description {
    color: rgba(209, 213, 219, 0.85) !important;
    line-height: 1.6 !important;
  }
/* Feature card descriptions */
/* Stat labels with better contrast */
.stat-label {
    color: rgba(156, 163, 175, 0.85) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
/* Button text - ensure readability (primary CTA sits on a saturated fill) */
.cta-button {
    color: #ffffff !important;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.55),
      0 0 1px rgba(0, 0, 0, 0.75) !important;
  }
/* Card text hierarchy */
.card-title {
    color: rgba(255, 255, 255, 0.95) !important;
  }
/* Partner card text */
/* Trust metrics text */
/* FAQ question text */
/* FAQ answer text - slightly muted but readable */
/* Footer text improvements */
/* Team member role text */
/* ============================================
     MOBILE LANDING PAGE IMPROVEMENTS
     ============================================ */
@media (max-width: 640px) {
    /* Better text sizing on mobile */
    .text-mineral-300 {
      color: rgba(229, 231, 235, 0.97) !important;
    }

    .text-mineral-400 {
      color: rgba(200, 203, 215, 0.95) !important;
    }

    .text-mineral-500 {
      color: rgba(180, 183, 195, 0.92) !important;
    }

    /* Larger touch targets */
    .cta-button {
      min-height: 52px !important;
      padding: 14px 24px !important;
      font-size: 15px !important;
    }

    /* Improved card padding */
    .glass-card,
    .metallic-card {
      padding: 20px !important;
    }

    /* Feature card grid adjustment */
    .features-grid {
      gap: 12px !important;
    }

    /* Partner card sizing */
    .partner-card {
      min-height: 100px !important;
    }

    /* Trust metrics bar */
    .trust-metrics {
      padding: 12px !important;
    }

    .trust-metric-value {
      font-size: 20px !important;
    }

    .trust-metric-label {
      font-size: 10px !important;
    }
  }
/* ============================================
     INPUT FIELD IMPROVEMENTS
     ============================================ */
.cyber-input {
    background: rgba(22, 22, 26, 0.95) !important;
    border: 1px solid rgba(120, 120, 135, 0.45) !important;
    color: rgba(235, 237, 242, 0.97) !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
  }
.cyber-input::placeholder {
    color: rgba(180, 183, 195, 0.6) !important;
  }
.cyber-input:focus {
    border-color: rgba(224, 30, 69, 0.65) !important;
    box-shadow:
      0 0 0 3px rgba(224, 30, 69, 0.18),
      0 0 24px rgba(224, 30, 69, 0.12) !important;
    outline: none !important;
  }
/* ============================================
     TABLEAU/STATUS TEXT IMPROVEMENTS
     ============================================ */
.status-success {
    color: rgba(0, 208, 132, 0.9) !important;
  }
/* ============================================
     PRICING TABLE IMPROVEMENTS
     ============================================ */
/* ============================================
     PARTNER/INTEGRATION LOGO TEXT
     ============================================ */
/* ============================================
     MOBILE TOOLTIP ADJUSTMENTS
     ============================================ */
@media (max-width: 640px) {
    .ant-tooltip .ant-tooltip-inner {
      font-size: 11px !important;
      padding: 6px 10px !important;
      max-width: 180px !important;
    }
  }
/* Skip-to-content link for keyboard/screen-reader accessibility */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: #E01E45;
    background: var(--color-primary, #E01E45);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0 0 0.5rem 0.5rem;
    text-decoration: none;
    transition: top 0.2s ease;
    white-space: nowrap;
  }
.skip-to-content:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
/* CTA Button Styles — darker fill than primary→link so white label meets contrast on hero */
.cta-button {
    border-radius: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: #fff;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
[data-theme="light"] .landing-page-wrapper .animated-gradient .cta-button {
  color: var(--color-text-primary);
}
@media (min-width: 640px) {
    .cta-button {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 1rem;
        line-height: 1.5rem;
    }
}
.cta-button {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-primary) 72%, black) 0%,
      var(--color-primary) 45%,
      color-mix(in srgb, var(--color-primary) 68%, black) 100%
    );
    border: 1px solid rgba(var(--color-primary-rgb), 0.55);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.25);
    letter-spacing: 0.01em;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.65);
  }
.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: left 0.4s ease;
    pointer-events: none;
  }
.cta-button:hover::before {
    left: 100%;
  }
.cta-button:hover {
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.35);
    background: linear-gradient(
      135deg,
      var(--color-primary) 0%,
      color-mix(in srgb, var(--color-primary) 58%, black) 100%
    );
  }
.cta-button:active {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(var(--color-primary-rgb), 0.2);
  }
/* overflow:hidden clips outline; use ring-style shadow for keyboard focus */
.cta-button:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--color-background) 88%, transparent),
      0 0 0 4px rgba(var(--color-primary-rgb), 0.55),
      0 4px 16px rgba(var(--color-primary-rgb), 0.35);
  }
/* Secondary button — theme-aware; add .neon-button--on-dark on fixed dark heroes */
.neon-button {
    border-radius: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
@media (min-width: 640px) {
    .neon-button {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 1rem;
        line-height: 1.5rem;
    }
}
.neon-button {
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-elevated) 88%, transparent);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
  }
.neon-button--on-dark {
    color: rgba(255, 255, 255, 0.92);
    border-color: color-mix(in srgb, #ffffff 24%, transparent);
    background: color-mix(in srgb, #000000 38%, transparent);
  }
.neon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.4s ease;
  }
.neon-button:hover::before {
    left: 100%;
  }
.neon-button:hover {
    border-color: color-mix(in srgb, var(--color-border) 65%, var(--color-text-secondary));
    background: color-mix(in srgb, var(--color-elevated) 96%, var(--color-primary) 4%);
  }
.neon-button--on-dark:hover {
    border-color: color-mix(in srgb, #ffffff 44%, transparent);
    background: color-mix(in srgb, #000000 52%, transparent);
  }
.neon-button:active {
    transform: scale(0.98);
  }
.neon-button:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--color-background) 88%, transparent),
      0 0 0 4px rgba(var(--color-primary-rgb), 0.45);
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  }
.neon-button--on-dark:focus-visible {
    box-shadow:
      0 0 0 2px color-mix(in srgb, #ffffff 12%, transparent),
      0 0 0 4px rgba(var(--color-primary-rgb), 0.5);
    border-color: color-mix(in srgb, #ffffff 50%, transparent);
  }
/* Glass Card */
.glass-card {
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
@media (min-width: 640px) {
    .glass-card {
        border-radius: 1rem;
        padding: 1.5rem;
    }
}
@media (min-width: 768px) {
    .glass-card {
        padding: 2rem;
    }
}
.glass-card {
    background: color-mix(in srgb, var(--color-elevated) 85%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    box-shadow:
      0 4px 24px color-mix(in srgb, var(--color-background) 55%, transparent),
      0 0 0 1px color-mix(in srgb, var(--color-border) 40%, transparent);
    position: relative;
    overflow: hidden;
  }
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(var(--color-primary-rgb), 0.15),
      transparent
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }
.glass-card:hover::before {
    opacity: 1;
  }
.glass-card:hover {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-color: color-mix(in srgb, var(--color-border) 65%, var(--color-text-secondary));
    box-shadow:
      0 16px 40px color-mix(in srgb, var(--color-background) 65%, transparent),
      0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, var(--color-border)),
      0 0 30px rgba(var(--color-primary-rgb), 0.04);
}
@media (max-width: 767px) {
    .glass-card {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
  }
/* Metallic Card */
.metallic-card {
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
@media (min-width: 640px) {
    .metallic-card {
        border-radius: 1rem;
        padding: 1.5rem;
    }
}
@media (min-width: 768px) {
    .metallic-card {
        padding: 2rem;
    }
}
.metallic-card {
    background: color-mix(in srgb, var(--color-elevated) 92%, transparent);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
  }
.metallic-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      135deg,
      rgba(var(--color-primary-rgb), 0.2),
      transparent,
      color-mix(in srgb, var(--color-link) 30%, transparent)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
.metallic-card:hover::before {
    opacity: 1;
  }
.metallic-card:hover {
    --tw-translate-y: -0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-color: color-mix(in srgb, var(--color-border) 65%, var(--color-text-secondary));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(var(--color-primary-rgb), 0.04);
}
/* Accent Text */
.glow-text {
    color: var(--color-link);
    text-shadow: none;
  }
/* Section Container — vertical rhythm + horizontal inset matches app shell */
.section-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
@media (min-width: 640px) {
    .section-container {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}
@media (min-width: 768px) {
    .section-container {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}
@media (min-width: 1024px) {
    .section-container {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}
.section-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-left: max(clamp(20px, 4vw, 32px), env(safe-area-inset-left, 0px));
    padding-left: max(var(--app-page-pad-x, clamp(20px, 4vw, 32px)), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(20px, 4vw, 32px), env(safe-area-inset-right, 0px));
    padding-right: max(var(--app-page-pad-x, clamp(20px, 4vw, 32px)), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    overflow-x: hidden;
  }
/* Below-the-fold sections: defer layout/paint until near viewport (long landing pages) */
.landing-page-wrapper main .section-container {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
  }
/* Section Divider */
.section-divider {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-link));
    margin: 0 auto 1.25rem;
    border-radius: 2px;
  }
@media (min-width: 640px) {
    .section-divider {
      width: 56px;
      margin-bottom: 1.75rem;
    }
  }
/* Landing header: scrolled styles toggled via classList (avoids React re-render on scroll). */
.landing-header {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 50;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    transition-property: background,box-shadow,border-color,padding,-webkit-backdrop-filter;
    transition-property: background,backdrop-filter,box-shadow,border-color,padding;
    transition-property: background,backdrop-filter,box-shadow,border-color,padding,-webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@media (min-width: 640px) {
    .landing-header {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}
.landing-header {
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
@media (prefers-reduced-motion: reduce) {
    .landing-header {
      transition-duration: 0.01ms;
    }
  }
/* Undo landing-page-wrapper * { word-wrap } so nav stays one line and aligned. */
.landing-header nav a,
  .landing-header nav button {
    overflow-wrap: normal;
    word-wrap: normal;
  }
/* Override global a:not(.ant-btn) color so header nav links use their Tailwind classes */
.landing-header nav a:not(.cta-button) {
    color: inherit !important;
  }
.landing-header nav a:not(.cta-button):hover {
    color: #ffffff !important;
  }
/* Ensure header sits above all page content including hero overlays */
.landing-header {
    z-index: 9999 !important;
    pointer-events: auto !important;
    position: fixed !important;
  }
.landing-header * {
    pointer-events: auto;
  }
/* Fixed header: respect notch / home indicator (horizontal padding mirrors previous Tailwind px-* scale). */
.landing-header nav {
    box-sizing: border-box;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
@media (min-width: 640px) {
    .landing-header nav {
      padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
      padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
    }
  }
@media (min-width: 768px) {
    .landing-header nav {
      padding-left: max(2rem, env(safe-area-inset-left, 0px));
      padding-right: max(2rem, env(safe-area-inset-right, 0px));
    }
  }
@media (min-width: 1024px) {
    .landing-header nav {
      padding-left: max(3rem, env(safe-area-inset-left, 0px));
      padding-right: max(3rem, env(safe-area-inset-right, 0px));
    }
  }
@media (min-width: 1280px) {
    .landing-header nav {
      padding-left: max(4rem, env(safe-area-inset-left, 0px));
      padding-right: max(4rem, env(safe-area-inset-right, 0px));
    }
  }
.landing-header.landing-header--scrolled {
    padding-top: 0px;
    padding-bottom: 0px;
    border-bottom-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-background) 94%, transparent) 0%,
      color-mix(in srgb, var(--color-background) 88%, transparent) 100%
    );
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
      0 4px 30px rgba(0, 0, 0, 0.5),
      0 1px 0 color-mix(in srgb, var(--color-primary) 12%, transparent);
}
@media (max-width: 767px) {
    .landing-header.landing-header--scrolled {
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
    }
  }
@media (max-width: 479px) {
    .landing-header.landing-header--scrolled {
      backdrop-filter: blur(10px) saturate(140%);
      -webkit-backdrop-filter: blur(10px) saturate(140%);
      background: color-mix(in srgb, var(--color-background) 96%, transparent);
    }
  }
/* Icon Container */
.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding: 0.75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
@media (max-width: 374px) {
  .landing-page-wrapper footer form.icon-container {
    flex-direction: column;
    gap: 8px;
  }

  .landing-page-wrapper footer form.icon-container button {
    width: 100%;
  }
}
@media (min-width: 640px) {
    .icon-container {
        border-radius: 1rem;
        padding: 1rem;
    }
}
@media (min-width: 768px) {
    .icon-container {
        padding: 1.25rem;
    }
}
.icon-container {
    background: rgba(var(--color-primary-rgb), 0.08);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  }
.icon-container:hover,
  .group:hover .icon-container {
    background: rgba(var(--color-primary-rgb), 0.14);
    border-color: rgba(var(--color-primary-rgb), 0.35);
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.1);
  }

  .\!group:hover .icon-container {
    background: rgba(var(--color-primary-rgb), 0.14) !important;
    border-color: rgba(var(--color-primary-rgb), 0.35) !important;
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.1) !important;
  }
/* Gradient border animated */
.gradient-border {
    position: relative;
  }
.gradient-border::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-link));
    transition: width 0.3s ease;
  }
.gradient-border:hover::after,
  .gradient-border:focus-visible::after {
    width: 100%;
  }
/* Stat counter */
.stat-item {
    text-align: center;
}
.stat-item .stat-number {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
}
@media (min-width: 640px) {
    .stat-item .stat-number {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}
@media (min-width: 768px) {
    .stat-item .stat-number {
        font-size: 3rem;
        line-height: 1;
    }
}
.stat-item .stat-number {
    background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-link) 55%, white));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
.stat-item .stat-label {
    color: rgba(185, 188, 199, 0.95);
  }
@media (max-width: 640px) {
    /* Better text sizing on mobile */

    .stat-item .stat-label {
      color: rgba(200, 203, 215, 0.95);
    }

    /* Larger touch targets */

    /* Improved card padding */

    /* Feature card grid adjustment */

    /* Partner card sizing */

    /* Trust metrics bar */
  }
.stat-item .stat-label {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #6E6E78;
}
[data-theme="light"] .stat-item .stat-label {
  color: rgba(90, 90, 114, 0.85);
}
[data-theme="light"] .landing-page-wrapper .stat-item .stat-label {
  color: rgba(90, 90, 114, 0.85);
}
@media (min-width: 640px) {
    .stat-item .stat-label {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}
.stat-item .stat-label {
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
.pointer-events-none {
    pointer-events: none;
}
.pointer-events-auto {
    pointer-events: auto;
}
.\!visible {
    visibility: visible !important;
}
.visible {
    visibility: visible;
}
.invisible {
    visibility: hidden;
}
.collapse {
    visibility: collapse;
}
.static {
    position: static;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: -webkit-sticky;
    position: sticky;
}
.inset-0 {
    inset: 0px;
}
.inset-x-0 {
    left: 0px;
    right: 0px;
}
.inset-x-6 {
    left: 1.5rem;
    right: 1.5rem;
}
.-bottom-4 {
    bottom: -1rem;
}
.-bottom-8 {
    bottom: -2rem;
}
.-left-1 {
    left: -0.25rem;
}
.-left-8 {
    left: -2rem;
}
.-right-10 {
    right: -2.5rem;
}
.-right-12 {
    right: -3rem;
}
.-right-16 {
    right: -4rem;
}
.-right-2 {
    right: -0.5rem;
}
.-right-4 {
    right: -1rem;
}
.-right-8 {
    right: -2rem;
}
.-top-10 {
    top: -2.5rem;
}
.-top-16 {
    top: -4rem;
}
.-top-3 {
    top: -0.75rem;
}
.bottom-0 {
    bottom: 0px;
}
.bottom-3 {
    bottom: 0.75rem;
}
.bottom-6 {
    bottom: 1.5rem;
}
.left-0 {
    left: 0px;
}
.left-1\/2 {
    left: 50%;
}
.left-3 {
    left: 0.75rem;
}
.left-4 {
    left: 1rem;
}
.left-\[7px\] {
    left: 7px;
}
.right-0 {
    right: 0px;
}
.right-3 {
    right: 0.75rem;
}
.right-6 {
    right: 1.5rem;
}
.top-0 {
    top: 0px;
}
.top-1\.5 {
    top: 0.375rem;
}
.top-1\/2 {
    top: 50%;
}
.top-1\/3 {
    top: 33.333333%;
}
.top-1\/4 {
    top: 25%;
}
.top-3 {
    top: 0.75rem;
}
.top-4 {
    top: 1rem;
}
.top-5 {
    top: 1.25rem;
}
.top-8 {
    top: 2rem;
}
.top-full {
    top: 100%;
}
.isolate {
    isolation: isolate;
}
.z-10 {
    z-index: 10;
}
.z-20 {
    z-index: 20;
}
.z-50 {
    z-index: 50;
}
.z-\[1\] {
    z-index: 1;
}
.z-\[60\] {
    z-index: 60;
}
.z-\[80\] {
    z-index: 80;
}
.m-0 {
    margin: 0px;
}
.m-1\.5 {
    margin: 0.375rem;
}
.mx-0 {
    margin-left: 0px;
    margin-right: 0px;
}
.mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.-mt-1 {
    margin-top: -0.25rem;
}
.-mt-4 {
    margin-top: -1rem;
}
.mb-0\.5 {
    margin-bottom: 0.125rem;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-1\.5 {
    margin-bottom: 0.375rem;
}
.mb-10 {
    margin-bottom: 2.5rem;
}
.mb-12 {
    margin-bottom: 3rem;
}
.mb-14 {
    margin-bottom: 3.5rem;
}
.mb-16 {
    margin-bottom: 4rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-2\.5 {
    margin-bottom: 0.625rem;
}
.mb-20 {
    margin-bottom: 5rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-5 {
    margin-bottom: 1.25rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-7 {
    margin-bottom: 1.75rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.ml-0\.5 {
    margin-left: 0.125rem;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-3 {
    margin-left: 0.75rem;
}
.ml-auto {
    margin-left: auto;
}
.mr-1 {
    margin-right: 0.25rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.mr-4 {
    margin-right: 1rem;
}
.mt-0\.5 {
    margin-top: 0.125rem;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-1\.5 {
    margin-top: 0.375rem;
}
.mt-10 {
    margin-top: 2.5rem;
}
.mt-12 {
    margin-top: 3rem;
}
.mt-14 {
    margin-top: 3.5rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-20 {
    margin-top: 5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-7 {
    margin-top: 1.75rem;
}
.mt-8 {
    margin-top: 2rem;
}
.mt-auto {
    margin-top: auto;
}
.box-border {
    box-sizing: border-box;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.\!flex {
    display: flex !important;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.table {
    display: table;
}
.grid {
    display: grid;
}
.contents {
    display: contents;
}
.hidden {
    display: none;
}
.aspect-\[3\/4\] {
    aspect-ratio: 3/4;
}
.aspect-\[4\/3\] {
    aspect-ratio: 4/3;
}
.h-0\.5 {
    height: 0.125rem;
}
.h-1 {
    height: 0.25rem;
}
.h-1\.5 {
    height: 0.375rem;
}
.h-10 {
    height: 2.5rem;
}
.h-11 {
    height: 2.75rem;
}
.h-12 {
    height: 3rem;
}
.h-14 {
    height: 3.5rem;
}
.h-16 {
    height: 4rem;
}
.h-2 {
    height: 0.5rem;
}
.h-2\.5 {
    height: 0.625rem;
}
.h-2\/3 {
    height: 66.666667%;
}
.h-24 {
    height: 6rem;
}
.h-28 {
    height: 7rem;
}
.h-3 {
    height: 0.75rem;
}
.h-3\.5 {
    height: 0.875rem;
}
.h-4 {
    height: 1rem;
}
.h-40 {
    height: 10rem;
}
.h-5 {
    height: 1.25rem;
}
.h-6 {
    height: 1.5rem;
}
.h-64 {
    height: 16rem;
}
.h-7 {
    height: 1.75rem;
}
.h-8 {
    height: 2rem;
}
.h-9 {
    height: 2.25rem;
}
.h-\[1\.6em\] {
    height: 1.6em;
}
.h-\[2px\] {
    height: 2px;
}
.h-\[600px\] {
    height: 600px;
}
.h-\[800px\] {
    height: 800px;
}
.h-auto {
    height: auto;
}
.h-full {
    height: 100%;
}
.h-px {
    height: 1px;
}
.max-h-48 {
    max-height: 12rem;
}
.max-h-52 {
    max-height: 13rem;
}
.max-h-\[min\(70dvh\2c 16rem\)\] {
    max-height: min(70dvh, 16rem);
}
.max-h-\[min\(92dvh\2c calc\(100vh-1\.5rem\)\)\] {
    max-height: min(92dvh, calc(100vh - 1.5rem));
}
.min-h-0 {
    min-height: 0px;
}
.min-h-\[100dvh\] {
    min-height: 100dvh;
}
.min-h-\[11rem\] {
    min-height: 11rem;
}
.min-h-\[120px\] {
    min-height: 120px;
}
.min-h-\[12rem\] {
    min-height: 12rem;
}
.min-h-\[24px\] {
    min-height: 24px;
}
.min-h-\[36px\] {
    min-height: 36px;
}
.min-h-\[3rem\] {
    min-height: 3rem;
}
.min-h-\[40dvh\] {
    min-height: 40dvh;
}
.min-h-\[40px\] {
    min-height: 40px;
}
.min-h-\[44px\] {
    min-height: 44px;
}
.min-h-\[48px\] {
    min-height: 48px;
}
.min-h-\[52px\] {
    min-height: 52px;
}
.min-h-\[6\.5rem\] {
    min-height: 6.5rem;
}
.min-h-\[80vh\] {
    min-height: 80vh;
}
.min-h-\[90vh\] {
    min-height: 90vh;
}
.min-h-screen {
    min-height: 100vh;
}
.w-0 {
    width: 0px;
}
.w-1 {
    width: 0.25rem;
}
.w-1\.5 {
    width: 0.375rem;
}
.w-10 {
    width: 2.5rem;
}
.w-11 {
    width: 2.75rem;
}
.w-12 {
    width: 3rem;
}
.w-14 {
    width: 3.5rem;
}
.w-16 {
    width: 4rem;
}
.w-2 {
    width: 0.5rem;
}
.w-2\.5 {
    width: 0.625rem;
}
.w-20 {
    width: 5rem;
}
.w-24 {
    width: 6rem;
}
.w-28 {
    width: 7rem;
}
.w-3 {
    width: 0.75rem;
}
.w-3\.5 {
    width: 0.875rem;
}
.w-36 {
    width: 9rem;
}
.w-4 {
    width: 1rem;
}
.w-5 {
    width: 1.25rem;
}
.w-6 {
    width: 1.5rem;
}
.w-64 {
    width: 16rem;
}
.w-7 {
    width: 1.75rem;
}
.w-8 {
    width: 2rem;
}
.w-9 {
    width: 2.25rem;
}
.w-\[2px\] {
    width: 2px;
}
.w-\[600px\] {
    width: 600px;
}
.w-\[800px\] {
    width: 800px;
}
.w-\[min\(calc\(100vw-2rem\)\2c 18rem\)\] {
    width: min(calc(100vw - 2rem), 18rem);
}
.w-auto {
    width: auto;
}
.w-full {
    width: 100%;
}
.w-px {
    width: 1px;
}
.min-w-0 {
    min-width: 0px;
}
.min-w-\[200px\] {
    min-width: 200px;
}
.min-w-\[4\.5rem\] {
    min-width: 4.5rem;
}
.min-w-\[44px\] {
    min-width: 44px;
}
.min-w-\[640px\] {
    min-width: 640px;
}
.min-w-\[880px\] {
    min-width: 880px;
}
.max-w-2xl {
    max-width: 42rem;
}
.max-w-3xl {
    max-width: 48rem;
}
.max-w-4xl {
    max-width: 56rem;
}
.max-w-5xl {
    max-width: 64rem;
}
.max-w-6xl {
    max-width: 72rem;
}
.max-w-7xl {
    max-width: 80rem;
}
.max-w-\[120px\] {
    max-width: 120px;
}
.max-w-\[16rem\] {
    max-width: 16rem;
}
.max-w-\[calc\(100\%-0\.5rem\)\] {
    max-width: calc(100% - 0.5rem);
}
.max-w-\[min\(280px\2c 100\%\)\] {
    max-width: min(280px, 100%);
}
.max-w-\[min\(280px\2c calc\(100\%_-_6rem\)\)\] {
    max-width: min(280px, calc(100% - 6rem));
}
.max-w-\[min\(280px\2c calc\(100vw_-_9rem\)\)\] {
    max-width: min(280px, calc(100vw - 9rem));
}
.max-w-full {
    max-width: 100%;
}
.max-w-lg {
    max-width: 32rem;
}
.max-w-md {
    max-width: 28rem;
}
.max-w-sm {
    max-width: 24rem;
}
.max-w-xl {
    max-width: 36rem;
}
.max-w-xs {
    max-width: 20rem;
}
.flex-1 {
    flex: 1 1;
}
.flex-shrink {
    flex-shrink: 1;
}
.flex-shrink-0 {
    flex-shrink: 0;
}
.shrink {
    flex-shrink: 1;
}
.shrink-0 {
    flex-shrink: 0;
}
.flex-grow {
    flex-grow: 1;
}
.grow {
    flex-grow: 1;
}
.basis-full {
    flex-basis: 100%;
}
.border-collapse {
    border-collapse: collapse;
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1 {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/3 {
    --tw-translate-y: -33.333333%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
    --tw-rotate: -90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 1s linear infinite;
}
.cursor-default {
    cursor: default;
}
.cursor-pointer {
    cursor: pointer;
}
.select-none {
    -webkit-user-select: none;
            user-select: none;
}
.resize-none {
    resize: none;
}
.resize-y {
    resize: vertical;
}
.resize {
    resize: both;
}
.scroll-ps-2 {
    scroll-padding-inline-start: 0.5rem;
}
.list-disc {
    list-style-type: disc;
}
.list-none {
    list-style-type: none;
}
.appearance-none {
    -webkit-appearance: none;
            appearance: none;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.flex-row {
    flex-direction: row;
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.items-stretch {
    align-items: stretch;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-stretch {
    justify-content: stretch;
}
.gap-1 {
    gap: 0.25rem;
}
.gap-1\.5 {
    gap: 0.375rem;
}
.gap-10 {
    gap: 2.5rem;
}
.gap-12 {
    gap: 3rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-2\.5 {
    gap: 0.625rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-3\.5 {
    gap: 0.875rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-5 {
    gap: 1.25rem;
}
.gap-6 {
    gap: 1.5rem;
}
.gap-7 {
    gap: 1.75rem;
}
.gap-8 {
    gap: 2rem;
}
.gap-px {
    gap: 1px;
}
.gap-x-4 {
    column-gap: 1rem;
}
.gap-x-5 {
    column-gap: 1.25rem;
}
.gap-y-1 {
    row-gap: 0.25rem;
}
.gap-y-1\.5 {
    row-gap: 0.375rem;
}
.gap-y-2\.5 {
    row-gap: 0.625rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.875rem * var(--tw-space-x-reverse));
    margin-left: calc(0.875rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-accent\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(224 30 69 / 0.1);
}
.self-start {
    align-self: flex-start;
}
.self-center {
    align-self: center;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-y-visible {
    overflow-y: visible;
}
.overscroll-contain {
    overscroll-behavior: contain;
}
.overscroll-x-contain {
    overscroll-behavior-x: contain;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.whitespace-nowrap {
    white-space: nowrap;
}
.whitespace-pre-wrap {
    white-space: pre-wrap;
}
.text-balance {
    text-wrap: balance;
}
.break-words {
    overflow-wrap: break-word;
}
.break-all {
    word-break: break-all;
}
.\!rounded-lg {
    border-radius: 0.5rem !important;
}
.rounded {
    border-radius: 0.25rem;
}
.rounded-2xl {
    border-radius: 1rem;
}
.rounded-\[24px\] {
    border-radius: 24px;
}
.rounded-\[28px\] {
    border-radius: 28px;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.rounded-md {
    border-radius: 0.375rem;
}
.rounded-xl {
    border-radius: 0.75rem;
}
.rounded-t-2xl {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.rounded-bl-xl {
    border-bottom-left-radius: 0.75rem;
}
.rounded-br-xl {
    border-bottom-right-radius: 0.75rem;
}
.rounded-tl-xl {
    border-top-left-radius: 0.75rem;
}
.rounded-tr-xl {
    border-top-right-radius: 0.75rem;
}
.border {
    border-width: 1px;
}
.border-0 {
    border-width: 0px;
}
.border-2 {
    border-width: 2px;
}
.border-y {
    border-top-width: 1px;
    border-bottom-width: 1px;
}
.border-b {
    border-bottom-width: 1px;
}
.border-b-2 {
    border-bottom-width: 2px;
}
.border-l-2 {
    border-left-width: 2px;
}
.border-r-2 {
    border-right-width: 2px;
}
.border-t {
    border-top-width: 1px;
}
.border-t-2 {
    border-top-width: 2px;
}
.border-solid {
    border-style: solid;
}
.border-dashed {
    border-style: dashed;
}
.border-\[color\:color-mix\(in_srgb\2c var\(--color-border\)_78\%\2c rgba\(var\(--color-primary-rgb\)\2c 0\.14\)\)\] {
    border-color: color-mix(in srgb,var(--color-border) 78%,rgba(var(--color-primary-rgb),0.14));
}
.border-\[var\(--color-primary\)\] {
    border-color: var(--color-primary);
}
.border-accent {
    border-color: #E01E45;
}
.border-accent\/10 {
    border-color: rgb(224 30 69 / 0.1);
}
.border-accent\/15 {
    border-color: rgb(224 30 69 / 0.15);
}
.border-accent\/20 {
    border-color: rgb(224 30 69 / 0.2);
}
.border-accent\/25 {
    border-color: rgb(224 30 69 / 0.25);
}
.border-accent\/30 {
    border-color: rgb(224 30 69 / 0.3);
}
.border-accent\/40 {
    border-color: rgb(224 30 69 / 0.4);
}
.border-accent\/5 {
    border-color: rgb(224 30 69 / 0.05);
}
.border-accent\/50 {
    border-color: rgb(224 30 69 / 0.5);
}
.border-amber-500\/30 {
    border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/40 {
    border-color: rgb(245 158 11 / 0.4);
}
.border-blue-400\/30 {
    border-color: rgb(96 165 250 / 0.3);
}
.border-blue-500\/20 {
    border-color: rgb(59 130 246 / 0.2);
}
.border-blue-500\/30 {
    border-color: rgb(59 130 246 / 0.3);
}
.border-cyan-500\/20 {
    border-color: rgb(6 182 212 / 0.2);
}
.border-emerald-500\/20 {
    border-color: rgb(16 185 129 / 0.2);
}
.border-emerald-500\/30 {
    border-color: rgb(16 185 129 / 0.3);
}
.border-green-400\/30 {
    border-color: rgb(74 222 128 / 0.3);
}
.border-green-500\/20 {
    border-color: rgb(34 197 94 / 0.2);
}
.border-green-500\/30 {
    border-color: rgb(34 197 94 / 0.3);
}
.border-mineral-300\/10 {
    border-color: rgb(168 168 174 / 0.1);
}
.border-mineral-300\/15 {
    border-color: rgb(168 168 174 / 0.15);
}
.border-mineral-300\/20 {
    border-color: rgb(168 168 174 / 0.2);
}
.border-mineral-300\/30 {
    border-color: rgb(168 168 174 / 0.3);
}
.border-mineral-600\/30 {
    border-color: rgb(61 61 66 / 0.3);
}
.border-mineral-600\/40 {
    border-color: rgb(61 61 66 / 0.4);
}
.border-mineral-600\/50 {
    border-color: rgb(61 61 66 / 0.5);
}
.border-mineral-600\/80 {
    border-color: rgb(61 61 66 / 0.8);
}
.border-mineral-700\/25 {
    border-color: rgb(46 46 50 / 0.25);
}
.border-mineral-700\/30 {
    border-color: rgb(46 46 50 / 0.3);
}
.border-mineral-700\/40 {
    border-color: rgb(46 46 50 / 0.4);
}
.border-mineral-700\/50 {
    border-color: rgb(46 46 50 / 0.5);
}
.border-mineral-700\/60 {
    border-color: rgb(46 46 50 / 0.6);
}
.border-mineral-700\/70 {
    border-color: rgb(46 46 50 / 0.7);
}
.border-mineral-800\/60 {
    border-color: rgb(26 26 28 / 0.6);
}
.border-mineral-800\/80 {
    border-color: rgb(26 26 28 / 0.8);
}
.border-orange-400\/30 {
    border-color: rgb(251 146 60 / 0.3);
}
.border-orange-500\/20 {
    border-color: rgb(249 115 22 / 0.2);
}
.border-orange-500\/30 {
    border-color: rgb(249 115 22 / 0.3);
}
.border-purple-500\/30 {
    border-color: rgb(168 85 247 / 0.3);
}
.border-red-500\/20 {
    border-color: rgb(239 68 68 / 0.2);
}
.border-red-500\/30 {
    border-color: rgb(239 68 68 / 0.3);
}
.border-red-600 {
    border-color: #dc2626;
}
.border-red-800\/60 {
    border-color: rgb(153 27 27 / 0.6);
}
.border-transparent {
    border-color: transparent;
}
.border-violet-400\/30 {
    border-color: rgb(167 139 250 / 0.3);
}
.border-violet-500\/20 {
    border-color: rgb(139 92 246 / 0.2);
}
.border-violet-500\/30 {
    border-color: rgb(139 92 246 / 0.3);
}
.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
}
.border-white\/5 {
    border-color: rgb(255 255 255 / 0.05);
}
.border-yellow-400\/30 {
    border-color: rgb(250 204 21 / 0.3);
}
.border-yellow-500\/20 {
    border-color: rgb(234 179 8 / 0.2);
}
.border-yellow-500\/30 {
    border-color: rgb(234 179 8 / 0.3);
}
.\!bg-accent\/10 {
    background-color: rgb(224 30 69 / 0.1) !important;
}
.bg-\[\#060607\] {
    background-color: #060607;
}
.bg-\[\#0a0a0c\] {
    background-color: #0a0a0c;
}
.bg-\[\#0d0d10\] {
    background-color: #0d0d10;
}
.bg-\[\#111114\] {
    background-color: #111114;
}
.bg-\[\#111114\]\/60 {
    background-color: rgb(17 17 20 / 0.6);
}
.bg-\[\#111114\]\/80 {
    background-color: rgb(17 17 20 / 0.8);
}
.bg-\[\#111114\]\/95 {
    background-color: rgb(17 17 20 / 0.95);
}
.bg-\[color-mix\(in_srgb\2c var\(--color-paper\)_35\%\2c transparent\)\] {
    background-color: color-mix(in srgb,var(--color-paper) 35%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--color-paper\)_40\%\2c transparent\)\] {
    background-color: color-mix(in srgb,var(--color-paper) 40%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--color-paper\)_45\%\2c transparent\)\] {
    background-color: color-mix(in srgb,var(--color-paper) 45%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--color-paper\)_55\%\2c transparent\)\] {
    background-color: color-mix(in srgb,var(--color-paper) 55%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--color-paper\)_80\%\2c transparent\)\] {
    background-color: color-mix(in srgb,var(--color-paper) 80%,transparent);
}
.bg-\[color\:color-mix\(in_srgb\2c var\(--color-elevated\)_90\%\2c transparent\)\] {
    background-color: color-mix(in srgb,var(--color-elevated) 90%,transparent);
}
.bg-\[rgba\(10\2c 10\2c 12\2c 0\.35\)\] {
    background-color: rgba(10,10,12,0.35);
}
.bg-\[var\(--color-background\)\] {
    background-color: var(--color-background);
}
.bg-\[var\(--color-elevated\)\] {
    background-color: var(--color-elevated);
}
.bg-\[var\(--color-primary\)\] {
    background-color: var(--color-primary);
}
.bg-accent {
    background-color: #E01E45;
}
.bg-accent-light {
    background-color: #FF3D65;
}
.bg-accent-light\/80 {
    background-color: rgb(255 61 101 / 0.8);
}
.bg-accent\/10 {
    background-color: rgb(224 30 69 / 0.1);
}
.bg-accent\/15 {
    background-color: rgb(224 30 69 / 0.15);
}
.bg-accent\/20 {
    background-color: rgb(224 30 69 / 0.2);
}
.bg-accent\/30 {
    background-color: rgb(224 30 69 / 0.3);
}
.bg-accent\/40 {
    background-color: rgb(224 30 69 / 0.4);
}
.bg-accent\/5 {
    background-color: rgb(224 30 69 / 0.05);
}
.bg-accent\/50 {
    background-color: rgb(224 30 69 / 0.5);
}
.bg-accent\/60 {
    background-color: rgb(224 30 69 / 0.6);
}
.bg-accent\/70 {
    background-color: rgb(224 30 69 / 0.7);
}
.bg-accent\/90 {
    background-color: rgb(224 30 69 / 0.9);
}
.bg-accent\/\[0\.02\] {
    background-color: rgb(224 30 69 / 0.02);
}
.bg-accent\/\[0\.04\] {
    background-color: rgb(224 30 69 / 0.04);
}
.bg-accent\/\[0\.05\] {
    background-color: rgb(224 30 69 / 0.05);
}
.bg-accent\/\[0\.06\] {
    background-color: rgb(224 30 69 / 0.06);
}
.bg-accent\/\[0\.08\] {
    background-color: rgb(224 30 69 / 0.08);
}
.bg-amber-400 {
    background-color: #fbbf24;
}
.bg-amber-500 {
    background-color: #f59e0b;
}
.bg-amber-500\/10 {
    background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/5 {
    background-color: rgb(245 158 11 / 0.05);
}
.bg-amber-500\/80 {
    background-color: rgb(245 158 11 / 0.8);
}
.bg-black\/80 {
    background-color: rgb(0 0 0 / 0.8);
}
.bg-blue-400\/5 {
    background-color: rgb(96 165 250 / 0.05);
}
.bg-blue-500\/40 {
    background-color: rgb(59 130 246 / 0.4);
}
.bg-emerald-400 {
    background-color: #34d399;
}
.bg-emerald-500\/80 {
    background-color: rgb(16 185 129 / 0.8);
}
.bg-green-400 {
    background-color: #4ade80;
}
.bg-green-400\/10 {
    background-color: rgb(74 222 128 / 0.1);
}
.bg-green-400\/5 {
    background-color: rgb(74 222 128 / 0.05);
}
.bg-green-500 {
    background-color: #22c55e;
}
.bg-green-500\/10 {
    background-color: rgb(34 197 94 / 0.1);
}
.bg-green-500\/30 {
    background-color: rgb(34 197 94 / 0.3);
}
.bg-mineral-300 {
    background-color: #A8A8AE;
}
.bg-mineral-500 {
    background-color: #5A5A5E;
}
.bg-mineral-800 {
    background-color: #1A1A1C;
}
.bg-mineral-800\/50 {
    background-color: rgb(26 26 28 / 0.5);
}
.bg-mineral-800\/60 {
    background-color: rgb(26 26 28 / 0.6);
}
.bg-mineral-900\/40 {
    background-color: rgb(18 18 20 / 0.4);
}
.bg-mineral-900\/60 {
    background-color: rgb(18 18 20 / 0.6);
}
.bg-mineral-900\/90 {
    background-color: rgb(18 18 20 / 0.9);
}
.bg-mineral-950\/30 {
    background-color: rgb(5 5 6 / 0.3);
}
.bg-mineral-950\/35 {
    background-color: rgb(5 5 6 / 0.35);
}
.bg-mineral-950\/40 {
    background-color: rgb(5 5 6 / 0.4);
}
.bg-mineral-950\/50 {
    background-color: rgb(5 5 6 / 0.5);
}
.bg-mineral-950\/60 {
    background-color: rgb(5 5 6 / 0.6);
}
.bg-mineral-950\/70 {
    background-color: rgb(5 5 6 / 0.7);
}
.bg-mineral-950\/80 {
    background-color: rgb(5 5 6 / 0.8);
}
.bg-mineral-950\/90 {
    background-color: rgb(5 5 6 / 0.9);
}
.bg-orange-400 {
    background-color: #fb923c;
}
.bg-orange-500 {
    background-color: #f97316;
}
.bg-orange-500\/10 {
    background-color: rgb(249 115 22 / 0.1);
}
.bg-orange-500\/30 {
    background-color: rgb(249 115 22 / 0.3);
}
.bg-orange-500\/\[0\.07\] {
    background-color: rgb(249 115 22 / 0.07);
}
.bg-red-400 {
    background-color: #f87171;
}
.bg-red-500 {
    background-color: #ef4444;
}
.bg-red-500\/10 {
    background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/80 {
    background-color: rgb(239 68 68 / 0.8);
}
.bg-red-500\/\[0\.07\] {
    background-color: rgb(239 68 68 / 0.07);
}
.bg-red-950\/90 {
    background-color: rgb(69 10 10 / 0.9);
}
.bg-transparent {
    background-color: transparent;
}
.bg-violet-400\/5 {
    background-color: rgb(167 139 250 / 0.05);
}
.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
}
.bg-yellow-400 {
    background-color: #facc15;
}
.bg-yellow-500 {
    background-color: #eab308;
}
.bg-yellow-500\/\[0\.07\] {
    background-color: rgb(234 179 8 / 0.07);
}
.bg-\[linear-gradient\(180deg\2c rgba\(var\(--color-primary-rgb\)\2c 0\.08\)\2c rgba\(255\2c 255\2c 255\2c 0\.015\)\)\] {
    background-image: linear-gradient(180deg,rgba(var(--color-primary-rgb),0.08),rgba(255,255,255,0.015));
}
.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-\[\#060607\] {
    --tw-gradient-from: #060607 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(6 6 7 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#111114\] {
    --tw-gradient-from: #111114 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(17 17 20 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[var\(--color-background\)\] {
    --tw-gradient-from: var(--color-background) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[var\(--color-paper\)\] {
    --tw-gradient-from: var(--color-paper) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent {
    --tw-gradient-from: #E01E45 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(224 30 69 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/0 {
    --tw-gradient-from: rgb(224 30 69 / 0) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(224 30 69 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/10 {
    --tw-gradient-from: rgb(224 30 69 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(224 30 69 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/15 {
    --tw-gradient-from: rgb(224 30 69 / 0.15) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(224 30 69 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/5 {
    --tw-gradient-from: rgb(224 30 69 / 0.05) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(224 30 69 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/60 {
    --tw-gradient-from: rgb(224 30 69 / 0.6) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(224 30 69 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/80 {
    --tw-gradient-from: rgb(224 30 69 / 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(224 30 69 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/\[0\.02\] {
    --tw-gradient-from: rgb(224 30 69 / 0.02) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(224 30 69 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/\[0\.03\] {
    --tw-gradient-from: rgb(224 30 69 / 0.03) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(224 30 69 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500 {
    --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500\/20 {
    --tw-gradient-from: rgb(245 158 11 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-700 {
    --tw-gradient-from: #b45309 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(180 83 9 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500\/10 {
    --tw-gradient-from: rgb(59 130 246 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500\/20 {
    --tw-gradient-from: rgb(59 130 246 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500\/10 {
    --tw-gradient-from: rgb(16 185 129 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-700 {
    --tw-gradient-from: #047857 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-500\/20 {
    --tw-gradient-from: rgb(34 197 94 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-mineral-900\/60 {
    --tw-gradient-from: rgb(18 18 20 / 0.6) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(18 18 20 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-mineral-900\/70 {
    --tw-gradient-from: rgb(18 18 20 / 0.7) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(18 18 20 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-mineral-900\/95 {
    --tw-gradient-from: rgb(18 18 20 / 0.95) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(18 18 20 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-mineral-950\/95 {
    --tw-gradient-from: rgb(5 5 6 / 0.95) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(5 5 6 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500 {
    --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500\/10 {
    --tw-gradient-from: rgb(249 115 22 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-600 {
    --tw-gradient-from: #ea580c var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(234 88 12 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500 {
    --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500\/20 {
    --tw-gradient-from: rgb(239 68 68 / 0.2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-600 {
    --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-500\/10 {
    --tw-gradient-from: rgb(139 92 246 / 0.1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-accent {
    --tw-gradient-to: rgb(224 30 69 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #E01E45 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/20 {
    --tw-gradient-to: rgb(224 30 69 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(224 30 69 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/25 {
    --tw-gradient-to: rgb(224 30 69 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(224 30 69 / 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/30 {
    --tw-gradient-to: rgb(224 30 69 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(224 30 69 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/35 {
    --tw-gradient-to: rgb(224 30 69 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(224 30 69 / 0.35) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/40 {
    --tw-gradient-to: rgb(224 30 69 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(224 30 69 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/50 {
    --tw-gradient-to: rgb(224 30 69 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(224 30 69 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/\[0\.06\] {
    --tw-gradient-to: rgb(224 30 69 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(224 30 69 / 0.06) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-500\/20 {
    --tw-gradient-to: rgb(16 185 129 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(16 185 129 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-mineral-950\/75 {
    --tw-gradient-to: rgb(5 5 6 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(5 5 6 / 0.75) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-mineral-950\/80 {
    --tw-gradient-to: rgb(5 5 6 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(5 5 6 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent {
    --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/15 {
    --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.15) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#0a0a0c\] {
    --tw-gradient-to: #0a0a0c var(--tw-gradient-to-position);
}
.to-\[var\(--color-background\)\] {
    --tw-gradient-to: var(--color-background) var(--tw-gradient-to-position);
}
.to-\[var\(--color-elevated\)\] {
    --tw-gradient-to: var(--color-elevated) var(--tw-gradient-to-position);
}
.to-accent-light {
    --tw-gradient-to: #FF3D65 var(--tw-gradient-to-position);
}
.to-accent-light\/60 {
    --tw-gradient-to: rgb(255 61 101 / 0.6) var(--tw-gradient-to-position);
}
.to-accent\/0 {
    --tw-gradient-to: rgb(224 30 69 / 0) var(--tw-gradient-to-position);
}
.to-accent\/10 {
    --tw-gradient-to: rgb(224 30 69 / 0.1) var(--tw-gradient-to-position);
}
.to-accent\/20 {
    --tw-gradient-to: rgb(224 30 69 / 0.2) var(--tw-gradient-to-position);
}
.to-accent\/5 {
    --tw-gradient-to: rgb(224 30 69 / 0.05) var(--tw-gradient-to-position);
}
.to-accent\/60 {
    --tw-gradient-to: rgb(224 30 69 / 0.6) var(--tw-gradient-to-position);
}
.to-accent\/\[0\.02\] {
    --tw-gradient-to: rgb(224 30 69 / 0.02) var(--tw-gradient-to-position);
}
.to-accent\/\[0\.15\] {
    --tw-gradient-to: rgb(224 30 69 / 0.15) var(--tw-gradient-to-position);
}
.to-amber-400 {
    --tw-gradient-to: #fbbf24 var(--tw-gradient-to-position);
}
.to-amber-900\/10 {
    --tw-gradient-to: rgb(120 53 15 / 0.1) var(--tw-gradient-to-position);
}
.to-blue-900\/10 {
    --tw-gradient-to: rgb(30 58 138 / 0.1) var(--tw-gradient-to-position);
}
.to-emerald-400 {
    --tw-gradient-to: #34d399 var(--tw-gradient-to-position);
}
.to-green-900\/10 {
    --tw-gradient-to: rgb(20 83 45 / 0.1) var(--tw-gradient-to-position);
}
.to-mineral-900\/40 {
    --tw-gradient-to: rgb(18 18 20 / 0.4) var(--tw-gradient-to-position);
}
.to-mineral-900\/50 {
    --tw-gradient-to: rgb(18 18 20 / 0.5) var(--tw-gradient-to-position);
}
.to-mineral-950\/90 {
    --tw-gradient-to: rgb(5 5 6 / 0.9) var(--tw-gradient-to-position);
}
.to-orange-400 {
    --tw-gradient-to: #fb923c var(--tw-gradient-to-position);
}
.to-red-400 {
    --tw-gradient-to: #f87171 var(--tw-gradient-to-position);
}
.to-red-900\/10 {
    --tw-gradient-to: rgb(127 29 29 / 0.1) var(--tw-gradient-to-position);
}
.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-yellow-400 {
    --tw-gradient-to: #facc15 var(--tw-gradient-to-position);
}
.to-yellow-500 {
    --tw-gradient-to: #eab308 var(--tw-gradient-to-position);
}
.bg-clip-text {
    -webkit-background-clip: text;
            background-clip: text;
}
.fill-mineral-400 {
    fill: #6E6E78;
}
.object-contain {
    object-fit: contain;
}
.object-cover {
    object-fit: cover;
}
.object-left {
    object-position: left;
}
.\!p-3 {
    padding: 0.75rem !important;
}
.p-0 {
    padding: 0px;
}
.p-1 {
    padding: 0.25rem;
}
.p-1\.5 {
    padding: 0.375rem;
}
.p-10 {
    padding: 2.5rem;
}
.p-2\.5 {
    padding: 0.625rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-3\.5 {
    padding: 0.875rem;
}
.p-4 {
    padding: 1rem;
}
.p-5 {
    padding: 1.25rem;
}
.p-6 {
    padding: 1.5rem;
}
.p-8 {
    padding: 2rem;
}
.\!px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}
.\!px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.\!py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.px-0 {
    padding-left: 0px;
    padding-right: 0px;
}
.px-0\.5 {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.px-\[1\.125rem\] {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
}
.px-\[var\(--app-page-pad-x\)\] {
    padding-left: var(--app-page-pad-x);
    padding-right: var(--app-page-pad-x);
}
.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}
.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.\!pb-10 {
    padding-bottom: 2.5rem !important;
}
.pb-1 {
    padding-bottom: 0.25rem;
}
.pb-10 {
    padding-bottom: 2.5rem;
}
.pb-12 {
    padding-bottom: 3rem;
}
.pb-16 {
    padding-bottom: 4rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-20 {
    padding-bottom: 5rem;
}
.pb-24 {
    padding-bottom: 6rem;
}
.pb-3 {
    padding-bottom: 0.75rem;
}
.pb-3\.5 {
    padding-bottom: 0.875rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pb-5 {
    padding-bottom: 1.25rem;
}
.pb-6 {
    padding-bottom: 1.5rem;
}
.pb-8 {
    padding-bottom: 2rem;
}
.pb-\[max\(0\.75rem\2c env\(safe-area-inset-bottom\2c 0px\)\)\] {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom,0px));
}
.pb-\[max\(2rem\2c calc\(env\(safe-area-inset-bottom\2c 0px\)\+1\.25rem\)\)\] {
    padding-bottom: max(2rem, calc(env(safe-area-inset-bottom,0px) + 1.25rem));
}
.pl-0 {
    padding-left: 0px;
}
.pl-10 {
    padding-left: 2.5rem;
}
.pl-2 {
    padding-left: 0.5rem;
}
.pl-4 {
    padding-left: 1rem;
}
.pl-6 {
    padding-left: 1.5rem;
}
.pr-0 {
    padding-right: 0px;
}
.pr-1 {
    padding-right: 0.25rem;
}
.pr-10 {
    padding-right: 2.5rem;
}
.pr-\[12\.5\%\] {
    padding-right: 12.5%;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-1\.5 {
    padding-top: 0.375rem;
}
.pt-10 {
    padding-top: 2.5rem;
}
.pt-2 {
    padding-top: 0.5rem;
}
.pt-20 {
    padding-top: 5rem;
}
.pt-28 {
    padding-top: 7rem;
}
.pt-3 {
    padding-top: 0.75rem;
}
.pt-32 {
    padding-top: 8rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-5 {
    padding-top: 1.25rem;
}
.pt-6 {
    padding-top: 1.5rem;
}
.pt-\[max\(0\.75rem\2c env\(safe-area-inset-top\2c 0px\)\)\] {
    padding-top: max(0.75rem, env(safe-area-inset-top,0px));
}
.pt-\[max\(6\.5rem\2c calc\(env\(safe-area-inset-top\2c 0px\)\+4\.75rem\)\)\] {
    padding-top: max(6.5rem, calc(env(safe-area-inset-top,0px) + 4.75rem));
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.align-middle {
    vertical-align: middle;
}
.font-mono {
    font-family: JetBrains Mono, Fira Code, monospace;
}
.font-sans {
    font-family: Plus Jakarta Sans, system-ui, sans-serif;
}
.font-serif {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.\!text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}
.text-\[1\.625rem\] {
    font-size: 1.625rem;
}
.text-\[1\.75rem\] {
    font-size: 1.75rem;
}
.text-\[10px\] {
    font-size: 10px;
}
.text-\[11\.5px\] {
    font-size: 11.5px;
}
.text-\[11px\] {
    font-size: 11px;
}
.text-\[9px\] {
    font-size: 9px;
}
.text-\[clamp\(1\.875rem\2c 5vw\+0\.5rem\2c 2\.5rem\)\] {
    font-size: clamp(1.875rem, 5vw + 0.5rem, 2.5rem);
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.font-black {
    font-weight: 900;
}
.font-bold {
    font-weight: 700;
}
.font-extrabold {
    font-weight: 800;
}
.font-light {
    font-weight: 300;
}
.font-medium {
    font-weight: 500;
}
.font-normal {
    font-weight: 400;
}
.font-semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.capitalize {
    text-transform: capitalize;
}
.normal-case {
    text-transform: none;
}
.italic {
    font-style: italic;
}
.tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.08\] {
    line-height: 1.08;
}
.leading-\[1\.12\] {
    line-height: 1.12;
}
.leading-\[1\.15\] {
    line-height: 1.15;
}
.leading-none {
    line-height: 1;
}
.leading-relaxed {
    line-height: 1.625;
}
.leading-snug {
    line-height: 1.375;
}
.leading-tight {
    line-height: 1.25;
}
.tracking-\[0\.16em\] {
    letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
    letter-spacing: 0.18em;
}
.tracking-\[0\.22em\] {
    letter-spacing: 0.22em;
}
.tracking-\[0\.24em\] {
    letter-spacing: 0.24em;
}
.tracking-\[0\.2em\] {
    letter-spacing: 0.2em;
}
.tracking-tight {
    letter-spacing: -0.025em;
}
.tracking-wide {
    letter-spacing: 0.025em;
}
.tracking-wider {
    letter-spacing: 0.05em;
}
.tracking-widest {
    letter-spacing: 0.1em;
}
.text-\[var\(--color-text-primary\)\] {
    color: var(--color-text-primary);
}
.text-\[var\(--color-text-secondary\)\] {
    color: var(--color-text-secondary);
}
.text-accent {
    color: #E01E45;
}
.text-accent-light {
    color: #FF3D65;
}
.text-accent-light\/50 {
    color: rgb(255 61 101 / 0.5);
}
.text-accent-light\/55 {
    color: rgb(255 61 101 / 0.55);
}
.text-accent-light\/60 {
    color: rgb(255 61 101 / 0.6);
}
.text-accent-light\/70 {
    color: rgb(255 61 101 / 0.7);
}
.text-accent-light\/75 {
    color: rgb(255 61 101 / 0.75);
}
.text-accent-light\/80 {
    color: rgb(255 61 101 / 0.8);
}
.text-accent-light\/85 {
    color: rgb(255 61 101 / 0.85);
}
.text-accent-light\/90 {
    color: rgb(255 61 101 / 0.9);
}
.text-accent-light\/95 {
    color: rgb(255 61 101 / 0.95);
}
.text-accent\/10 {
    color: rgb(224 30 69 / 0.1);
}
.text-accent\/15 {
    color: rgb(224 30 69 / 0.15);
}
.text-accent\/20 {
    color: rgb(224 30 69 / 0.2);
}
.text-accent\/30 {
    color: rgb(224 30 69 / 0.3);
}
.text-accent\/40 {
    color: rgb(224 30 69 / 0.4);
}
.text-accent\/50 {
    color: rgb(224 30 69 / 0.5);
}
.text-accent\/60 {
    color: rgb(224 30 69 / 0.6);
}
.text-accent\/70 {
    color: rgb(224 30 69 / 0.7);
}
.text-amber-200\/90 {
    color: rgb(253 230 138 / 0.9);
}
.text-amber-300 {
    color: #fcd34d;
}
.text-amber-400 {
    color: #fbbf24;
}
.text-amber-400\/70 {
    color: rgb(251 191 36 / 0.7);
}
.text-amber-400\/80 {
    color: rgb(251 191 36 / 0.8);
}
.text-amber-400\/90 {
    color: rgb(251 191 36 / 0.9);
}
.text-app-error {
    color: #E63946;
}
.text-blue-400 {
    color: #60a5fa;
}
.text-emerald-400 {
    color: #34d399;
}
.text-emerald-400\/85 {
    color: rgb(52 211 153 / 0.85);
}
.text-green-400 {
    color: #4ade80;
}
.text-green-400\/70 {
    color: rgb(74 222 128 / 0.7);
}
.text-green-400\/90 {
    color: rgb(74 222 128 / 0.9);
}
.text-mineral-100 {
    color: #EBEBEB;
}
.text-mineral-200 {
    color: #D1D1D1;
}
.text-mineral-200\/80 {
    color: rgb(209 209 209 / 0.8);
}
.text-mineral-200\/95 {
    color: rgb(209 209 209 / 0.95);
}
.text-mineral-300 {
    color: #A8A8AE;
}
.text-mineral-300\/40 {
    color: rgb(168 168 174 / 0.4);
}
.text-mineral-300\/50 {
    color: rgb(168 168 174 / 0.5);
}
.text-mineral-300\/55 {
    color: rgb(168 168 174 / 0.55);
}
.text-mineral-300\/60 {
    color: rgb(168 168 174 / 0.6);
}
.text-mineral-300\/65 {
    color: rgb(168 168 174 / 0.65);
}
.text-mineral-300\/70 {
    color: rgb(168 168 174 / 0.7);
}
.text-mineral-300\/75 {
    color: rgb(168 168 174 / 0.75);
}
.text-mineral-300\/80 {
    color: rgb(168 168 174 / 0.8);
}
.text-mineral-300\/90 {
    color: rgb(168 168 174 / 0.9);
}
.text-mineral-400 {
    color: #6E6E78;
}
.text-mineral-400\/40 {
    color: rgb(110 110 120 / 0.4);
}
.text-mineral-400\/50 {
    color: rgb(110 110 120 / 0.5);
}
.text-mineral-400\/60 {
    color: rgb(110 110 120 / 0.6);
}
.text-mineral-400\/70 {
    color: rgb(110 110 120 / 0.7);
}
.text-mineral-400\/80 {
    color: rgb(110 110 120 / 0.8);
}
.text-mineral-400\/90 {
    color: rgb(110 110 120 / 0.9);
}
.text-mineral-400\/95 {
    color: rgb(110 110 120 / 0.95);
}
.text-mineral-500 {
    color: #5A5A5E;
}
.text-mineral-600 {
    color: #3D3D42;
}
.text-orange-200 {
    color: #fed7aa;
}
.text-orange-400 {
    color: #fb923c;
}
.text-red-300 {
    color: #fca5a5;
}
.text-red-400 {
    color: #f87171;
}
.text-red-400\/50 {
    color: rgb(248 113 113 / 0.5);
}
.text-red-400\/60 {
    color: rgb(248 113 113 / 0.6);
}
.text-transparent {
    color: transparent;
}
.text-white {
    color: #fff;
}
.text-white\/70 {
    color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
    color: rgb(255 255 255 / 0.8);
}
.text-white\/90 {
    color: rgb(255 255 255 / 0.9);
}
.text-yellow-200 {
    color: #fef08a;
}
.text-yellow-400 {
    color: #facc15;
}
.text-yellow-400\/60 {
    color: rgb(250 204 21 / 0.6);
}
.underline {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
}
.line-through {
    -webkit-text-decoration-line: line-through;
            text-decoration-line: line-through;
}
.no-underline {
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
}
.underline-offset-2 {
    text-underline-offset: 2px;
}
.placeholder-mineral-500\/50::placeholder {
    color: rgb(90 90 94 / 0.5);
}
.placeholder-mineral-600::placeholder {
    color: #3D3D42;
}
.opacity-0 {
    opacity: 0;
}
.opacity-100 {
    opacity: 1;
}
.opacity-15 {
    opacity: 0.15;
}
.opacity-30 {
    opacity: 0.3;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-60 {
    opacity: 0.6;
}
.opacity-70 {
    opacity: 0.7;
}
.opacity-75 {
    opacity: 0.75;
}
.opacity-80 {
    opacity: 0.8;
}
.opacity-90 {
    opacity: 0.9;
}
.opacity-\[0\.03\] {
    opacity: 0.03;
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_rgba\(0\2c 0\2c 0\2c 0\.4\)\2c 0_24px_48px_-12px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
    --tw-shadow: 0 0 0 1px rgba(0,0,0,0.4),0 24px 48px -12px rgba(0,0,0,0.55);
    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 24px 48px -12px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(224\2c 30\2c 69\2c 0\.15\)\] {
    --tw-shadow: 0 0 10px rgba(224,30,69,0.15);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_14px_rgba\(224\2c 30\2c 69\2c 0\.45\)\] {
    --tw-shadow: 0 0 14px rgba(224,30,69,0.45);
    --tw-shadow-colored: 0 0 14px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_16px_rgba\(224\2c 30\2c 69\2c 0\.25\)\2c inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.15\)\] {
    --tw-shadow: 0 0 16px rgba(224,30,69,0.25),inset 0 1px 0 rgba(255,255,255,0.15);
    --tw-shadow-colored: 0 0 16px var(--tw-shadow-color), inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_16px_rgba\(224\2c 30\2c 69\2c 0\.3\)\2c inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.15\)\] {
    --tw-shadow: 0 0 16px rgba(224,30,69,0.3),inset 0 1px 0 rgba(255,255,255,0.15);
    --tw-shadow-colored: 0 0 16px var(--tw-shadow-color), inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(var\(--color-primary-rgb\)\2c 0\.08\)\] {
    --tw-shadow: 0 0 30px rgba(var(--color-primary-rgb),0.08);
    --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_40px_rgba\(220\2c 20\2c 60\2c 0\.1\)\] {
    --tw-shadow: 0 0 40px rgba(220,20,60,0.1);
    --tw-shadow-colored: 0 0 40px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_40px_rgba\(224\2c 30\2c 69\2c 0\.08\)\] {
    --tw-shadow: 0 0 40px rgba(224,30,69,0.08);
    --tw-shadow-colored: 0 0 40px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_60px_rgba\(220\2c 20\2c 60\2c 0\.15\)\] {
    --tw-shadow: 0 0 60px rgba(220,20,60,0.15);
    --tw-shadow-colored: 0 0 60px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_2px_var\(--color-accent\)\] {
    --tw-shadow: 0 0 6px 2px var(--color-accent);
    --tw-shadow-colored: 0 0 6px 2px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_42px_rgba\(3\2c 8\2c 18\2c 0\.18\)\] {
    --tw-shadow: 0 18px 42px rgba(3,8,18,0.18);
    --tw-shadow-colored: 0 18px 42px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_2px_20px_-4px_rgba\(0\2c 0\2c 0\2c 0\.5\)\2c inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.03\)\] {
    --tw-shadow: 0 2px 20px -4px rgba(0,0,0,0.5),inset 0 1px 0 0 rgba(255,255,255,0.03);
    --tw-shadow-colored: 0 2px 20px -4px var(--tw-shadow-color), inset 0 1px 0 0 var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_20px_rgba\(224\2c 30\2c 69\2c 0\.04\)\] {
    --tw-shadow: inset 0 0 20px rgba(224,30,69,0.04);
    --tw-shadow-colored: inset 0 0 20px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgba\(234\2c 179\2c 8\2c 0\.1\)\] {
    --tw-shadow: inset 0 1px 0 rgba(234,179,8,0.1);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgba\(239\2c 68\2c 68\2c 0\.1\)\] {
    --tw-shadow: inset 0 1px 0 rgba(239,68,68,0.1);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgba\(249\2c 115\2c 22\2c 0\.1\)\] {
    --tw-shadow: inset 0 1px 0 rgba(249,115,22,0.1);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.06\)\] {
    --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-accent\/10 {
    --tw-shadow-color: rgb(224 30 69 / 0.1);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-accent\/20 {
    --tw-shadow-color: rgb(224 30 69 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-accent\/30 {
    --tw-shadow-color: rgb(224 30 69 / 0.3);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-accent\/5 {
    --tw-shadow-color: rgb(224 30 69 / 0.05);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-black\/10 {
    --tw-shadow-color: rgb(0 0 0 / 0.1);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-black\/20 {
    --tw-shadow-color: rgb(0 0 0 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-black\/30 {
    --tw-shadow-color: rgb(0 0 0 / 0.3);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-black\/40 {
    --tw-shadow-color: rgb(0 0 0 / 0.4);
    --tw-shadow: var(--tw-shadow-colored);
}
.shadow-emerald-500\/5 {
    --tw-shadow-color: rgb(16 185 129 / 0.05);
    --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.outline {
    outline-style: solid;
}
.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
    --tw-ring-inset: inset;
}
.ring-\[\#060607\] {
    --tw-ring-color: #060607;
}
.ring-\[\#0a0a0c\] {
    --tw-ring-color: #0a0a0c;
}
.ring-accent\/15 {
    --tw-ring-color: rgb(224 30 69 / 0.15);
}
.ring-accent\/50 {
    --tw-ring-color: rgb(224 30 69 / 0.5);
}
.ring-white\/5 {
    --tw-ring-color: rgb(255 255 255 / 0.05);
}
.ring-offset-2 {
    --tw-ring-offset-width: 2px;
}
.ring-offset-\[\#0a0a0c\] {
    --tw-ring-offset-color: #0a0a0c;
}
.ring-offset-mineral-950 {
    --tw-ring-offset-color: #050506;
}
.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
    --tw-blur: blur(64px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[100px\] {
    --tw-blur: blur(100px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[120px\] {
    --tw-blur: blur(120px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[140px\] {
    --tw-blur: blur(140px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[160px\] {
    --tw-blur: blur(160px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_10px_rgba\(0\2c 174\2c 239\2c 0\.3\)\] {
    --tw-drop-shadow: drop-shadow(0 0 10px rgba(0,174,239,0.3));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl {
    --tw-backdrop-blur: blur(24px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-\[color\2c background\2c border-color\2c box-shadow\2c font-weight\] {
    transition-property: color,background,border-color,box-shadow,font-weight;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.duration-500 {
    transition-duration: 500ms;
}
.duration-700 {
    transition-duration: 700ms;
}
.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[--anchor-gap\:theme\(spacing\.2\)\] {
    --anchor-gap: 0.5rem;
}
.\[-webkit-overflow-scrolling\:touch\] {
    -webkit-overflow-scrolling: touch;
}
.\[overflow-wrap\:anywhere\] {
    overflow-wrap: anywhere;
}
.\[scrollbar-width\:thin\] {
    scrollbar-width: thin;
}

/*
 * Primary CTA as <a> (header / mobile nav): app-theme `a:not(.ant-btn)` is (0,1,1) with !important
 * and wins over @layer `.cta-button` (0,1,0). Scoped bump keeps “Explore Platform” white.
 */
.landing-page-wrapper a.cta-button,
.landing-page-wrapper a.cta-button:hover,
.landing-page-wrapper a.cta-button:active {
  color: #ffffff !important;
}

.landing-page-wrapper button.cta-button,
.landing-page-wrapper button.cta-button:hover,
.landing-page-wrapper button.cta-button:active {
  color: #ffffff !important;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Custom Scrollbar — follows theme tokens */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-border) 85%, var(--color-text-disabled));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-border) 70%, var(--color-primary));
}

/* Threat Highlight Styles */
.threat-highlight {
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.9375em;
  letter-spacing: 0.01em;
}

.threat-critical {
  background-color: rgba(220, 38, 38, 0.1);
  color: #fca5a5;
  border-bottom: 1px solid rgba(220, 38, 38, 0.5);
  -webkit-text-decoration-color: rgba(220, 38, 38, 0.4);
          text-decoration-color: rgba(220, 38, 38, 0.4);
}

.threat-high {
  background-color: rgba(234, 88, 12, 0.1);
  color: #fdba74;
  border-bottom: 1px solid rgba(234, 88, 12, 0.45);
  -webkit-text-decoration-color: rgba(234, 88, 12, 0.4);
          text-decoration-color: rgba(234, 88, 12, 0.4);
}

.threat-medium {
  background-color: rgba(180, 130, 0, 0.1);
  color: #fcd34d;
  border-bottom: 1px solid rgba(202, 148, 0, 0.45);
  -webkit-text-decoration-color: rgba(202, 148, 0, 0.4);
          text-decoration-color: rgba(202, 148, 0, 0.4);
}

/* Particle Background Animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-20px);
    opacity: 0.7;
  }
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #E01E45;
  border-radius: 50%;
  opacity: 0.3;
  animation: float 8s ease-in-out infinite;
  will-change: transform, opacity;
  contain: strict;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .particle {
    animation: none;
    opacity: 0.2;
  }
  .animated-gradient {
    animation: none;
  }
}

.particle:nth-child(3n) {
  width: 1.5px;
  height: 1.5px;
  animation-duration: 10s;
}

.particle:nth-child(5n) {
  width: 3px;
  height: 3px;
  animation-duration: 6s;
  opacity: 0.5;
}

.particle:nth-child(7n) {
  background: #FF3D65;
}

/* Animated Gradient Background */
.animated-gradient {
  background: linear-gradient(-45deg, #040404, #0E0E0E, #040404, #1e1b2e);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
}

/* Subtle Grid Overlay */
.futuristic-grid {
  background-image:
    linear-gradient(rgba(224, 30, 69, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 30, 69, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.4;
  pointer-events: none;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Scanline effect - subtle version */
.scanline-overlay {
  display: none;
}

/* Subtle dot pattern */
.hex-pattern {
  background-image: radial-gradient(circle at 25% 25%, rgba(224, 30, 69, 0.015) 1px, transparent 1px),
                    radial-gradient(circle at 75% 75%, rgba(224, 30, 69, 0.015) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Typing cursor animation */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typing-cursor::after {
  content: '|';
  color: #E01E45;
  animation: blink-cursor 1s step-end infinite;
  margin-left: 2px;
}

/* Landing Page Overrides */
.landing-page-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden;
  scroll-padding-top: calc(4.25rem + env(safe-area-inset-top, 0px));
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

@media (min-width: 640px) {
  .landing-page-wrapper {
    scroll-padding-top: calc(5.25rem + env(safe-area-inset-top, 0px));
  }
}

.landing-page-wrapper section[id] {
  scroll-margin-top: calc(4.25rem + env(safe-area-inset-top, 0px));
}

@media (min-width: 640px) {
  .landing-page-wrapper section[id] {
    scroll-margin-top: calc(5.25rem + env(safe-area-inset-top, 0px));
  }
}

.landing-page-wrapper * {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.landing-page-wrapper .container {
  max-width: min(1320px, 100%);
  max-width: min(var(--app-content-max-width, 1320px), 100%);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: clamp(0px, 2vw, 16px);
  padding-right: clamp(0px, 2vw, 16px);
}

.landing-page-wrapper .ant-layout-sider {
  display: none !important;
}

.landing-page-wrapper .ant-layout-header {
  display: none !important;
}

.landing-page-wrapper .atbd-main-layout {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

.landing-page-wrapper .admin-footer {
  display: none !important;
}

/* ============================================
   ENHANCED MOBILE TOOLTIP IMPROVEMENTS
   ============================================ */

/* Mobile tooltip styling - larger on touch devices */
@media (max-width: 479px) {
  .ant-tooltip .ant-tooltip-inner {
    padding: 12px 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    max-width: calc(100vw - 40px) !important;
    border-radius: 10px !important;
  }

  .ant-tooltip .ant-tooltip-arrow {
    display: none !important;
  }

  /* Make tooltip content more readable on small screens */
  .ant-tooltip .ant-tooltip-inner p {
    margin: 0;
    font-size: 12px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .ant-tooltip {
    max-width: calc(100vw - 32px) !important;
  }

  .ant-tooltip .ant-tooltip-inner {
    padding: 14px 18px !important;
    font-size: 14px !important;
    text-align: left !important;
  }
}

/* ============================================
   PARTNERS SECTION MOBILE IMPROVEMENTS (landing-only)
   ============================================ */

.landing-page-wrapper .partners-slick-wrap {
  padding-bottom: 40px !important;
}

@media (max-width: 639px) {
  .landing-page-wrapper .partners-slick-wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 36px !important;
  }

  .landing-page-wrapper .partners-slick-wrap .slick-dots {
    bottom: -28px !important;
  }

  .landing-page-wrapper .partners-slick-wrap .slick-dots li {
    margin: 0 3px !important;
  }

  .landing-page-wrapper .partners-slick-wrap .slick-dots li button {
    width: 24px !important;
    height: 24px !important;
    padding: 4px !important;
  }

  .landing-page-wrapper .partners-slick-wrap .slick-dots li button:before {
    font-size: 8px !important;
  }
}

/* Partner card mobile improvements */
@media (max-width: 639px) {
  .landing-page-wrapper .partners-slick-wrap .glass-card {
    padding: 16px 12px !important;
    min-height: 120px !important;
  }

  .landing-page-wrapper .partners-slick-wrap .glass-card h4 {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  .landing-page-wrapper .partners-slick-wrap .glass-card p {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .landing-page-wrapper .partners-slick-wrap .glass-card > div:first-of-type {
    height: 60px !important;
    margin-bottom: 12px !important;
  }
}

/* Arrow button improvements on mobile */
@media (max-width: 639px) {
  .landing-page-wrapper .partners-slick-arrow {
    width: 36px !important;
    height: 36px !important;
  }

  .landing-page-wrapper .partners-slick-arrow svg,
  .landing-page-wrapper .partners-slick-arrow i {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ============================================
   FAQ CTA MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 639px) {
  /* Stack the "Talk to our team" button on mobile */
  .faq-cta-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .faq-cta-wrapper p {
    margin-bottom: 0 !important;
  }
}

.landing-page-wrapper .ant-layout-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Form input focus */
.cyber-input {
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.25s ease;
  background: #0E0E0E;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: 15px;
}

/* 16px+ on narrow viewports avoids iOS Safari zoom-on-focus */
@media (max-width: 639px) {
  .cyber-input {
    font-size: 16px;
  }
}

.cyber-input::placeholder {
  color: color-mix(in srgb, var(--color-text-disabled) 60%, transparent);
}

.cyber-input:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.cyber-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent),
              0 0 20px color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-color: var(--color-primary);
  background: color-mix(in srgb, #0E0E0E 98%, var(--color-primary) 2%);
}

/* Footer link hover */
.footer-link {
  position: relative;
  display: inline-block;
  transition: color 0.2s ease;
}

.footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: width 0.2s ease;
}

.footer-link:hover::after {
  width: 100%;
}

/* Footer social — theme-aware, no inline hover handlers */
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-elevated) 82%, transparent),
    color-mix(in srgb, var(--color-paper) 70%, transparent)
  );
  color: color-mix(in srgb, var(--color-link) 72%, var(--color-text-secondary));
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.footer-social-link:hover {
  border-color: color-mix(in srgb, var(--color-primary) 48%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--color-link);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 14%, var(--color-elevated)),
    color-mix(in srgb, var(--color-elevated) 88%, transparent)
  );
}

@media (min-width: 640px) {
  .footer-social-link {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Noise texture overlay */
.noise-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.015;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 256 256%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27noiseFilter%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23noiseFilter%29%27/%3E%3C/svg%3E");
}

/* Team social button — replaces inline onMouseEnter/onMouseLeave handlers */
.team-social-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: rgba(var(--color-primary-rgb), 0.08);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (min-width: 640px) {
  .team-social-btn {
    width: 2rem;
    height: 2rem;
  }
}

.team-social-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.15);
  border-color: rgba(var(--color-primary-rgb), 0.3);
  box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.1);
}

/* FAQ item hover/focus state */
.faq-item {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
  border-color: rgba(var(--color-primary-rgb), 0.35);
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.06);
}

.faq-item:focus-within {
  border-color: rgba(var(--color-primary-rgb), 0.4);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.12);
}

/* Contact form status messages — consistent theme-aware styling */
.contact-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.75rem;
  padding: 1rem;
}

.contact-status--success {
  color: var(--color-success);
  background: rgba(var(--color-success-rgb), 0.06);
  border: 1px solid rgba(var(--color-success-rgb), 0.2);
}

.contact-status--error {
  color: var(--color-error);
  background: rgba(var(--color-error-rgb), 0.08);
  border: 1px solid rgba(var(--color-error-rgb), 0.25);
}

/* Back-to-top button */
.back-to-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-elevated) 80%, transparent);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (min-width: 640px) {
  .back-to-top-btn {
    min-width: 2rem;
    min-height: 2rem;
    width: 2rem;
    height: 2rem;
  }
}

.back-to-top-btn:hover {
  color: var(--color-link);
  border-color: rgba(var(--color-primary-rgb), 0.4);
  background: rgba(var(--color-primary-rgb), 0.08);
  box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.12);
  transform: translateY(-2px);
}

/* Trusted-by logo strip */
.trusted-by-logo {
  letter-spacing: 0.04em;
  cursor: default;
}

/* Hero: horizontal platform strip (motion-safe marquee) */
@keyframes trusted-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.trusted-by-marquee {
  overflow: hidden;
  padding: 0.25rem 0;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.trusted-by-marquee__track {
  display: flex;
  width: -webkit-max-content;
  width: max-content;
  gap: 0.75rem;
  animation: trusted-marquee-scroll 42s linear infinite;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .trusted-by-marquee:hover .trusted-by-marquee__track {
    animation-play-state: paused;
  }
}

@media (min-width: 640px) {
  .trusted-by-marquee__track {
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trusted-by-marquee__track {
    animation: none;
  }
}

/* Feature list item: hover, focus-within (keyboard / info trigger), light press */
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    border-radius: 0.5rem;
    border-width: 1px;
    border-color: transparent;
    padding: 0.625rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
@media (max-width: 374px) {
  .landing-page-wrapper footer form.feature-item {
    flex-direction: column;
    gap: 8px;
  }

  .landing-page-wrapper footer form.feature-item button {
    width: 100%;
  }
}
@media (min-width: 640px) {
    .feature-item {
        gap: 0.75rem;
        padding: 0.75rem;
    }
}

.feature-item:hover {
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.feature-item:focus-within {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(224 30 69 / 0.25);
    --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: var(--color-background);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 15%, var(--color-border));
}

/* Modern landing animations */
@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.text-shimmer {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(0, 174, 239, 0.95) 30%,
    rgba(139, 92, 246, 0.95) 55%,
    rgba(255, 61, 101, 0.95) 78%,
    rgba(255, 255, 255, 0.92) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

/* Hero headline accent: quicker sweep + wider gradient travel for large type */
.hero-title-accent.text-shimmer {
  background-size: 220% 100%;
  animation-duration: 4.2s;
}

@keyframes borderGlow {
  0% {
    filter: blur(0px);
    opacity: 0.35;
  }
  50% {
    filter: blur(0.6px);
    opacity: 0.75;
  }
  100% {
    filter: blur(0px);
    opacity: 0.35;
  }
}

.border-glow-animate {
  position: relative;
}

.border-glow-animate::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(0, 174, 239, 0.0) 0%,
    rgba(0, 174, 239, 0.35) 18%,
    rgba(139, 92, 246, 0.30) 50%,
    rgba(255, 61, 101, 0.22) 82%,
    rgba(255, 61, 101, 0.0) 100%
  );
  opacity: 0.45;
  animation: borderGlow 3.5s ease-in-out infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

@keyframes orbFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(18px, -22px, 0) scale(1.04);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(30px);
  opacity: 0.22;
  animation: orbFloat 10s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}

.orb--a {
  width: 360px;
  height: 360px;
  top: 10%;
  left: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(0, 174, 239, 0.85), rgba(0, 174, 239, 0.0) 60%);
  animation-duration: 12s;
}

.orb--b {
  width: 420px;
  height: 420px;
  bottom: 8%;
  right: -160px;
  background: radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.85), rgba(139, 92, 246, 0.0) 62%);
  animation-duration: 14s;
  animation-delay: -2.5s;
}

.orb--c {
  width: 240px;
  height: 240px;
  top: 22%;
  right: 18%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 61, 101, 0.8), rgba(255, 61, 101, 0.0) 62%);
  animation-duration: 11s;
  animation-delay: -4s;
}

@media (max-width: 480px) {
  .orb--a {
    width: 220px;
    height: 220px;
    left: -70px;
  }

  .orb--b {
    width: 260px;
    height: 260px;
    right: -100px;
  }

  .orb--c {
    width: 140px;
    height: 140px;
  }

  .orb {
    filter: blur(22px);
  }
}

/* ============================================
   TEAM MEMBER CARD IMPROVEMENTS
   ============================================ */

  /* Team member bio text - improved readability */
  .team-member-bio {
    color: rgba(209, 213, 219, 0.7) !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
  }

  /* Team member name */
  .team-member-name {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  /* Team member role */
  .team-member-role {
    color: rgba(224, 30, 69, 0.85) !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
  }

  /* Team card hover shadow */
  .team-card:hover .team-card-glow {
    opacity: 1;
  }

  /* ============================================
     PARTNER SECTION IMPROVEMENTS
     ============================================ */

  /* Partner name text */
  .partner-logo-name {
    color: rgba(229, 231, 235, 0.85) !important;
    font-weight: 600 !important;
    text-shadow: 0 0 20px rgba(224, 30, 69, 0.2) !important;
  }

  /* Partner description */
  .partner-description {
    color: rgba(156, 163, 175, 0.6) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Partner logo container */
  .partner-logo-container {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Partner card hover effect */
  .partner-card:hover .partner-logo-container {
    transform: scale(1.05);
  }

  /* ============================================
     FAQ SECTION IMPROVEMENTS
     ============================================ */

  /* FAQ question text */
  .faq-question-text {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
  }

  /* FAQ answer text */
  .faq-answer-text {
    color: rgba(209, 213, 219, 0.8) !important;
    line-height: 1.65 !important;
    font-size: 14px !important;
  }

  /* FAQ chevron icon */
  .faq-chevron {
    color: rgba(224, 30, 69, 0.7) !important;
    transition: transform 0.25s ease !important;
  }

  .faq-item:hover .faq-chevron {
    color: rgba(224, 30, 69, 0.9) !important;
  }

  /* FAQ expand/collapse button */
  .faq-expand-btn {
    color: rgba(224, 30, 69, 0.7) !important;
    font-weight: 500 !important;
  }

  .faq-expand-btn:hover {
    color: rgba(224, 30, 69, 0.9) !important;
  }

  /* ============================================
     CTA BUTTON IMPROVEMENTS
     ============================================ */

  /* Primary CTA button */
  .cta-button-primary {
    background: linear-gradient(135deg, #E01E45 0%, #FF3D65 100%) !important;
    border: 1px solid rgba(220, 30, 69, 0.5) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 2px 8px rgba(220, 30, 69, 0.25) !important;
  }

  .cta-button-primary:hover {
    background: linear-gradient(135deg, #FF3D65 0%, #E01E45 100%) !important;
    box-shadow: 0 4px 16px rgba(220, 30, 69, 0.35) !important;
    transform: translateY(-2px) !important;
  }

  .cta-button-primary:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 1px 4px rgba(220, 30, 69, 0.2) !important;
  }

  /* Secondary CTA button */
  .cta-button-secondary {
    background: rgba(24, 24, 27, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
  }

  .cta-button-secondary:hover {
    background: rgba(34, 34, 39, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
  }

  /* ============================================
     SECTION HEADER IMPROVEMENTS
     ============================================ */

  /* Section eyebrow text */
  .section-eyebrow {
    color: rgba(224, 30, 69, 0.7) !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
  }

  /* Section heading */
  .section-heading {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
  }

  /* Section subheading */
  .section-subheading {
    color: rgba(209, 213, 219, 0.8) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    font-size: 16px !important;
  }

  /* ============================================
     TRUST BADGES IMPROVEMENTS
     ============================================ */

  .trust-badge {
    background: rgba(224, 30, 69, 0.08) !important;
    border: 1px solid rgba(224, 30, 69, 0.15) !important;
    color: rgba(209, 213, 219, 0.85) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  .trust-badge-icon {
    color: rgba(224, 30, 69, 0.7) !important;
  }

  /* ============================================
     CONTACT SECTION IMPROVEMENTS
     ============================================ */

  .contact-label {
    color: rgba(209, 213, 219, 0.75) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }

  .contact-value {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
  }

  .contact-value a {
    color: rgba(224, 30, 69, 0.85) !important;
    transition: color 0.2s ease !important;
  }

  .contact-value a:hover {
    color: rgba(224, 30, 69, 1) !important;
  }

/* ── Mobile Navigation ── */

/* Backdrop overlay */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 480px) {
  .mobile-nav-backdrop {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* Slide-in panel */
.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  width: min(88vw, 380px);
  max-width: min(100vw, 380px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(
    195deg,
    color-mix(in srgb, var(--color-background) 97%, var(--color-primary) 3%) 0%,
    var(--color-background) 100%
  );
  border-left: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  box-shadow:
    -16px 0 48px rgba(0, 0, 0, 0.5),
    -2px 0 0 color-mix(in srgb, var(--color-primary) 8%, transparent);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-divider {
  flex-shrink: 0;
  height: 1px;
  margin: 0 1.25rem;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-primary) 22%, var(--color-border)),
    transparent
  );
}

/* Nav link styling */
.mobile-nav-link {
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.mobile-nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--color-primary-rgb), 0.08),
    transparent
  );
  transition: opacity 0.2s ease;
}

.mobile-nav-link:hover::before,
.mobile-nav-link:active::before {
  opacity: 1;
}

/* Active section indicator */
.mobile-nav-link--active {
  color: white !important;
  background: rgba(var(--color-primary-rgb), 0.08);
}

.mobile-nav-link--active .mobile-nav-dot {
  background: var(--color-primary) !important;
  box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.5);
  transform: scale(1.3);
}

/* Dot indicator */
.mobile-nav-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-text-disabled) 50%, transparent);
  transition: all 0.25s ease;
}

.mobile-nav-link:hover .mobile-nav-dot,
.mobile-nav-link:active .mobile-nav-dot {
  background: var(--color-link);
  transform: scale(1.2);
}

/* Hamburger icon bars */
.mobile-hamburger-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  position: relative;
}

.mobile-hamburger-bar {
  display: block;
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .back-to-top-btn:hover {
    transform: none;
  }
  .particle,
  .animated-gradient,
  .text-shimmer,
  .border-glow-animate::after,
  .orb {
    animation: none !important;
  }
  .glass-card:hover,
  .metallic-card:hover {
    transform: none;
  }
  .glass-card,
  .metallic-card {
    transition-duration: 0.01ms;
  }
  .mobile-nav-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mobile-hamburger-bar {
    transition-duration: 0.01ms;
  }
}

/* ============================================
   SERVICES TABS IMPROVEMENTS
   ============================================ */

/* Tab list styling */
.services-tabs-list {
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(24, 24, 27, 0.6) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(63, 63, 70, 0.3) !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
}

.services-tab-button {
  flex-shrink: 0 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(156, 163, 175, 0.8) !important;
  background: transparent !important;
  border: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

.services-tab-button:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(220, 30, 69, 0.08) !important;
}

.services-tab-button[data-headlessui-state~="active"] {
  color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(220, 30, 69, 0.15) !important;
  box-shadow: 0 2px 8px rgba(220, 30, 69, 0.2) !important;
}

/* ============================================
   LIVE DEMO IMPROVEMENTS
   ============================================ */

.live-demo-container {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid rgba(63, 63, 70, 0.4) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.live-demo-header {
  background: rgba(14, 14, 14, 0.8) !important;
  border-bottom: 1px solid rgba(63, 63, 70, 0.3) !important;
  padding: 12px 16px !important;
}

.live-demo-title {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.live-demo-body {
  padding: 20px !important;
  min-height: min(300px, 55dvh) !important;
}

/* ============================================
   INFO TIP IMPROVEMENTS
   ============================================ */

.info-tip-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(220, 30, 69, 0.1) !important;
  border: 1px solid rgba(220, 30, 69, 0.2) !important;
  color: rgba(220, 30, 69, 0.8) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}

.info-tip-trigger:hover {
  background: rgba(220, 30, 69, 0.2) !important;
  color: rgba(220, 30, 69, 1) !important;
  transform: scale(1.1) !important;
}

/* ============================================
   WAYFINDING PANEL IMPROVEMENTS
   ============================================ */

.wayfinding-panel {
  background: rgba(14, 14, 14, 0.6) !important;
  border: 1px solid rgba(220, 30, 69, 0.2) !important;
  border-radius: 16px !important;
}

.wayfinding-panel-header {
  border-bottom: 1px solid rgba(220, 30, 69, 0.1) !important;
  padding: 16px !important;
}

.wayfinding-panel-title {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
}

.wayfinding-panel-item {
  background: rgba(24, 24, 27, 0.4) !important;
  border: 1px solid rgba(63, 63, 70, 0.3) !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}

.wayfinding-panel-item:hover {
  background: rgba(220, 30, 69, 0.05) !important;
  border-color: rgba(220, 30, 69, 0.3) !important;
}

.wayfinding-panel-icon {
  background: rgba(220, 30, 69, 0.1) !important;
  border: 1px solid rgba(220, 30, 69, 0.2) !important;
  color: rgba(220, 30, 69, 0.9) !important;
}

/* ============================================
   DEMO CARD IMPROVEMENTS
   ============================================ */

.demo-card {
  background: rgba(24, 24, 27, 0.6) !important;
  border: 1px solid rgba(220, 30, 69, 0.15) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.demo-card-title {
  color: rgba(220, 30, 69, 0.9) !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  font-size: 14px !important;
}

.demo-card-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  font-family: monospace !important;
  font-size: 12px !important;
}

.demo-status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.demo-status-active {
  background: rgba(220, 30, 69, 0.9) !important;
  animation: demoPulse 2s ease-in-out infinite !important;
}

.demo-status-success {
  background: rgba(34, 197, 94, 0.9) !important;
}

.demo-status-warning {
  background: rgba(249, 115, 22, 0.9) !important;
}

@keyframes demoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* ============================================
   NAVIGATOR BADGE IMPROVEMENTS
   ============================================ */

.navigator-badge {
  background: rgba(220, 30, 69, 0.08) !important;
  border: 1px solid rgba(220, 30, 69, 0.15) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-family: monospace !important;
  font-size: 10px !important;
  color: rgba(156, 163, 175, 0.9) !important;
}

/* ============================================
   SERVICES CONTENT IMPROVEMENTS
   ============================================ */

.services-feature-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.services-feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(63, 63, 70, 0.2) !important;
}

.services-feature-item:last-child {
  border-bottom: none !important;
}

.services-feature-icon {
  color: rgba(220, 30, 69, 0.8) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.services-feature-text {
  color: rgba(209, 213, 219, 0.85) !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}

.services-feature-text strong {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
}

/* ============================================
   CODE SNIPPET IMPROVEMENTS
   ============================================ */

.code-snippet {
  background: rgba(14, 14, 14, 0.8) !important;
  border: 1px solid rgba(63, 63, 70, 0.4) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 12px !important;
  overflow-x: auto !important;
}

.code-snippet-inline {
  background: rgba(220, 30, 69, 0.08) !important;
  border: 1px solid rgba(220, 30, 69, 0.2) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 11px !important;
  color: rgba(220, 30, 69, 0.9) !important;
}

/* ============================================
   ENHANCED MOBILE LANDING EXPERIENCE
   ============================================ */

/* Extra small devices (320px - 479px) */
@media (max-width: 479px) {
  /* Hero Section */
  .hero-section {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }

  .hero-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  .hero-subtitle {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-top: 16px !important;
  }

  .hero-cta-buttons {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hero-cta-buttons .cta-button {
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
  }

  /* Section Headers */
  .section-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
  }

  .section-heading {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  .section-subheading {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* Feature Cards */
  .feature-card {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  .feature-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 16px !important;
  }

  .feature-title {
    font-size: 17px !important;
    margin-bottom: 8px !important;
  }

  .feature-description {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Stats Section */
  .stat-item {
    padding: 16px 8px !important;
  }

  .stat-number {
    font-size: 28px !important;
  }

  .stat-label {
    font-size: 10px !important;
  }

  /* Pricing Cards */
  .pricing-card {
    padding: 24px 16px !important;
    margin: 0 -8px !important;
  }

  .pricing-amount {
    font-size: 32px !important;
  }

  .pricing-features {
    padding-left: 0 !important;
  }

  .pricing-feature {
    font-size: 13px !important;
    padding: 8px 0 !important;
  }

  /* Team Section */
  .team-card {
    padding: 20px !important;
  }

  .team-avatar {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 12px !important;
  }

  .team-name {
    font-size: 16px !important;
  }

  .team-bio {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* FAQ Section */
  .faq-question {
    font-size: 15px !important;
    padding: 16px !important;
  }

  .faq-answer {
    font-size: 13px !important;
    line-height: 1.6 !important;
    padding: 0 16px 16px !important;
  }

  /* Footer */
  .footer-section {
    padding: 24px 0 !important;
  }

  .footer-title {
    font-size: 14px !important;
    margin-bottom: 12px !important;
  }

  .footer-link {
    font-size: 13px !important;
    padding: 6px 0 !important;
  }

  /* Contact Form */
  .contact-form {
    padding: 20px !important;
  }

  .contact-input {
    padding: 14px !important;
    font-size: 16px !important;
    min-height: 48px !important;
  }

  .contact-textarea {
    min-height: 120px !important;
  }

  /* Partner Logos */
  .partner-card {
    padding: 16px !important;
    min-height: 80px !important;
  }

  .partner-name {
    font-size: 14px !important;
  }

  /* CTA Section */
  .cta-section {
    padding: 48px 16px !important;
  }

  .cta-title {
    font-size: 24px !important;
  }

  /* Live Demo */
  .live-demo-container {
    border-radius: 12px !important;
    margin: 0 -4px !important;
  }

  .live-demo-body {
    padding: 16px !important;
    min-height: 240px !important;
  }

  /* Wayfinding Panel */
  .wayfinding-panel {
    border-radius: 12px !important;
    margin-top: 16px !important;
  }

  .wayfinding-panel-item {
    padding: 12px !important;
  }

  /* Trust Badges */
  .trust-badge {
    padding: 6px 12px !important;
    font-size: 10px !important;
  }
}

/* Small devices (480px - 639px) */
@media (min-width: 480px) and (max-width: 639px) {
  .hero-title {
    font-size: 34px !important;
  }

  .section-heading {
    font-size: 30px !important;
  }

  .feature-card {
    padding: 24px !important;
  }

  .hero-cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-cta-buttons .cta-button {
    justify-content: center !important;
  }
}

/* Tablet devices (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  .hero-title {
    font-size: 40px !important;
  }

  .section-heading {
    font-size: 34px !important;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* Tablet landscape (768px - 1023px) — fill the awkward mid-range */
@media (min-width: 768px) and (max-width: 1023px) {
  .landing-page-wrapper .section-container {
    padding-left: max(clamp(24px, 4vw, 40px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(24px, 4vw, 40px), env(safe-area-inset-right, 0px));
  }

  .landing-page-wrapper .container {
    max-width: min(1320px, 100%);
    max-width: min(var(--app-content-max-width, 1320px), 100%);
  }
}

/* Enhanced touch interactions (landing-only) */
@media (hover: none) and (pointer: coarse) {
  /* Touch-specific styles */
  .landing-page-wrapper .feature-card:active {
    transform: scale(0.98) !important;
    opacity: 0.95 !important;
  }

  .landing-page-wrapper .cta-button:active {
    transform: scale(0.97) !important;
  }

  .landing-page-wrapper .team-card:active {
    transform: scale(0.99) !important;
  }

  .landing-page-wrapper .pricing-card:active {
    transform: scale(0.99) !important;
  }

  .landing-page-wrapper .faq-item:active {
    background: rgba(220, 30, 69, 0.05) !important;
  }

  /* Larger touch targets */
  .landing-page-wrapper .mobile-nav-link {
    min-height: 48px !important;
    padding: 12px 16px !important;
  }

  .landing-page-wrapper .footer-link {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
  }

  .landing-page-wrapper .contact-input:focus,
  .landing-page-wrapper .contact-textarea:focus {
    border-width: 2px !important;
  }
}

/* Improved scroll performance */
@media (max-width: 767px) {
  .landing-page-wrapper {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Reduce motion on mobile for better performance */
  .landing-page-wrapper .particle {
    animation-duration: 12s !important;
  }

  .landing-page-wrapper .orb {
    animation-duration: 16s !important;
    opacity: 0.15 !important;
  }

  .landing-page-wrapper .animated-gradient {
    animation-duration: 30s !important;
  }

  .landing-page-wrapper .text-shimmer {
    animation-duration: 8s !important;
  }

  /* Disable complex effects on mobile */
  .landing-page-wrapper .futuristic-grid {
    opacity: 0.2 !important;
  }

  .landing-page-wrapper .noise-overlay {
    opacity: 0.008 !important;
  }
}

/* Safe area support for modern mobile devices */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 639px) {
    .landing-footer {
      padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }

    .landing-mobile-nav {
      padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .back-to-top-btn {
      bottom: calc(20px + env(safe-area-inset-bottom)) !important;
      right: calc(16px + env(safe-area-inset-right)) !important;
    }
  }
}

/* Landscape mobile adjustments (landing-only) */
@media (max-height: 500px) and (orientation: landscape) {
  .landing-page-wrapper .hero-section {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }

  .landing-page-wrapper .hero-title {
    font-size: 28px !important;
  }

  .landing-page-wrapper .orb {
    display: none !important;
  }

  .landing-page-wrapper .section-container {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* High contrast mode support (landing-only) */
@media (prefers-contrast: high) {
  .landing-page-wrapper .feature-card,
  .landing-page-wrapper .team-card,
  .landing-page-wrapper .pricing-card {
    border-width: 2px !important;
  }

  .landing-page-wrapper .cta-button {
    border-width: 2px !important;
  }

  .landing-page-wrapper .section-heading {
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
  }
}

/* Print styles for mobile */
@media print {
  .orb,
  .particle,
  .animated-gradient,
  .noise-overlay,
  .back-to-top-btn,
  .mobile-nav-backdrop {
    display: none !important;
  }

  .section-container {
    padding: 20px !important;
  }

  .feature-card,
  .team-card,
  .pricing-card {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}

/* Dark mode adjustments for OLED screens */
@media (max-width: 639px) and (prefers-color-scheme: dark) {
  .landing-page-wrapper {
    background-color: #000 !important;
  }

  .glass-card {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  .metallic-card {
    background: rgba(0, 0, 0, 0.8) !important;
  }
}

/* Smooth scrolling for anchor links (section scroll-margin landing-only) */
@media (max-width: 767px) {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px !important;
  }

  .landing-page-wrapper section[id] {
    scroll-margin-top: 70px !important;
  }
}

/* Responsive typography scale (landing-only — was shrinking all console headings after visiting /) */
@media (max-width: 479px) {
  .landing-page-wrapper h1 { font-size: 28px !important; line-height: 1.2 !important; }
  .landing-page-wrapper h2 { font-size: 24px !important; line-height: 1.25 !important; }
  .landing-page-wrapper h3 { font-size: 20px !important; line-height: 1.3 !important; }
  .landing-page-wrapper h4 { font-size: 17px !important; line-height: 1.35 !important; }
  .landing-page-wrapper h5 { font-size: 15px !important; line-height: 1.4 !important; }
  .landing-page-wrapper h6 { font-size: 14px !important; line-height: 1.45 !important; }
  .landing-page-wrapper p { font-size: 14px !important; line-height: 1.6 !important; }
  .landing-page-wrapper small { font-size: 12px !important; }
}

@media (min-width: 480px) and (max-width: 639px) {
  .landing-page-wrapper h1 { font-size: 34px !important; line-height: 1.2 !important; }
  .landing-page-wrapper h2 { font-size: 28px !important; line-height: 1.25 !important; }
  .landing-page-wrapper h3 { font-size: 22px !important; line-height: 1.3 !important; }
  .landing-page-wrapper h4 { font-size: 18px !important; line-height: 1.35 !important; }
  .landing-page-wrapper h5 { font-size: 16px !important; line-height: 1.4 !important; }
  .landing-page-wrapper h6 { font-size: 14px !important; line-height: 1.45 !important; }
  .landing-page-wrapper p { font-size: 15px !important; line-height: 1.6 !important; }
  .landing-page-wrapper small { font-size: 12px !important; }
}

/* Better focus indicators for accessibility (landing-only) */
@media (max-width: 767px) {
  .landing-page-wrapper a:focus-visible,
  .landing-page-wrapper button:focus-visible,
  .landing-page-wrapper input:focus-visible,
  .landing-page-wrapper textarea:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
  }

  .landing-page-wrapper .cta-button:focus-visible {
    box-shadow: 0 0 0 4px rgba(220, 30, 69, 0.4) !important;
  }
}

/* Icon scaling for retina displays (landing-only) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .landing-page-wrapper .feature-icon,
  .landing-page-wrapper .team-social-btn svg,
  .landing-page-wrapper .footer-social-link svg {
    transform: scale(1);
  }
}

/* ============================================
   COMPREHENSIVE MOBILE FIXES
   ============================================ */

/* Fix horizontal overflow on all mobile devices */
@media (max-width: 767px) {
  .landing-page-wrapper,
  .landing-page-wrapper > * {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Header renders a fragment: panel/backdrop are direct children. overflow-x:hidden on them
     can force overflow-y away from visible and clip the flex column; keep full-height overlay. */
  .landing-page-wrapper > .mobile-nav-backdrop,
  .landing-page-wrapper > .mobile-nav-panel {
    overflow: visible !important;
    max-width: none !important;
  }

  /* Ensure all sections stay within viewport (scoped — unscoped rules leaked to /console after visiting /) */
  .landing-page-wrapper section,
  .landing-page-wrapper .section-container,
  .landing-page-wrapper .hero-section,
  .landing-page-wrapper .features-section,
  .landing-page-wrapper .stats-section,
  .landing-page-wrapper .pricing-section,
  .landing-page-wrapper .team-section,
  .landing-page-wrapper .faq-section,
  .landing-page-wrapper .cta-section,
  .landing-page-wrapper .footer-section {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Fix any absolute/fixed elements that might overflow */
  .landing-page-wrapper .hero-visual,
  .landing-page-wrapper .hero-image,
  .landing-page-wrapper .feature-visual,
  .landing-page-wrapper .pricing-visual,
  .landing-page-wrapper .team-visual {
    max-width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  /* Grid containers */
  .landing-page-wrapper .feature-grid,
  .landing-page-wrapper .stats-grid,
  .landing-page-wrapper .pricing-grid,
  .landing-page-wrapper .team-grid,
  .landing-page-wrapper .partner-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cards and containers */
  .landing-page-wrapper .feature-card,
  .landing-page-wrapper .pricing-card,
  .landing-page-wrapper .team-card,
  .landing-page-wrapper .partner-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Images and media (exclude header/footer SVG wordmarks — flex + height:auto + max-width:100%
     collapses or clips the brand in the fixed nav on narrow viewports) */
  .landing-page-wrapper img:not(.lc-brand-logo),
  .landing-page-wrapper video,
  .landing-page-wrapper canvas,
  .landing-page-wrapper svg {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Form elements */
  .landing-page-wrapper input,
  .landing-page-wrapper textarea,
  .landing-page-wrapper select,
  .landing-page-wrapper button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Tables */
  .landing-page-wrapper table {
    overflow-x: auto !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Slider/Carousel containers */
  .landing-page-wrapper .slider-container,
  .landing-page-wrapper .carousel-container,
  .landing-page-wrapper .testimonial-slider {
    max-width: 100vw !important;
    overflow: hidden !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Navigation fixes */
  .landing-header nav {
    overflow-x: auto !important;
    max-width: 100% !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  .landing-header nav::-webkit-scrollbar {
    display: none !important;
  }

  /* Hamburger menu mobile adjustments */
  .mobile-menu-toggle,
  .menu-toggle,
  .nav-toggle {
    z-index: 1001 !important;
  }

  /* Footer columns */
  .landing-page-wrapper .footer-grid,
  .landing-page-wrapper .footer-links,
  .landing-page-wrapper .footer-columns {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Accordion/FAQ items */
  .landing-page-wrapper .faq-item,
  .landing-page-wrapper .accordion-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Tabs */
  .landing-page-wrapper .tab-list,
  .landing-page-wrapper .services-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }

  .landing-page-wrapper .tab-list::-webkit-scrollbar,
  .landing-page-wrapper .services-tabs::-webkit-scrollbar {
    display: none !important;
  }

  /* Scrollable containers */
  .landing-page-wrapper .scroll-container,
  .landing-page-wrapper .horizontal-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .landing-page-wrapper .scroll-container::-webkit-scrollbar,
  .landing-page-wrapper .horizontal-scroll::-webkit-scrollbar {
    display: none !important;
  }
}

/* Extra small devices (320px - 479px) - More aggressive fixes */
@media (max-width: 479px) {
  /* Force box-sizing on all children */
  .landing-page-wrapper * {
    box-sizing: border-box !important;
  }

  /* Container max-width (scoped — .container/.label etc. exist in console) */
  .landing-page-wrapper .container,
  .landing-page-wrapper .container-fluid,
  .landing-page-wrapper .wrapper,
  .landing-page-wrapper .content-wrapper {
    max-width: 100vw !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Hero section */
  .landing-page-wrapper .hero-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .landing-page-wrapper .hero-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Button groups */
  .landing-page-wrapper .button-group,
  .landing-page-wrapper .btn-group,
  .landing-page-wrapper .cta-buttons {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .landing-page-wrapper .button-group .btn,
  .landing-page-wrapper .btn-group .btn,
  .landing-page-wrapper .cta-buttons .btn,
  .landing-page-wrapper .cta-buttons button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Flex containers */
  .landing-page-wrapper .flex-row,
  .landing-page-wrapper .flex-container,
  .landing-page-wrapper .row-flex {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Pricing tier comparison */
  .landing-page-wrapper .pricing-comparison,
  .landing-page-wrapper .tier-comparison {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Testimonials */
  .landing-page-wrapper .testimonial-card,
  .landing-page-wrapper .review-card {
    min-width: 280px !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* Badges and tags */
  .landing-page-wrapper .badge,
  .landing-page-wrapper .tag,
  .landing-page-wrapper .label {
    white-space: normal !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* Icon + text combinations */
  .landing-page-wrapper .icon-text,
  .landing-page-wrapper .icon-label {
    white-space: normal !important;
  }

  /* Data tables in pricing/features */
  .landing-page-wrapper .data-table,
  .landing-page-wrapper .feature-table,
  .landing-page-wrapper .pricing-table {
    font-size: 12px !important;
  }

  /* Video embeds */
  .landing-page-wrapper .video-container,
  .landing-page-wrapper .video-wrapper,
  .landing-page-wrapper .embed-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .landing-page-wrapper .video-container iframe,
  .landing-page-wrapper .video-wrapper iframe,
  .landing-page-wrapper .embed-container iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Decorative elements */
  .landing-page-wrapper .decoration,
  .landing-page-wrapper .decorative-element,
  .landing-page-wrapper .bg-decoration {
    display: none !important;
  }

  /* Floating elements */
  .landing-page-wrapper .floating-element,
  .landing-page-wrapper .float-element {
    display: none !important;
  }

  /* Animated backgrounds */
  .landing-page-wrapper .animated-bg,
  .landing-page-wrapper .gradient-bg,
  .landing-page-wrapper .bg-gradient {
    background-size: 200% 200% !important;
    animation: none !important;
  }
}

/* Landscape mobile (landing-only) */
@media (max-height: 500px) and (orientation: landscape) {
  .landing-page-wrapper .hero-section {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }

  .landing-page-wrapper .hero-title {
    font-size: 24px !important;
  }

  .landing-page-wrapper .hero-subtitle {
    font-size: 13px !important;
  }

  .landing-page-wrapper .cta-section {
    padding: 24px 16px !important;
  }
}

/* Prevent text size increase on rotation */
@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
         text-size-adjust: 100% !important;
  }
}

/* Fix for 100vw scrollbar issue */
@supports (width: 100vw) {
  @media (max-width: 767px) {
    .landing-page-wrapper {
      width: 100vw !important;
      width: 100% !important;
      max-width: 100vw !important;
      overflow-x: hidden !important;
    }
  }
}

/* ============================================
   ADDITIONAL MOBILE IMPROVEMENTS
   ============================================ */

/* Touch-friendly improvements (scoped to landing wrapper — avoids warping Ant/console buttons after visiting /) */
@media (max-width: 767px) {
  /* Larger touch targets for CTA-class buttons and submit buttons only.
     Generic button[type="button"] is NOT included — each component owns
     its own sizing via Tailwind, and force-padding broke utility buttons
     in LiveDemo, FAQ, Services pager, etc. */
  .landing-page-wrapper .cta-button,
  .landing-page-wrapper .btn-primary,
  .landing-page-wrapper .btn-secondary,
  .landing-page-wrapper .btn,
  .landing-page-wrapper button[type="submit"] {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 14px 24px !important;
  }

  /* Safe touch properties for ALL buttons (no layout side-effects) */
  .landing-page-wrapper button,
  .landing-page-wrapper [role="button"] {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Touch feedback */
  .landing-page-wrapper .cta-button:active,
  .landing-page-wrapper .btn-primary:active,
  .landing-page-wrapper .btn-secondary:active,
  .landing-page-wrapper .btn:active {
    transform: scale(0.97) !important;
    opacity: 0.9 !important;
  }

  /* Card touch interactions */
  .landing-page-wrapper .feature-card:active,
  .landing-page-wrapper .pricing-card:active,
  .landing-page-wrapper .team-card:active {
    transform: scale(0.98) !important;
    opacity: 0.95 !important;
  }

  /* Link touch feedback */
  .landing-page-wrapper a:active,
  .landing-page-wrapper .nav-link:active {
    opacity: 0.7 !important;
  }

  /* Accordion/FAQ touch feedback */
  .landing-page-wrapper .faq-question:active,
  .landing-page-wrapper .accordion-header:active {
    background: rgba(255, 255, 255, 0.05) !important;
  }

  /* Tab touch feedback */
  .landing-page-wrapper .tab-item:active,
  .landing-page-wrapper .services-tab:active {
    opacity: 0.8 !important;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Better scroll on containers */
  .landing-page-wrapper {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Mobile navigation improvements (legacy class names — scope to landing to avoid clashing with console) */
@media (max-width: 767px) {
  /* Mobile menu overlay */
  .landing-page-wrapper .mobile-menu-overlay,
  .landing-page-wrapper .nav-overlay,
  .landing-page-wrapper .menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
  }

  .landing-page-wrapper .mobile-menu-overlay.active,
  .landing-page-wrapper .nav-overlay.active,
  .landing-page-wrapper .menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Mobile menu panel */
  .landing-page-wrapper .mobile-menu-panel,
  .landing-page-wrapper .nav-panel,
  .landing-page-wrapper .menu-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 80vw !important;
    background: #1a1a1c !important;
    background: var(--color-elevated, #1a1a1c) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 999 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 24px 16px !important;
  }

  .landing-page-wrapper .mobile-menu-panel.active,
  .landing-page-wrapper .nav-panel.active,
  .landing-page-wrapper .menu-panel.active {
    transform: translateX(0) !important;
  }

  /* Menu items in mobile panel */
  .landing-page-wrapper .mobile-menu-item,
  .landing-page-wrapper .nav-panel-item {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    margin-bottom: 4px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    text-align: left !important;
    transition: background 0.2s ease !important;
  }

  .landing-page-wrapper .mobile-menu-item:hover,
  .landing-page-wrapper .mobile-menu-item:active,
  .landing-page-wrapper .nav-panel-item:hover,
  .landing-page-wrapper .nav-panel-item:active {
    background: rgba(224, 30, 69, 0.1) !important;
  }

  /* Close button in mobile menu */
  .landing-page-wrapper .mobile-menu-close,
  .landing-page-wrapper .nav-panel-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
}

/* Improved card spacing on mobile (landing-only) */
@media (max-width: 479px) {
  /* Feature cards grid adjustments */
  .landing-page-wrapper .feature-grid {
    gap: 16px !important;
  }

  .landing-page-wrapper .feature-card {
    margin-bottom: 0 !important;
  }

  /* Stats items */
  .landing-page-wrapper .stats-grid,
  .landing-page-wrapper .stat-items {
    gap: 12px !important;
  }

  /* Pricing cards - single column */
  .landing-page-wrapper .pricing-grid {
    gap: 16px !important;
  }

  .landing-page-wrapper .pricing-card {
    margin-bottom: 0 !important;
  }

  /* Team cards */
  .landing-page-wrapper .team-grid {
    gap: 16px !important;
  }

  /* Partner logos */
  .landing-page-wrapper .partner-grid {
    gap: 12px !important;
  }

  .landing-page-wrapper .partner-card {
    padding: 12px !important;
    min-height: 60px !important;
  }
}

/* Improved typography on mobile (landing-only) */
@media (max-width: 479px) {
  /* Hero text */
  .landing-page-wrapper .hero-title {
    font-size: 26px !important;
    letter-spacing: -0.03em !important;
  }

  .landing-page-wrapper .hero-subtitle {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* Section headings */
  .landing-page-wrapper .section-heading {
    font-size: 24px !important;
    letter-spacing: -0.02em !important;
  }

  .landing-page-wrapper .section-subheading {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* Feature titles */
  .landing-page-wrapper .feature-title {
    font-size: 16px !important;
  }

  .landing-page-wrapper .feature-description {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Pricing text */
  .landing-page-wrapper .pricing-tier {
    font-size: 18px !important;
  }

  .landing-page-wrapper .pricing-amount {
    font-size: 28px !important;
  }

  .landing-page-wrapper .pricing-period {
    font-size: 12px !important;
  }

  /* CTA text */
  .landing-page-wrapper .cta-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* Footer text */
  .landing-page-wrapper .footer-title {
    font-size: 14px !important;
  }

  .landing-page-wrapper .footer-text,
  .landing-page-wrapper .footer-link {
    font-size: 13px !important;
  }
}

/* Better form inputs on mobile (landing-only — was restyling every input in /console) */
@media (max-width: 767px) {
  /* Form inputs */
  .landing-page-wrapper input[type="text"],
  .landing-page-wrapper input[type="email"],
  .landing-page-wrapper input[type="password"],
  .landing-page-wrapper input[type="number"],
  .landing-page-wrapper input[type="tel"],
  .landing-page-wrapper input[type="url"],
  .landing-page-wrapper input[type="search"],
  .landing-page-wrapper textarea,
  .landing-page-wrapper select {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.2s ease !important;
  }

  .landing-page-wrapper input:focus,
  .landing-page-wrapper textarea:focus,
  .landing-page-wrapper select:focus {
    border-color: rgba(224, 30, 69, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(224, 30, 69, 0.15) !important;
    outline: none !important;
  }

  /* Textarea specific */
  .landing-page-wrapper textarea {
    min-height: 120px !important;
    resize: vertical !important;
  }

  /* Labels */
  .landing-page-wrapper label,
  .landing-page-wrapper .form-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block !important;
  }

  /* Form groups */
  .landing-page-wrapper .form-group,
  .landing-page-wrapper .form-field {
    margin-bottom: 16px !important;
  }

  /* Contact form */
  .landing-page-wrapper .contact-form {
    padding: 20px !important;
    border-radius: 16px !important;
  }
}

/* Better modal/dialog on mobile — do not target .ant-modal/.ant-drawer (portaled to body; broke console UI) */
@media (max-width: 767px) {
  .landing-page-wrapper .modal,
  .landing-page-wrapper .dialog {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  .landing-page-wrapper .modal-content,
  .landing-page-wrapper .dialog-content {
    border-radius: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  .landing-page-wrapper .modal-header {
    padding: 16px !important;
    border-radius: 0 !important;
  }

  .landing-page-wrapper .modal-body {
    padding: 16px !important;
  }

  .landing-page-wrapper .modal-footer {
    padding: 16px !important;
    border-radius: 0 !important;
  }

  .landing-page-wrapper .drawer-content {
    border-radius: 0 !important;
  }
}

/* Improved carousel/slider on mobile (landing-only) */
@media (max-width: 767px) {
  .landing-page-wrapper .carousel,
  .landing-page-wrapper .slider,
  .landing-page-wrapper .testimonial-slider {
    overflow: hidden !important;
    position: relative !important;
  }

  .landing-page-wrapper .carousel-track,
  .landing-page-wrapper .slider-track,
  .landing-page-wrapper .testimonial-track {
    display: flex !important;
    transition: transform 0.3s ease !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .landing-page-wrapper .carousel-slide,
  .landing-page-wrapper .slider-slide,
  .landing-page-wrapper .testimonial-slide {
    flex: 0 0 85% !important;
    margin-right: 12px !important;
  }

  /* Carousel navigation */
  .landing-page-wrapper .carousel-nav,
  .landing-page-wrapper .slider-nav,
  .landing-page-wrapper .testimonial-nav {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }

  .landing-page-wrapper .carousel-dot,
  .landing-page-wrapper .slider-dot,
  .landing-page-wrapper .testimonial-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    transition: all 0.2s ease !important;
  }

  .landing-page-wrapper .carousel-dot.active,
  .landing-page-wrapper .slider-dot.active,
  .landing-page-wrapper .testimonial-dot.active {
    background: #E01E45 !important;
    background: var(--color-primary, #E01E45) !important;
    transform: scale(1.2) !important;
  }

  /* Carousel arrows */
  .landing-page-wrapper .carousel-arrow,
  .landing-page-wrapper .slider-arrow {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* Better accordion/FAQ on mobile (landing-only) */
@media (max-width: 767px) {
  .landing-page-wrapper .faq-item,
  .landing-page-wrapper .accordion-item {
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  .landing-page-wrapper .faq-question,
  .landing-page-wrapper .accordion-header {
    padding: 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
  }

  .landing-page-wrapper .faq-icon,
  .landing-page-wrapper .accordion-icon {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease !important;
  }

  .landing-page-wrapper .faq-item.active .faq-icon,
  .landing-page-wrapper .accordion-item.active .accordion-icon {
    transform: rotate(180deg) !important;
  }

  .landing-page-wrapper .faq-answer,
  .landing-page-wrapper .accordion-content {
    padding: 0 16px 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(209, 213, 219, 0.8) !important;
  }
}

/* Better tabs on mobile (landing-only) */
@media (max-width: 767px) {
  .landing-page-wrapper .tabs-container,
  .landing-page-wrapper .tab-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -16px !important;
    padding: 0 16px !important;
  }

  .landing-page-wrapper .tab-list,
  .landing-page-wrapper .tabs-list {
    display: flex !important;
    gap: 4px !important;
    min-width: -webkit-min-content !important;
    min-width: min-content !important;
  }

  .landing-page-wrapper .tab-item,
  .landing-page-wrapper .tab {
    flex: 0 0 auto !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
  }

  .landing-page-wrapper .tab-item.active,
  .landing-page-wrapper .tab.active {
    background: rgba(224, 30, 69, 0.15) !important;
    color: #E01E45 !important;
    color: var(--color-primary, #E01E45) !important;
  }
}

/* Image optimization on mobile (landing-only) */
@media (max-width: 767px) {
  /* Lazy load fade in */
  .landing-page-wrapper img {
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
  }

  .landing-page-wrapper img.loading {
    opacity: 0 !important;
  }

  /* Responsive images */
  .landing-page-wrapper .hero-image,
  .landing-page-wrapper .feature-image,
  .landing-page-wrapper .section-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Hide non-essential images on small screens */
  .landing-page-wrapper .decorative-image,
  .landing-page-wrapper .bg-image {
    display: none !important;
  }
}

/* Better spacing rhythm on mobile */
@media (max-width: 479px) {
  .landing-page-wrapper .section-container {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}

/* Very small phones (320-360px) — tighter rhythm, prevent clipping */
@media (max-width: 360px) {
  .landing-page-wrapper .section-container {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  .landing-page-wrapper .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .landing-page-wrapper h2,
  .landing-page-wrapper .section-heading {
    font-size: 22px !important;
    letter-spacing: -0.03em !important;
  }

  .landing-page-wrapper .hero-section h1 {
    font-size: 24px !important;
  }

  .landing-page-wrapper .glass-card {
    padding: 14px 12px !important;
  }
}

/* Improved accessibility on mobile (focus ring landing-only — was overriding console focus styles) */
@media (max-width: 767px) {
  /* Focus visible for keyboard users */
  .landing-page-wrapper *:focus-visible {
    outline: 2px solid rgba(224, 30, 69, 0.6) !important;
    outline-offset: 2px !important;
  }

  /* Skip link */
  .landing-page-wrapper .skip-link {
    position: absolute !important;
    top: -40px !important;
    left: 0 !important;
    width: 100% !important;
    padding: 12px !important;
    background: #E01E45 !important;
    background: var(--color-primary, #E01E45) !important;
    color: #fff !important;
    text-align: center !important;
    z-index: 9999 !important;
    transition: top 0.2s ease !important;
  }

  .landing-page-wrapper .skip-link:focus {
    top: 0 !important;
  }

  /* Screen reader only */
  .landing-page-wrapper .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* ============================================
     PARTNERS SLIDER (landing-only; nested under mobile a11y block)
     ============================================ */

  .landing-page-wrapper .partners-slick-wrap {
    position: relative;
  }

  .landing-page-wrapper .partners-slick-wrap .slick-slider {
    position: relative;
  }

  .landing-page-wrapper .partners-slick-wrap .slick-list {
    position: relative;
    overflow: hidden !important;
    margin: 0;
    padding: 0;
  }

  .landing-page-wrapper .partners-slick-wrap .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block !important;
    margin-left: auto;
    margin-right: auto;
  }

  .landing-page-wrapper .partners-slick-wrap .slick-slide {
    display: block !important;
    float: none !important;
    height: auto !important;
    min-height: 200px !important;
  }

  .landing-page-wrapper .partners-slick-wrap .slick-slide > div {
    display: block !important;
    height: auto !important;
    min-height: 200px !important;
  }

  .landing-page-wrapper .partners-slick-wrap .slick-slide > div > div {
    height: auto !important;
    min-height: 200px !important;
  }

  .landing-page-wrapper .partners-slick-wrap .glass-card {
    min-height: 180px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  @media (max-width: 639px) {
    .landing-page-wrapper .partners-slick-wrap {
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    .landing-page-wrapper .partners-slick-wrap .slick-list {
      overflow: visible !important;
    }

    .landing-page-wrapper .partners-slick-wrap .slick-track {
      padding-bottom: 16px !important;
    }

    .landing-page-wrapper .partners-slick-wrap .slick-slide {
      min-height: 240px !important;
    }

    .landing-page-wrapper .partners-slick-wrap .slick-slide > div {
      min-height: 240px !important;
    }

    .landing-page-wrapper .partners-slick-wrap .slick-slide > div > div {
      min-height: 240px !important;
    }

    .landing-page-wrapper .partners-slick-wrap .glass-card {
      min-height: 220px !important;
    }

    .landing-page-wrapper .partners-slick-wrap .slick-dots {
      bottom: -36px !important;
    }
  }

  @media (max-width: 479px) {
    .landing-page-wrapper .partners-slick-wrap .slick-slide {
      min-height: 260px !important;
    }

    .landing-page-wrapper .partners-slick-wrap .slick-slide > div {
      min-height: 260px !important;
    }

    .landing-page-wrapper .partners-slick-wrap .slick-slide > div > div {
      min-height: 260px !important;
    }

    .landing-page-wrapper .partners-slick-wrap .glass-card {
      min-height: 240px !important;
    }
  }
}

/* ============================================
   TEAM CARD ANIMATED GRADIENT BORDER
   ============================================ */
@keyframes team-border-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   FAQ SEARCH INPUT ENHANCEMENTS
   ============================================ */
.faq-section input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.faq-section input[type="search"]::-webkit-search-decoration {
  display: none;
}

/* ============================================
   FOOTER NEWSLETTER STYLING
   ============================================ */
footer .cyber-input {
  font-size: 13px !important;
}

/* ============================================
   CONTACT FORM SELECT STYLING
   ============================================ */
.landing-page-wrapper select.cyber-input option {
  background: #0e0e0e;
  color: rgba(229, 231, 235, 0.95);
  padding: 8px 12px;
}

/* ============================================
   ENHANCED FEATURE ITEM INTERACTIONS
   ============================================ */
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}
@media (max-width: 374px) {
  .landing-page-wrapper footer form.feature-item {
    flex-direction: column;
    gap: 8px;
  }

  .landing-page-wrapper footer form.feature-item button {
    width: 100%;
  }
}
@media (min-width: 640px) {
    .feature-item {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.feature-item:hover {
  background: rgba(var(--color-primary-rgb), 0.04);
}

/* ============================================
   SECTION HEADING ACCENT UNDERLINE
   ============================================ */
.landing-page-wrapper h2 .glow-text {
  position: relative;
}

.landing-page-wrapper h2 .glow-text::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  border-radius: 1px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-page-wrapper section:hover h2 .glow-text::after {
  width: 100%;
}

/* ============================================
   GLASS CARD INNER GLOW ON HOVER
   ============================================ */
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(var(--color-primary-rgb), 0.06),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.glass-card:hover::after {
  opacity: 1;
}

/* ============================================
   SMOOTH FOCUS TRANSITIONS FOR INPUTS
   ============================================ */
.cyber-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.cyber-input:hover:not(:focus) {
  border-color: rgba(80, 80, 100, 0.6) !important;
  background: rgba(18, 18, 18, 0.95) !important;
}

/* ============================================
   BACK TO TOP ENHANCED HOVER
   ============================================ */
.back-to-top-btn {
    color: rgba(220, 222, 228, 0.68);
    display: inline-flex;
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: rgb(168 168 174 / 0.5);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
[data-theme="light"] .back-to-top-btn {
  color: rgba(26, 26, 46, 0.44);
}
.back-to-top-btn {
  touch-action: manipulation;
  border: 1px solid transparent;
}

.back-to-top-btn:hover {
  color: var(--color-primary);
  border-color: rgba(var(--color-primary-rgb), 0.3);
  background: rgba(var(--color-primary-rgb), 0.06);
  box-shadow: 0 0 16px rgba(var(--color-primary-rgb), 0.12);
  transform: translateY(-2px);
}

.back-to-top-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--color-background) 88%, transparent),
    0 0 0 4px rgba(var(--color-primary-rgb), 0.45);
}

/* ============================================
   FOOTER SOCIAL LINK ENHANCED HOVER
   ============================================ */
.footer-social-link {
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  background: rgba(var(--color-primary-rgb), 0.05);
  color: rgba(229, 231, 235, 0.6);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-social-link:hover {
  border-color: rgba(var(--color-primary-rgb), 0.45);
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary);
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.15), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.footer-social-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--color-background) 88%, transparent),
    0 0 0 4px rgba(var(--color-primary-rgb), 0.5);
}

/* ============================================
   TEAM SOCIAL BUTTON IMPROVEMENTS
   ============================================ */
.team-social-btn {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
@media (max-width: 374px) {
  .landing-page-wrapper footer form.team-social-btn {
    flex-direction: column;
    gap: 8px;
  }

  .landing-page-wrapper footer form.team-social-btn button {
    width: 100%;
  }
}
.team-social-btn {
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
  background: rgba(var(--color-primary-rgb), 0.06);
}

.team-social-btn:hover {
  border-color: rgba(var(--color-primary-rgb), 0.5);
  background: rgba(var(--color-primary-rgb), 0.14);
  box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.2);
}

.team-social-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.5),
    0 0 0 4px rgba(var(--color-primary-rgb), 0.5);
}

/* ============================================
   LIVE DEMO WIDGET — MOBILE OVERRIDES
   Reset the aggressive global button/SVG styles
   so the LiveDemo's own Tailwind responsive
   classes take effect on mobile.
   ============================================ */
@media (max-width: 767px) {
  /* Inline react-icons SVGs inside LiveDemo should keep intrinsic size (1em).
     The global rule (line ~2875) forces height:auto which can collapse them
     when they lack an explicit viewBox. */
  .landing-page-wrapper [aria-label="Interactive log analysis demo"] svg:not([viewBox]) {
    height: 1em !important;
    width: 1em !important;
    max-width: none !important;
    flex-shrink: 0;
  }
}

/* Extra-small phones: tighter LiveDemo padding */
@media (max-width: 479px) {
  .landing-page-wrapper [aria-label="Interactive log analysis demo"] {
    padding: 0.5rem !important;
  }

  /* Sample scenario buttons — smaller on tiny screens */
  .landing-page-wrapper [aria-label="Interactive log analysis demo"] .flex-wrap button[type="button"] {
    font-size: 11px !important;
    padding: 6px 10px !important;
    min-height: 36px !important;
  }

  /* Analysis panel inner padding */
  .landing-page-wrapper [aria-label="Interactive log analysis demo"] .bg-mineral-900 {
    padding: 0.625rem !important;
  }
}

/* ============================================
   LANDING PAGE — ULTRA-NARROW MOBILE REFINEMENTS
   ============================================ */

/* Trust metrics grid: single column on very small phones */
@media (max-width: 374px) {
  .trust-metrics-grid {
    grid-template-columns: 1fr !important;
  }

  .trust-metrics-grid > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(224, 30, 69, 0.12) !important;
    border-bottom: 1px solid rgba(var(--color-primary-rgb, 224, 30, 69), 0.12) !important;
  }

  .trust-metrics-grid > div:last-child {
    border-bottom: none !important;
  }
}

/* Footer newsletter form: stack on narrow phones */
@media (max-width: 374px) {
  .landing-page-wrapper footer form.flex {
    flex-direction: column;
    gap: 8px;
  }

  .landing-page-wrapper footer form.flex button {
    width: 100%;
  }
}

/* Footer quick links: full width single column on ultra-small */
@media (max-width: 374px) {
  .landing-page-wrapper footer .grid.grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* CTA buttons: full width on narrow phones */
@media (max-width: 374px) {
  .landing-page-wrapper .cta-button,
  .landing-page-wrapper .neon-button {
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 14px !important;
  }
}

/* Services section tabs: smaller text on mobile */
@media (max-width: 479px) {
  .landing-page-wrapper [role="tablist"] button {
    font-size: 12px !important;
    padding: 8px 12px !important;
    min-height: 40px;
  }
}

/* FAQ section: tighter padding on small phones */
@media (max-width: 479px) {
  .landing-page-wrapper details summary {
    padding: 12px 14px !important;
    font-size: 14px !important;
    gap: 8px !important;
  }
}

/* Generic landing section: reduce horizontal padding */
@media (max-width: 374px) {
  .landing-page-wrapper section {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Services tab scroll: fade-out hint on right edge (mobile) */
@media (max-width: 767px) {
  .landing-page-wrapper [aria-label="Service categories"] {
    position: relative;
  }

  /* Scroll fade hint on the services tab container */
  .landing-page-wrapper .overflow-x-auto:has([aria-label="Service categories"])::after {
    content: '';
    position: -webkit-sticky;
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    flex-shrink: 0;
    pointer-events: none;
    background: linear-gradient(to left, #060607, transparent);
    background: linear-gradient(to left, var(--color-background, #060607), transparent);
  }
}

/* Mobile nav: ensure safe-area padding on bottom for notched phones */
@media (max-width: 1023px) {
  .landing-page-wrapper nav .overscroll-contain {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================
   LIGHT MODE OVERRIDES
   Scoped via data-theme="light" (set by ThemeContext)
   ============================================ */

/* --- Text readability on light backgrounds --- */
[data-theme="light"] .text-mineral-300 {
  color: rgba(26, 26, 46, 0.78) !important;
}

[data-theme="light"] .text-mineral-400 {
  color: rgba(90, 90, 114, 0.85) !important;
}

[data-theme="light"] .text-mineral-300\/70 {
  color: rgba(26, 26, 46, 0.6) !important;
}

[data-theme="light"] .text-mineral-300\/60 {
  color: rgba(26, 26, 46, 0.52) !important;
}

[data-theme="light"] .text-mineral-300\/50 {
  color: rgba(26, 26, 46, 0.44) !important;
}

[data-theme="light"] .text-mineral-300\/80 {
  color: rgba(26, 26, 46, 0.7) !important;
}

/* --- Section text elements --- */
[data-theme="light"] .section-description {
  color: rgba(90, 90, 114, 0.9) !important;
}

[data-theme="light"] .feature-description {
  color: rgba(90, 90, 114, 0.85) !important;
}

[data-theme="light"] .stat-label {
  color: rgba(90, 90, 114, 0.85) !important;
}

[data-theme="light"] .card-title {
  color: rgba(26, 26, 46, 0.95) !important;
}

[data-theme="light"] .card-subtitle {
  color: rgba(90, 90, 114, 0.8) !important;
}

[data-theme="light"] .partner-name {
  color: rgba(26, 26, 46, 0.88) !important;
}

[data-theme="light"] .trust-text {
  color: rgba(90, 90, 114, 0.75) !important;
}

[data-theme="light"] .faq-question {
  color: rgba(26, 26, 46, 0.92) !important;
}

[data-theme="light"] .faq-answer {
  color: rgba(90, 90, 114, 0.8) !important;
}

[data-theme="light"] .footer-description {
  color: rgba(90, 90, 114, 0.75) !important;
}

[data-theme="light"] .footer-link-text {
  color: rgba(90, 90, 114, 0.65) !important;
}

[data-theme="light"] .pricing-feature-text {
  color: rgba(90, 90, 114, 0.85) !important;
}

[data-theme="light"] .pricing-amount {
  color: rgba(26, 26, 46, 0.95) !important;
}

[data-theme="light"] .pricing-period {
  color: rgba(90, 90, 114, 0.7) !important;
}

[data-theme="light"] .pricing-type {
  color: rgba(90, 90, 114, 0.65) !important;
}

[data-theme="light"] .integration-name {
  color: rgba(26, 26, 46, 0.75) !important;
}

/* --- Team section --- */
[data-theme="light"] .team-member-bio {
  color: rgba(90, 90, 114, 0.75) !important;
}

[data-theme="light"] .team-member-name {
  color: rgba(26, 26, 46, 0.95) !important;
}

/* --- Partner section --- */
[data-theme="light"] .partner-logo-name {
  color: rgba(26, 26, 46, 0.88) !important;
  text-shadow: none !important;
}

[data-theme="light"] .partner-description {
  color: rgba(90, 90, 114, 0.65) !important;
}

/* --- FAQ section --- */
[data-theme="light"] .faq-question-text {
  color: rgba(26, 26, 46, 0.92) !important;
}

[data-theme="light"] .faq-answer-text {
  color: rgba(90, 90, 114, 0.82) !important;
}

/* --- Section headers --- */
[data-theme="light"] .section-heading {
  color: rgba(26, 26, 46, 0.95) !important;
}

[data-theme="light"] .section-subheading {
  color: rgba(90, 90, 114, 0.82) !important;
}

/* --- Trust badges --- */
[data-theme="light"] .trust-badge {
  color: rgba(90, 90, 114, 0.88) !important;
  background: rgba(224, 30, 69, 0.06) !important;
  border-color: rgba(224, 30, 69, 0.12) !important;
}

/* --- Contact section --- */
[data-theme="light"] .contact-label {
  color: rgba(90, 90, 114, 0.78) !important;
}

[data-theme="light"] .contact-value {
  color: rgba(26, 26, 46, 0.9) !important;
}

/* --- Services section --- */
[data-theme="light"] .services-tabs-list {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .services-tab-button {
  color: rgba(90, 90, 114, 0.8) !important;
}

[data-theme="light"] .services-tab-button:hover {
  color: rgba(26, 26, 46, 0.9) !important;
  background: rgba(224, 30, 69, 0.06) !important;
}

[data-theme="light"] .services-tab-button[data-headlessui-state~="active"] {
  color: rgba(26, 26, 46, 0.95) !important;
  background: rgba(224, 30, 69, 0.1) !important;
}

[data-theme="light"] .services-feature-text {
  color: rgba(90, 90, 114, 0.88) !important;
}

[data-theme="light"] .services-feature-text strong {
  color: rgba(26, 26, 46, 0.95) !important;
}

/* --- Hero animated gradient background --- */
[data-theme="light"] .animated-gradient {
  background: linear-gradient(-45deg, #F0F0F4, #F5F5F8, #F0F0F4, #EDE9F5) !important;
}

/* --- Text shimmer for light mode --- */
[data-theme="light"] .text-shimmer {
  background-image: linear-gradient(
    90deg,
    rgba(26, 26, 46, 0.92) 0%,
    rgba(0, 140, 200, 0.95) 30%,
    rgba(120, 60, 220, 0.95) 55%,
    rgba(224, 30, 69, 0.95) 78%,
    rgba(26, 26, 46, 0.92) 100%
  ) !important;
}

/* --- Orb adjustments for light mode --- */
[data-theme="light"] .orb {
  opacity: 0.12 !important;
}

/* --- Particle adjustments --- */
[data-theme="light"] .particle {
  opacity: 0.18 !important;
}

/* --- Futuristic grid on light --- */
[data-theme="light"] .futuristic-grid {
  opacity: 0.25 !important;
}

/* --- Input fields --- */
[data-theme="light"] .cyber-input {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

[data-theme="light"] .cyber-input:hover:not(:focus) {
  border-color: var(--color-border-hover) !important;
  background: var(--color-paper) !important;
}

[data-theme="light"] .cyber-input:focus {
  background: var(--color-paper) !important;
}

/* --- Select options --- */
[data-theme="light"] .landing-page-wrapper select.cyber-input option {
  background: var(--color-paper);
  color: var(--color-text-primary);
}

/* --- Neon (secondary) button on dark hero section --- */
[data-theme="light"] .neon-button--on-dark {
  color: rgba(26, 26, 46, 0.88);
  border-color: rgba(26, 26, 46, 0.2);
  background: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .neon-button--on-dark:hover {
  border-color: rgba(26, 26, 46, 0.35);
  background: rgba(255, 255, 255, 0.7);
}

/* --- Secondary CTA button --- */
[data-theme="light"] .cta-button-secondary {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(26, 26, 46, 0.15) !important;
  color: rgba(26, 26, 46, 0.88) !important;
}

[data-theme="light"] .cta-button-secondary:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(26, 26, 46, 0.25) !important;
  color: rgba(26, 26, 46, 0.95) !important;
}

/* --- Threat highlights --- */
[data-theme="light"] .threat-critical {
  background-color: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

[data-theme="light"] .threat-high {
  background-color: rgba(234, 88, 12, 0.08);
  color: #c2410c;
}

[data-theme="light"] .threat-medium {
  background-color: rgba(180, 130, 0, 0.08);
  color: #a16207;
}

/* --- Live demo section --- */
[data-theme="light"] .live-demo-container {
  background: var(--color-paper) !important;
  border-color: var(--color-border) !important;
}

[data-theme="light"] .live-demo-header {
  background: var(--color-surface) !important;
  border-bottom-color: var(--color-border) !important;
}

[data-theme="light"] .live-demo-title {
  color: var(--color-text-primary) !important;
}

/* --- Wayfinding panel --- */
[data-theme="light"] .wayfinding-panel {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: var(--color-border) !important;
}

[data-theme="light"] .wayfinding-panel-header {
  border-bottom-color: var(--color-border) !important;
}

[data-theme="light"] .wayfinding-panel-title {
  color: var(--color-text-primary) !important;
}

[data-theme="light"] .wayfinding-panel-item {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: var(--color-border) !important;
}

[data-theme="light"] .wayfinding-panel-item:hover {
  background: rgba(224, 30, 69, 0.04) !important;
  border-color: rgba(224, 30, 69, 0.2) !important;
}

/* --- Demo card --- */
[data-theme="light"] .demo-card {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(224, 30, 69, 0.12) !important;
}

/* --- Navigator badge --- */
[data-theme="light"] .navigator-badge {
  color: rgba(90, 90, 114, 0.9) !important;
}

/* --- Code snippet --- */
[data-theme="light"] .code-snippet {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

/* --- Tooltip light mode --- */
[data-theme="light"] .ant-tooltip .ant-tooltip-inner {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(245, 245, 248, 0.98) 100%
  ) !important;
  border-color: rgba(224, 30, 69, 0.2) !important;
  color: rgba(26, 26, 46, 0.92) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04) inset,
    0 0 20px rgba(224, 30, 69, 0.05) !important;
}

[data-theme="light"] .ant-tooltip .ant-tooltip-arrow::before,
[data-theme="light"] .ant-tooltip .ant-tooltip-arrow::after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.99) 0%,
    rgba(245, 245, 248, 0.99) 100%
  ) !important;
  border-color: rgba(224, 30, 69, 0.2) !important;
}

[data-theme="light"] .ant-tooltip .ant-tooltip-title {
  color: rgba(26, 26, 46, 0.95) !important;
}

[data-theme="light"] .ant-tooltip .ant-tooltip-inner .ant-tooltip-text {
  color: rgba(90, 90, 114, 0.88) !important;
}

/* --- Metallic card shadow --- */
[data-theme="light"] .metallic-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .metallic-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1),
              0 0 20px rgba(var(--color-primary-rgb), 0.04) !important;
}

/* --- Scrolled header shadow --- */
[data-theme="light"] .landing-header.landing-header--scrolled {
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.08),
    0 1px 0 color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}

/* --- Mobile nav panel shadow --- */
[data-theme="light"] .mobile-nav-panel {
  box-shadow:
    -16px 0 48px rgba(0, 0, 0, 0.1),
    -2px 0 0 color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}

/* --- Mobile nav backdrop --- */
[data-theme="light"] .mobile-nav-backdrop {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* --- Mobile nav active link --- */
[data-theme="light"] .mobile-nav-link--active {
  color: var(--color-text-primary) !important;
}

/* --- Footer social link colors --- */
[data-theme="light"] .footer-social-link {
  color: rgba(90, 90, 114, 0.6) !important;
}

[data-theme="light"] .footer-social-link:hover {
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* --- Hero text-white override for light mode --- */
[data-theme="light"] .landing-page-wrapper .animated-gradient .text-white {
  color: var(--color-text-primary) !important;
}

/* --- Mobile form inputs on light --- */
@media (max-width: 767px) {
  [data-theme="light"] .landing-page-wrapper input[type="text"],
  [data-theme="light"] .landing-page-wrapper input[type="email"],
  [data-theme="light"] .landing-page-wrapper input[type="password"],
  [data-theme="light"] .landing-page-wrapper input[type="number"],
  [data-theme="light"] .landing-page-wrapper input[type="tel"],
  [data-theme="light"] .landing-page-wrapper input[type="url"],
  [data-theme="light"] .landing-page-wrapper input[type="search"],
  [data-theme="light"] .landing-page-wrapper textarea,
  [data-theme="light"] .landing-page-wrapper select {
    background: var(--color-paper) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }

  /* FAQ/accordion items */
  [data-theme="light"] .landing-page-wrapper .faq-item,
  [data-theme="light"] .landing-page-wrapper .accordion-item {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: var(--color-border) !important;
  }

  [data-theme="light"] .landing-page-wrapper .faq-answer,
  [data-theme="light"] .landing-page-wrapper .accordion-content {
    color: rgba(90, 90, 114, 0.82) !important;
  }

  /* FAQ question active feedback */
  [data-theme="light"] .landing-page-wrapper .faq-question:active,
  [data-theme="light"] .landing-page-wrapper .accordion-header:active {
    background: rgba(0, 0, 0, 0.03) !important;
  }

  /* Mobile menu panel */
  [data-theme="light"] .landing-page-wrapper .mobile-menu-panel,
  [data-theme="light"] .landing-page-wrapper .nav-panel,
  [data-theme="light"] .landing-page-wrapper .menu-panel {
    background: var(--color-paper) !important;
    border-left-color: var(--color-border) !important;
  }

  /* Carousel dots */
  [data-theme="light"] .landing-page-wrapper .carousel-dot,
  [data-theme="light"] .landing-page-wrapper .slider-dot,
  [data-theme="light"] .landing-page-wrapper .testimonial-dot {
    background: rgba(0, 0, 0, 0.2) !important;
  }

  /* Carousel arrows */
  [data-theme="light"] .landing-page-wrapper .carousel-arrow,
  [data-theme="light"] .landing-page-wrapper .slider-arrow {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
  }

  /* Mobile menu close button */
  [data-theme="light"] .landing-page-wrapper .mobile-menu-close,
  [data-theme="light"] .landing-page-wrapper .nav-panel-close {
    background: rgba(0, 0, 0, 0.04) !important;
  }
}

/* --- Tailwind bg-mineral-* overrides for light mode --- */
[data-theme="light"] .landing-page-wrapper .bg-mineral-950\/40,
[data-theme="light"] .landing-page-wrapper .bg-mineral-950\/30,
[data-theme="light"] .landing-page-wrapper .bg-mineral-950\/35,
[data-theme="light"] .landing-page-wrapper .bg-mineral-950\/50,
[data-theme="light"] .landing-page-wrapper .bg-mineral-950\/60,
[data-theme="light"] .landing-page-wrapper .bg-mineral-950\/70,
[data-theme="light"] .landing-page-wrapper .bg-mineral-950\/80,
[data-theme="light"] .landing-page-wrapper .bg-mineral-950\/90 {
  background-color: rgba(240, 240, 244, 0.7) !important;
}

[data-theme="light"] .landing-page-wrapper .bg-mineral-900\/40,
[data-theme="light"] .landing-page-wrapper .bg-mineral-900\/50,
[data-theme="light"] .landing-page-wrapper .bg-mineral-900\/55,
[data-theme="light"] .landing-page-wrapper .bg-mineral-900\/60,
[data-theme="light"] .landing-page-wrapper .bg-mineral-900\/80,
[data-theme="light"] .landing-page-wrapper .bg-mineral-900\/90,
[data-theme="light"] .landing-page-wrapper .bg-mineral-900\/95 {
  background-color: rgba(240, 240, 244, 0.6) !important;
}

[data-theme="light"] .landing-page-wrapper .bg-mineral-800\/50,
[data-theme="light"] .landing-page-wrapper .bg-mineral-800\/80,
[data-theme="light"] .landing-page-wrapper .bg-mineral-800\/30 {
  background-color: rgba(224, 224, 230, 0.4) !important;
}

/* --- Tailwind text color overrides --- */
[data-theme="light"] .landing-page-wrapper .text-mineral-100 {
  color: rgba(26, 26, 46, 0.88) !important;
}

[data-theme="light"] .landing-page-wrapper .text-mineral-200 {
  color: rgba(26, 26, 46, 0.82) !important;
}

[data-theme="light"] .landing-page-wrapper .text-mineral-300 {
  color: rgba(26, 26, 46, 0.78) !important;
}

[data-theme="light"] .landing-page-wrapper .text-mineral-400 {
  color: rgba(90, 90, 114, 0.85) !important;
}

[data-theme="light"] .landing-page-wrapper .text-mineral-400\/90 {
  color: rgba(90, 90, 114, 0.78) !important;
}

[data-theme="light"] .landing-page-wrapper .text-mineral-500\/50 {
  color: rgba(90, 90, 114, 0.45) !important;
}

/* hover:text-white -> dark text on light mode */
[data-theme="light"] .landing-page-wrapper *:hover.hover\:text-white {
  color: var(--color-text-primary) !important;
}

/* --- Header nav link focus ring offset for light mode --- */
[data-theme="light"] .landing-page-wrapper .focus-visible\:ring-offset-\[\#060607\] {
  --tw-ring-offset-color: var(--color-background) !important;
}

/* --- Border color overrides for mineral borders --- */
[data-theme="light"] .landing-page-wrapper .border-mineral-700\/25,
[data-theme="light"] .landing-page-wrapper .border-mineral-700\/30,
[data-theme="light"] .landing-page-wrapper .border-mineral-700\/40,
[data-theme="light"] .landing-page-wrapper .border-mineral-700\/50,
[data-theme="light"] .landing-page-wrapper .border-mineral-600\/30,
[data-theme="light"] .landing-page-wrapper .border-mineral-600\/40,
[data-theme="light"] .landing-page-wrapper .border-mineral-600\/50,
[data-theme="light"] .landing-page-wrapper .border-mineral-600\/60,
[data-theme="light"] .landing-page-wrapper .border-mineral-600\/80,
[data-theme="light"] .landing-page-wrapper .border-mineral-800\/60 {
  border-color: var(--color-border) !important;
}

/* --- Shadow overrides for light mode --- */
[data-theme="light"] .landing-page-wrapper .shadow-black\/10,
[data-theme="light"] .landing-page-wrapper .shadow-black\/15,
[data-theme="light"] .landing-page-wrapper .shadow-black\/20 {
  --tw-shadow-color: rgba(0, 0, 0, 0.06) !important;
}

/* --- Remove OLED dark override in light mode --- */
@media (max-width: 639px) {
  [data-theme="light"] .landing-page-wrapper {
    background-color: var(--color-background) !important;
  }

  [data-theme="light"] .glass-card {
    background: color-mix(in srgb, var(--color-elevated) 85%, transparent) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  [data-theme="light"] .metallic-card {
    background: color-mix(in srgb, var(--color-elevated) 92%, transparent) !important;
  }
}

/* ============================================================
   Accessibility: comprehensive prefers-reduced-motion overrides
   Pauses decorative CSS animations that were not yet covered.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .animated-gradient {
    animation: none !important;
  }

  .text-shimmer,
  .hero-title-accent.text-shimmer {
    animation: none !important;
  }

  .border-glow-animate::after {
    animation: none !important;
    opacity: 0.5;
  }

  .orb,
  .orb--a,
  .orb--b,
  .orb--c {
    animation: none !important;
  }

  .blink-cursor {
    animation: none !important;
  }

  .trusted-by-marquee__track {
    animation: none !important;
  }

  /* Disable any lingering pulse / glow animations */
  .animate-pulse,
  [class*="animate-pulse"] {
    animation: none !important;
  }

  /* Disable decorative hover transforms site-wide */
  .metallic-card,
  .glass-card,
  .icon-container,
  .footer-social-link,
  .team-social-btn {
    transition: none !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  .hover\:text-mineral-300:hover {
    color: rgba(220, 222, 228, 0.95) !important;
  }

  @media (max-width: 640px) {
    /* Better text sizing on mobile */
    .hover\:text-mineral-300:hover {
      color: rgba(229, 231, 235, 0.97) !important;
    }

    /* Larger touch targets */

    /* Improved card padding */

    /* Feature card grid adjustment */

    /* Partner card sizing */

    /* Trust metrics bar */
  }
  .group:hover .group-hover\:text-mineral-300\/90 {
    color: rgba(220, 222, 228, 0.92) !important;
  }
}
.last\:mb-0:last-child {
    margin-bottom: 0px;
}
.last\:pb-0:last-child {
    padding-bottom: 0px;
}
.open\:bg-mineral-900\/55[open] {
    background-color: rgb(18 18 20 / 0.55);
}
.open\:shadow-md[open] {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.open\:shadow-black\/15[open] {
    --tw-shadow-color: rgb(0 0 0 / 0.15);
    --tw-shadow: var(--tw-shadow-colored);
}
@media (hover: hover) and (pointer: fine) {
    .hover\:scale-110:hover {
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .hover\:border-accent\/15:hover {
        border-color: rgb(224 30 69 / 0.15);
    }
    .hover\:border-accent\/20:hover {
        border-color: rgb(224 30 69 / 0.2);
    }
    .hover\:border-accent\/25:hover {
        border-color: rgb(224 30 69 / 0.25);
    }
    .hover\:border-accent\/30:hover {
        border-color: rgb(224 30 69 / 0.3);
    }
    .hover\:border-accent\/35:hover {
        border-color: rgb(224 30 69 / 0.35);
    }
    .hover\:border-accent\/40:hover {
        border-color: rgb(224 30 69 / 0.4);
    }
    .hover\:border-accent\/45:hover {
        border-color: rgb(224 30 69 / 0.45);
    }
    .hover\:border-accent\/50:hover {
        border-color: rgb(224 30 69 / 0.5);
    }
    .hover\:border-accent\/60:hover {
        border-color: rgb(224 30 69 / 0.6);
    }
    .hover\:border-mineral-500\/60:hover {
        border-color: rgb(90 90 94 / 0.6);
    }
    .hover\:border-mineral-600\/40:hover {
        border-color: rgb(61 61 66 / 0.4);
    }
    .hover\:border-mineral-600\/60:hover {
        border-color: rgb(61 61 66 / 0.6);
    }
    .hover\:border-red-500\/30:hover {
        border-color: rgb(239 68 68 / 0.3);
    }
    .hover\:bg-\[rgba\(224\2c 30\2c 69\2c 0\.14\)\]:hover {
        background-color: rgba(224,30,69,0.14);
    }
    .hover\:bg-\[var\(--color-elevated-hover\2c _rgba\(255\2c 255\2c 255\2c 0\.03\)\)\]:hover {
        background-color: rgba(255,255,255,0.03);
        background-color: var(--color-elevated-hover, rgba(255,255,255,0.03));
    }
    .hover\:bg-accent\/10:hover {
        background-color: rgb(224 30 69 / 0.1);
    }
    .hover\:bg-accent\/15:hover {
        background-color: rgb(224 30 69 / 0.15);
    }
    .hover\:bg-accent\/5:hover {
        background-color: rgb(224 30 69 / 0.05);
    }
    .hover\:bg-mineral-800\/30:hover {
        background-color: rgb(26 26 28 / 0.3);
    }
    .hover\:bg-mineral-800\/80:hover {
        background-color: rgb(26 26 28 / 0.8);
    }
    .hover\:bg-mineral-900\/50:hover {
        background-color: rgb(18 18 20 / 0.5);
    }
    .hover\:bg-mineral-900\/80:hover {
        background-color: rgb(18 18 20 / 0.8);
    }
    .hover\:bg-mineral-900\/95:hover {
        background-color: rgb(18 18 20 / 0.95);
    }
    .hover\:bg-mineral-950\/65:hover {
        background-color: rgb(5 5 6 / 0.65);
    }
    .hover\:font-bold:hover {
        font-weight: 700;
    }
    .hover\:text-\[var\(--color-text-primary\)\]:hover {
        color: var(--color-text-primary);
    }
    .hover\:text-accent:hover {
        color: #E01E45;
    }
    .hover\:text-accent-light:hover {
        color: #FF3D65;
    }
    .hover\:text-accent-lighter:hover {
        color: #FF6B81;
    }
    .hover\:text-mineral-200:hover {
        color: #D1D1D1;
    }
    .hover\:text-mineral-300:hover {
        color: #A8A8AE;
    }
    .hover\:text-red-400:hover {
        color: #f87171;
    }
    .hover\:text-white:hover {
        color: #fff;
    }
    .hover\:shadow-\[0_0_20px_rgba\(224\2c 30\2c 69\2c 0\.35\)\2c inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.15\)\]:hover {
        --tw-shadow: 0 0 20px rgba(224,30,69,0.35),inset 0 1px 0 rgba(255,255,255,0.15);
        --tw-shadow-colored: 0 0 20px var(--tw-shadow-color), inset 0 1px 0 var(--tw-shadow-color);
        box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    .hover\:shadow-\[0_0_24px_rgba\(224\2c 30\2c 69\2c 0\.12\)\2c 0_0_48px_rgba\(224\2c 30\2c 69\2c 0\.06\)\]:hover {
        --tw-shadow: 0 0 24px rgba(224,30,69,0.12),0 0 48px rgba(224,30,69,0.06);
        --tw-shadow-colored: 0 0 24px var(--tw-shadow-color), 0 0 48px var(--tw-shadow-color);
        box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    .hover\:shadow-\[0_0_30px_rgba\(224\2c 30\2c 69\2c 0\.06\)\]:hover {
        --tw-shadow: 0 0 30px rgba(224,30,69,0.06);
        --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
        box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    .hover\:shadow-\[0_4px_32px_-6px_rgba\(0\2c 0\2c 0\2c 0\.6\)\2c inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.05\)\]:hover {
        --tw-shadow: 0 4px 32px -6px rgba(0,0,0,0.6),inset 0 1px 0 0 rgba(255,255,255,0.05);
        --tw-shadow-colored: 0 4px 32px -6px var(--tw-shadow-color), inset 0 1px 0 0 var(--tw-shadow-color);
        box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    .hover\:brightness-110:hover {
        --tw-brightness: brightness(1.1);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
}
.focus\:border-accent\/60:focus {
    border-color: rgb(224 30 69 / 0.6);
}
.focus\:bg-mineral-950\/80:focus {
    background-color: rgb(5 5 6 / 0.8);
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-accent\/20:focus {
    --tw-ring-color: rgb(224 30 69 / 0.2);
}
.focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-inset:focus-visible {
    --tw-ring-inset: inset;
}
.focus-visible\:ring-accent\/40:focus-visible {
    --tw-ring-color: rgb(224 30 69 / 0.4);
}
.focus-visible\:ring-accent\/45:focus-visible {
    --tw-ring-color: rgb(224 30 69 / 0.45);
}
.focus-visible\:ring-accent\/50:focus-visible {
    --tw-ring-color: rgb(224 30 69 / 0.5);
}
.focus-visible\:ring-accent\/55:focus-visible {
    --tw-ring-color: rgb(224 30 69 / 0.55);
}
.focus-visible\:ring-accent\/60:focus-visible {
    --tw-ring-color: rgb(224 30 69 / 0.6);
}
.focus-visible\:ring-red-500\/40:focus-visible {
    --tw-ring-color: rgb(239 68 68 / 0.4);
}
.focus-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-\[\#060607\]:focus-visible {
    --tw-ring-offset-color: #060607;
}
.focus-visible\:ring-offset-\[var\(--color-background\)\]:focus-visible {
    --tw-ring-offset-color: var(--color-background);
}
.focus-visible\:ring-offset-mineral-900:focus-visible {
    --tw-ring-offset-color: #121214;
}
.active\:scale-95:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:bg-accent\/10:active {
    background-color: rgb(224 30 69 / 0.1);
}
.active\:text-white:active {
    color: #fff;
}
.disabled\:pointer-events-none:disabled {
    pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
}
.disabled\:opacity-30:disabled {
    opacity: 0.3;
}
.disabled\:opacity-50:disabled {
    opacity: 0.5;
}
.group[open] .group-open\:rotate-90 {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (hover: hover) and (pointer: fine) {
    .group:hover .group-hover\:w-3\/4 {
        width: 75%;
    }
    .group:hover .group-hover\:scale-105 {
        --tw-scale-x: 1.05;
        --tw-scale-y: 1.05;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .group:hover .group-hover\:scale-110 {
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .group:hover .group-hover\:border-accent\/35 {
        border-color: rgb(224 30 69 / 0.35);
    }
    .group:hover .group-hover\:border-emerald-500\/35 {
        border-color: rgb(16 185 129 / 0.35);
    }
    .group:hover .group-hover\:bg-accent\/10 {
        background-color: rgb(224 30 69 / 0.1);
    }
    .group:hover .group-hover\:bg-accent\/15 {
        background-color: rgb(224 30 69 / 0.15);
    }
    .group:hover .group-hover\:text-accent-light {
        color: #FF3D65;
    }
    .group:hover .group-hover\:text-accent-light\/95 {
        color: rgb(255 61 101 / 0.95);
    }
    .group:hover .group-hover\:text-mineral-200 {
        color: #D1D1D1;
    }
    .group:hover .group-hover\:text-mineral-300\/85 {
        color: rgb(168 168 174 / 0.85);
    }
    .group:hover .group-hover\:text-mineral-300\/90 {
        color: rgb(168 168 174 / 0.9);
    }
    .group:hover .group-hover\:opacity-100 {
        opacity: 1;
    }
    .group:hover .group-hover\:shadow-\[0_0_16px_rgba\(224\2c 30\2c 69\2c 0\.25\)\] {
        --tw-shadow: 0 0 16px rgba(224,30,69,0.25);
        --tw-shadow-colored: 0 0 16px var(--tw-shadow-color);
        box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
}
.data-\[closed\]\:translate-y-1\.5[data-closed] {
    --tw-translate-y: 0.375rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[open\]\:text-accent-light[data-open] {
    color: #FF3D65;
}
.data-\[closed\]\:opacity-0[data-closed] {
    opacity: 0;
}
.data-\[focus\]\:ring-2[data-focus] {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.data-\[focus\]\:ring-accent\/50[data-focus] {
    --tw-ring-color: rgb(224 30 69 / 0.5);
}
.data-\[enter\]\:duration-200[data-enter] {
    transition-duration: 200ms;
}
.data-\[leave\]\:duration-100[data-leave] {
    transition-duration: 100ms;
}
.data-\[enter\]\:ease-out[data-enter] {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.data-\[leave\]\:ease-in[data-leave] {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes pulse {
        50% {
            opacity: .5;
        }
    }
    .motion-safe\:animate-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
}
@media (min-width: 400px) {
    .min-\[400px\]\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .min-\[400px\]\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .min-\[400px\]\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}
@media (min-width: 480px) {
    .min-\[480px\]\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 640px) {
    .sm\:bottom-6 {
        bottom: 1.5rem;
    }
    .sm\:left-4 {
        left: 1rem;
    }
    .sm\:right-4 {
        right: 1rem;
    }
    .sm\:top-4 {
        top: 1rem;
    }
    .sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .sm\:mx-4 {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .sm\:mb-10 {
        margin-bottom: 2.5rem;
    }
    .sm\:mb-12 {
        margin-bottom: 3rem;
    }
    .sm\:mb-14 {
        margin-bottom: 3.5rem;
    }
    .sm\:mb-16 {
        margin-bottom: 4rem;
    }
    .sm\:mb-20 {
        margin-bottom: 5rem;
    }
    .sm\:mb-3 {
        margin-bottom: 0.75rem;
    }
    .sm\:mb-5 {
        margin-bottom: 1.25rem;
    }
    .sm\:mb-6 {
        margin-bottom: 1.5rem;
    }
    .sm\:mb-7 {
        margin-bottom: 1.75rem;
    }
    .sm\:mb-8 {
        margin-bottom: 2rem;
    }
    .sm\:mr-1 {
        margin-right: 0.25rem;
    }
    .sm\:mt-0 {
        margin-top: 0px;
    }
    .sm\:mt-1 {
        margin-top: 0.25rem;
    }
    .sm\:mt-10 {
        margin-top: 2.5rem;
    }
    .sm\:mt-12 {
        margin-top: 3rem;
    }
    .sm\:mt-16 {
        margin-top: 4rem;
    }
    .sm\:mt-3 {
        margin-top: 0.75rem;
    }
    .sm\:mt-4 {
        margin-top: 1rem;
    }
    .sm\:mt-5 {
        margin-top: 1.25rem;
    }
    .sm\:mt-8 {
        margin-top: 2rem;
    }
    .sm\:block {
        display: block;
    }
    .sm\:inline {
        display: inline;
    }
    .sm\:flex {
        display: flex;
    }
    .sm\:inline-flex {
        display: inline-flex;
    }
    .sm\:hidden {
        display: none;
    }
    .sm\:aspect-\[4\/5\] {
        aspect-ratio: 4/5;
    }
    .sm\:h-10 {
        height: 2.5rem;
    }
    .sm\:h-12 {
        height: 3rem;
    }
    .sm\:h-20 {
        height: 5rem;
    }
    .sm\:h-4 {
        height: 1rem;
    }
    .sm\:h-\[1\.5em\] {
        height: 1.5em;
    }
    .sm\:max-h-44 {
        max-height: 11rem;
    }
    .sm\:max-h-\[90vh\] {
        max-height: 90vh;
    }
    .sm\:min-h-0 {
        min-height: 0px;
    }
    .sm\:min-h-\[100px\] {
        min-height: 100px;
    }
    .sm\:min-h-\[7\.5rem\] {
        min-height: 7.5rem;
    }
    .sm\:w-10 {
        width: 2.5rem;
    }
    .sm\:w-12 {
        width: 3rem;
    }
    .sm\:w-16 {
        width: 4rem;
    }
    .sm\:w-4 {
        width: 1rem;
    }
    .sm\:w-44 {
        width: 11rem;
    }
    .sm\:w-auto {
        width: auto;
    }
    .sm\:min-w-0 {
        min-width: 0px;
    }
    .sm\:min-w-\[8rem\] {
        min-width: 8rem;
    }
    .sm\:max-w-none {
        max-width: none;
    }
    .sm\:flex-none {
        flex: none;
    }
    .sm\:basis-auto {
        flex-basis: auto;
    }
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .sm\:flex-row {
        flex-direction: row;
    }
    .sm\:flex-wrap {
        flex-wrap: wrap;
    }
    .sm\:items-start {
        align-items: flex-start;
    }
    .sm\:items-end {
        align-items: flex-end;
    }
    .sm\:items-center {
        align-items: center;
    }
    .sm\:justify-start {
        justify-content: flex-start;
    }
    .sm\:justify-end {
        justify-content: flex-end;
    }
    .sm\:justify-between {
        justify-content: space-between;
    }
    .sm\:gap-2 {
        gap: 0.5rem;
    }
    .sm\:gap-24 {
        gap: 6rem;
    }
    .sm\:gap-3 {
        gap: 0.75rem;
    }
    .sm\:gap-4 {
        gap: 1rem;
    }
    .sm\:gap-5 {
        gap: 1.25rem;
    }
    .sm\:gap-6 {
        gap: 1.5rem;
    }
    .sm\:gap-7 {
        gap: 1.75rem;
    }
    .sm\:gap-8 {
        gap: 2rem;
    }
    .sm\:gap-x-6 {
        column-gap: 1.5rem;
    }
    .sm\:gap-y-2 {
        row-gap: 0.5rem;
    }
    .sm\:gap-y-3 {
        row-gap: 0.75rem;
    }
    .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem * var(--tw-space-x-reverse));
        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
    }
    .sm\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
    }
    .sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
    }
    .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
    }
    .sm\:self-center {
        align-self: center;
    }
    .sm\:rounded-xl {
        border-radius: 0.75rem;
    }
    .sm\:border-0 {
        border-width: 0px;
    }
    .sm\:bg-transparent {
        background-color: transparent;
    }
    .sm\:p-10 {
        padding: 2.5rem;
    }
    .sm\:p-12 {
        padding: 3rem;
    }
    .sm\:p-14 {
        padding: 3.5rem;
    }
    .sm\:p-2 {
        padding: 0.5rem;
    }
    .sm\:p-3 {
        padding: 0.75rem;
    }
    .sm\:p-4 {
        padding: 1rem;
    }
    .sm\:p-6 {
        padding: 1.5rem;
    }
    .sm\:p-7 {
        padding: 1.75rem;
    }
    .sm\:p-8 {
        padding: 2rem;
    }
    .sm\:px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }
    .sm\:px-1 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .sm\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .sm\:px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .sm\:px-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .sm\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .sm\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .sm\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
    .sm\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .sm\:py-0 {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .sm\:py-0\.5 {
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
    }
    .sm\:py-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    .sm\:py-1\.5 {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }
    .sm\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .sm\:py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .sm\:py-2\.5 {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
    .sm\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .sm\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .sm\:py-28 {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
    .sm\:py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    .sm\:py-3\.5 {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
    }
    .sm\:py-32 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .sm\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .sm\:py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
    .sm\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .sm\:py-7 {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }
    .sm\:\!pb-12 {
        padding-bottom: 3rem !important;
    }
    .sm\:pb-10 {
        padding-bottom: 2.5rem;
    }
    .sm\:pb-28 {
        padding-bottom: 7rem;
    }
    .sm\:pb-32 {
        padding-bottom: 8rem;
    }
    .sm\:pb-6 {
        padding-bottom: 1.5rem;
    }
    .sm\:pb-\[max\(2\.5rem\2c calc\(env\(safe-area-inset-bottom\2c 0px\)\+1\.5rem\)\)\] {
        padding-bottom: max(2.5rem, calc(env(safe-area-inset-bottom,0px) + 1.5rem));
    }
    .sm\:pl-0 {
        padding-left: 0px;
    }
    .sm\:pl-6 {
        padding-left: 1.5rem;
    }
    .sm\:pt-12 {
        padding-top: 3rem;
    }
    .sm\:pt-2 {
        padding-top: 0.5rem;
    }
    .sm\:pt-28 {
        padding-top: 7rem;
    }
    .sm\:pt-36 {
        padding-top: 9rem;
    }
    .sm\:pt-40 {
        padding-top: 10rem;
    }
    .sm\:pt-5 {
        padding-top: 1.25rem;
    }
    .sm\:pt-8 {
        padding-top: 2rem;
    }
    .sm\:text-right {
        text-align: right;
    }
    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .sm\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .sm\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .sm\:text-\[0\.8125rem\] {
        font-size: 0.8125rem;
    }
    .sm\:text-\[11px\] {
        font-size: 11px;
    }
    .sm\:text-\[13px\] {
        font-size: 13px;
    }
    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .sm\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .sm\:font-normal {
        font-weight: 400;
    }
    .sm\:leading-\[1\.08\] {
        line-height: 1.08;
    }
    .sm\:leading-relaxed {
        line-height: 1.625;
    }
    .sm\:tracking-\[0\.2em\] {
        letter-spacing: 0.2em;
    }
    .sm\:underline {
        -webkit-text-decoration-line: underline;
                text-decoration-line: underline;
    }
    .sm\:underline-offset-2 {
        text-underline-offset: 2px;
    }
}
@media (min-width: 768px) {
    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .md\:mb-12 {
        margin-bottom: 3rem;
    }
    .md\:mb-14 {
        margin-bottom: 3.5rem;
    }
    .md\:mb-16 {
        margin-bottom: 4rem;
    }
    .md\:mb-20 {
        margin-bottom: 5rem;
    }
    .md\:mb-7 {
        margin-bottom: 1.75rem;
    }
    .md\:block {
        display: block;
    }
    .md\:flex {
        display: flex;
    }
    .md\:hidden {
        display: none;
    }
    .md\:h-20 {
        height: 5rem;
    }
    .md\:w-20 {
        width: 5rem;
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:flex-row-reverse {
        flex-direction: row-reverse;
    }
    .md\:flex-wrap {
        flex-wrap: wrap;
    }
    .md\:justify-center {
        justify-content: center;
    }
    .md\:gap-10 {
        gap: 2.5rem;
    }
    .md\:gap-14 {
        gap: 3.5rem;
    }
    .md\:gap-4 {
        gap: 1rem;
    }
    .md\:gap-6 {
        gap: 1.5rem;
    }
    .md\:gap-7 {
        gap: 1.75rem;
    }
    .md\:gap-8 {
        gap: 2rem;
    }
    .md\:p-10 {
        padding: 2.5rem;
    }
    .md\:p-3 {
        padding: 0.75rem;
    }
    .md\:p-5 {
        padding: 1.25rem;
    }
    .md\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .md\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .md\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
    .md\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .md\:py-0 {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .md\:\!pb-14 {
        padding-bottom: 3.5rem !important;
    }
    .md\:pb-12 {
        padding-bottom: 3rem;
    }
    .md\:pb-8 {
        padding-bottom: 2rem;
    }
    .md\:pt-32 {
        padding-top: 8rem;
    }
    .md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .md\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}
@media (min-width: 1024px) {
    .lg\:order-1 {
        order: 1;
    }
    .lg\:order-2 {
        order: 2;
    }
    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }
    .lg\:ml-4 {
        margin-left: 1rem;
    }
    .lg\:flex {
        display: flex;
    }
    .lg\:hidden {
        display: none;
    }
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .lg\:gap-10 {
        gap: 2.5rem;
    }
    .lg\:gap-16 {
        gap: 4rem;
    }
    .lg\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
    }
    .lg\:px-14 {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
    }
    .lg\:px-16 {
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .lg\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .lg\:pt-16 {
        padding-top: 4rem;
    }
    .lg\:pt-36 {
        padding-top: 9rem;
    }
    .lg\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .lg\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .lg\:text-\[3\.5rem\] {
        font-size: 3.5rem;
    }
    .lg\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .xl\:pt-40 {
        padding-top: 10rem;
    }
    .xl\:text-8xl {
        font-size: 6rem;
        line-height: 1;
    }
}
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
    display: none;
}
.\[\&_strong\]\:font-semibold strong {
    font-weight: 600;
}
.\[\&_strong\]\:tracking-normal strong {
    letter-spacing: 0em;
}
.\[\&_strong\]\:text-mineral-100 strong {
    color: #EBEBEB;
}

@keyframes modal-video {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes modal-video-inner {
    from {
        transform: translate(0, 100px)
    }
    to {
        transform: translate(0, 0)
    }
}

.modal-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    cursor: pointer;
    opacity: 1;
    animation-timing-function: ease-out;
    animation-duration: .3s;
    animation-name: modal-video;
    transition: opacity .3s ease-out
}

.modal-video-effect-exit {
    opacity: 0
}

.modal-video-effect-exit .modal-video-movie-wrap {
    transform: translate(0, 100px)
}

.modal-video-body {
    max-width: 940px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: table
}

.modal-video-inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%
}

.modal-video-movie-wrap {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
    background-color: #333;
    animation-timing-function: ease-out;
    animation-duration: .3s;
    animation-name: modal-video-inner;
    transform: translate(0, 0);
    transition: transform .3s ease-out
}

.modal-video-movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.modal-video-close-btn {
    position: absolute;
    z-index: 2;
    top: -35px;
    right: -35px;
    display: inline-block;
    width: 35px;
    height: 35px;
    overflow: hidden;
    border: none;
    background: transparent
}

.modal-video-close-btn:before {
    transform: rotate(45deg)
}

.modal-video-close-btn:after {
    transform: rotate(-45deg)
}

.modal-video-close-btn:before, .modal-video-close-btn:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    background: #fff;
    border-radius: 5px;
    margin-top: -1px;
    transition: all 0.2s ease;
}

.modal-video-close-btn:hover:before,
.modal-video-close-btn:hover:after {
    background: #E01E45;
}

/* Dark Mode Enhancements */
@media (prefers-color-scheme: dark) {
    .modal-video {
        background-color: rgba(0, 0, 0, 0.85);
    }

    .modal-video-movie-wrap {
        background-color: #1a1a1a;
    }
}

/* Tablet — keep close button visible */
@media (max-width: 767px) {
    .modal-video-close-btn {
        top: -32px;
        right: 0;
    }
}

/* Mobile Responsive */
@media (max-width: 479px) {
    .modal-video-body {
        padding: 0 8px;
    }

    .modal-video-close-btn {
        top: -30px;
        right: -5px;
        width: 30px;
        height: 30px;
    }

    .modal-video-movie-wrap {
        padding-bottom: 60%;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .modal-video,
    .modal-video-movie-wrap {
        animation: none;
    }
}
/* --------------------------------------------------------------------------
   Darkstate app shell — Darkstate (Ant Design layer)
   Deep neutrals, crimson accent, subtle depth. Aligns with src/theme/colors.js.
   -------------------------------------------------------------------------- */

body {
  background: var(--color-background) !important;
  color: var(--color-text-primary) !important;
}

.ant-layout {
  background: var(--color-background) !important;
}

/* Header */
.ant-layout-header,
header.ant-layout-header {
  position: relative;
  background: var(--color-paper) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Sider */
.ant-layout-sider {
  background: var(--color-paper) !important;
  border-right: 1px solid var(--color-border) !important;
}

.ant-layout-sider::after {
  display: none;
}

/* Cards */
.ant-card {
  background: var(--color-paper) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  box-shadow: var(--shadow-sm), var(--shadow-card-inner, inset 0 1px 0 rgba(255, 255, 255, 0.045)) !important;
}

.ant-card:hover {
  border-color: #3e3f48 !important;
  border-color: var(--color-border-hover, #3e3f48) !important;
  box-shadow: var(--shadow-md), var(--shadow-primary-sm), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  box-shadow: var(--shadow-md), var(--shadow-primary-sm), var(--shadow-card-inner, inset 0 1px 0 rgba(255, 255, 255, 0.045)) !important;
}

.ant-card-head {
  background: transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.ant-card-head-title,
.ant-card-body {
  color: var(--color-text-primary) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-primary) !important;
}

a:not(.ant-btn) {
  color: var(--color-link) !important;
  transition: color var(--duration-fast) ease;
}

a:not(.ant-btn):hover {
  color: var(--color-primary) !important;
}

/* Breadcrumb links should be muted, not bright link color */
.ant-breadcrumb a:not(.ant-btn) {
  color: var(--color-text-secondary) !important;
}

.ant-breadcrumb a:not(.ant-btn):hover {
  color: var(--color-primary) !important;
}

/* Primary actions */
.ant-btn-primary {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary-hover) 22%, var(--color-primary)) 0%,
    var(--color-primary) 48%,
    color-mix(in srgb, var(--color-primary) 88%, #000) 100%
  ) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, var(--shadow-primary-sm) !important;
  transition: opacity var(--duration-fast) ease, box-shadow var(--duration-fast) ease, filter var(--duration-fast) ease !important;
}

.ant-btn-primary:hover {
  opacity: 0.96;
  filter: brightness(1.04);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, var(--shadow-primary-md) !important;
  transform: none !important;
}

/* Nested router links inside buttons are still <a>; `a:not(.ant-btn)` above would paint them --color-link on a primary (crimson) fill */
.ant-btn-primary a,
.ant-btn-danger a,
.ant-btn-success a {
  color: #fff !important;
}

.ant-btn-primary a:hover,
.ant-btn-danger a:hover,
.ant-btn-success a:hover {
  color: #fff !important;
}

.ant-btn-default {
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.ant-btn-default:hover {
  border-color: #3A3A3A !important;
  border-color: var(--color-border-hover, #3A3A3A) !important;
  color: var(--color-text-primary) !important;
  background: var(--color-elevated) !important;
}

/* Inputs */
.ant-input,
.ant-input-affix-wrapper,
.ant-select-selector,
.ant-textarea,
.ant-picker {
  background: var(--color-elevated) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.ant-input::placeholder,
.ant-textarea::placeholder {
  color: var(--color-text-disabled) !important;
}

.ant-input:focus,
.ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selector,
.ant-textarea:focus,
.ant-picker-focused {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
}

.ant-select-selection-item,
.ant-select-selection-placeholder {
  color: var(--color-text-primary) !important;
}

.ant-select-arrow {
  color: var(--color-text-secondary) !important;
}

.ninjadash_color-picker,
.sDash_color-picker {
  background: var(--color-elevated) !important;
  border: 1px solid var(--color-border) !important;
}

.ninjadash_color-picker:focus-within,
.sDash_color-picker:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
}

/* Tables */
.ant-table {
  background: transparent !important;
}

.ant-table-thead > tr > th {
  background: var(--color-elevated) !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ant-table-tbody > tr > td {
  color: var(--color-text-primary) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.ant-table-tbody > tr:hover > td {
  background: var(--color-elevated) !important;
}

/* Navigation menu */
.ant-menu {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
}

.ant-menu-item::before,
.ant-menu-submenu-title::before {
  display: none;
}

.ant-menu-item,
.ant-menu-submenu-title {
  border-radius: var(--radius-md) !important;
  margin-inline: 8px !important;
  width: calc(100% - 16px) !important;
}

.ant-menu-item:hover,
.ant-menu-submenu-title:hover {
  color: var(--color-text-primary) !important;
  background: var(--color-elevated) !important;
}

.ant-menu-item-selected {
  color: var(--color-text-primary) !important;
  background: rgba(var(--color-primary-rgb), 0.1) !important;
}

.ant-menu-item-selected a {
  color: var(--color-text-primary) !important;
}

.ant-menu-item svg,
.ant-menu-submenu-title svg {
  color: var(--color-text-secondary) !important;
}

.ant-menu-item:hover svg,
.ant-menu-item-selected svg {
  color: var(--color-primary) !important;
}

/* Main admin sidebar — modern rail: depth, pills, neutral defaults + accent on active */
#admin-main-sider.ant-layout-sider {
  border-right: 1px solid var(--color-border) !important;
  background-color: var(--color-paper) !important;
  background-color: var(--color-sidebar, var(--color-paper)) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, transparent 32%),
    linear-gradient(90deg, transparent 0%, rgba(224, 30, 69, 0.04) 100%) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, transparent 32%),
    linear-gradient(90deg, transparent 0%, rgba(var(--color-primary-rgb, 224, 30, 69), 0.04) 100%) !important;
  box-shadow: 8px 0 48px rgba(0, 0, 0, 0.32), inset -1px 0 0 rgba(255, 255, 255, 0.03) !important;
}

#admin-main-sider .ant-layout-sider-children {
  padding: 12px 10px 28px !important;
}

#admin-main-sider .ant-menu {
  color: var(--color-text-secondary) !important;
  -webkit-border-end: none !important;
          border-inline-end: none !important;
}

#admin-main-sider .ant-menu-item,
#admin-main-sider .ant-menu-submenu .ant-menu-submenu-title {
  border-radius: 10px !important;
  margin: 3px 8px !important;
}

#admin-main-sider .ant-menu-item::before,
#admin-main-sider .ant-menu-submenu::before {
  display: none !important;
}

/* Console sidebar: left rail + selected glow from Style.js (override blanket hide above) */
#admin-main-sider .ant-menu.console-sidebar-nav:not(.ant-menu-inline-collapsed) .ant-menu-item::before,
#admin-main-sider .ant-menu.console-sidebar-nav:not(.ant-menu-inline-collapsed) .ant-menu-submenu::before {
  display: block !important;
}

#admin-main-sider .ant-menu-sub.ant-menu-inline {
  border-radius: 12px !important;
  margin: 2px 8px 10px !important;
  padding: 6px 4px !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

#admin-main-sider .ant-menu-submenu-inline > .ant-menu-submenu-title {
  border-radius: 10px !important;
}

#admin-main-sider .ant-menu-item:not(.ant-menu-item-selected),
#admin-main-sider .ant-menu-submenu:not(.ant-menu-submenu-open) > .ant-menu-submenu-title {
  color: var(--color-text-secondary) !important;
}

#admin-main-sider .ant-menu-item:not(.ant-menu-item-selected) a,
#admin-main-sider .ant-menu-submenu-title .ant-menu-title-content,
#admin-main-sider .ant-menu-dark .ant-menu-item a {
  color: inherit !important;
}

#admin-main-sider .ant-menu-item:not(.ant-menu-item-selected) svg,
#admin-main-sider .ant-menu-submenu:not(.ant-menu-submenu-open) > .ant-menu-submenu-title svg {
  color: var(--color-text-secondary) !important;
}

#admin-main-sider .ant-menu-item-selected,
#admin-main-sider .ant-menu-item-selected a {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
}

#admin-main-sider .ant-menu-item-selected {
  background: rgba(var(--color-primary-rgb), 0.14) !important;
}

#admin-main-sider .ant-menu-item-selected svg {
  color: var(--color-primary) !important;
}

#admin-main-sider .ant-menu-submenu-open > .ant-menu-submenu-title {
  color: var(--color-text-primary) !important;
  background: rgba(var(--color-primary-rgb), 0.08) !important;
}

#admin-main-sider .ant-menu-submenu-open > .ant-menu-submenu-title svg {
  color: var(--color-primary) !important;
}

#admin-main-sider .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
#admin-main-sider .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
  background: var(--color-text-secondary) !important;
}

#admin-main-sider .ant-menu-submenu-open > .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
#admin-main-sider .ant-menu-submenu-open > .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
  background: var(--color-primary) !important;
}

#admin-main-sider .ant-menu-item:hover:not(.ant-menu-item-selected),
#admin-main-sider .ant-menu-submenu-title:hover {
  color: var(--color-text-primary) !important;
  background: var(--color-elevated) !important;
}

#admin-main-sider .ant-menu-item:hover:not(.ant-menu-item-selected) svg,
#admin-main-sider .ant-menu-submenu-title:hover svg {
  color: var(--color-primary) !important;
}

#admin-main-sider .ant-menu-item:hover:not(.ant-menu-item-selected) a,
#admin-main-sider .ant-menu-submenu-title:hover .ant-menu-title-content {
  color: inherit !important;
}

#admin-main-sider .ant-menu-inline-collapsed .ant-menu-item,
#admin-main-sider .ant-menu-inline-collapsed .ant-menu-submenu .ant-menu-submenu-title {
  margin: 4px auto !important;
  width: 44px !important;
  padding-inline: 0 !important;
  justify-content: center !important;
}

/*
 * Root sidebar rows: Home uses a NavLink inside .ant-menu-title-content; the next row is often a
 * submenu title with plain text. Theme SCSS gives items a flex <a> and extra title padding on top
 * of Ant Design's icon→label gap, so label alignment and spacing diverge. Use one gap model (Ant's
 * .ant-menu-item-icon + span) and flow links like text labels.
 */
#admin-main-sider .ant-menu-inline.ant-menu-root > .ant-menu-item .ant-menu-title-content,
#admin-main-sider .ant-menu-inline.ant-menu-root > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-title-content {
  padding-inline: 0 !important;
}

#admin-main-sider .ant-menu-inline.ant-menu-root > .ant-menu-item .ant-menu-title-content > a {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-weight: 500;
  line-height: inherit;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#admin-main-sider .ant-menu-inline.ant-menu-root > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-title-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  line-height: inherit;
}

#admin-main-sider .ant-menu-inline.ant-menu-root > .ant-menu-item .ant-menu-title-content > a:has(.badge) {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}

#admin-main-sider .ant-menu-inline.ant-menu-root > .ant-menu-item .ant-menu-title-content > a:has(.badge) span.badge {
  -webkit-padding-start: 0 !important;
          padding-inline-start: 0 !important;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  flex-shrink: 0;
}

/* Nested submenu rows: trim extra label padding; icon→text gap matches root (below) */
#admin-main-sider .ant-menu-sub.ant-menu-inline .ant-menu-item .ant-menu-title-content {
  -webkit-padding-start: 0 !important;
          padding-inline-start: 0 !important;
  min-width: 0;
  overflow: hidden;
}

#admin-main-sider .ant-menu-sub.ant-menu-inline .ant-menu-item .ant-menu-title-content > a {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  line-height: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar: same compact icon→label gap for root items and subpage (nested) items */
#admin-main-sider .ant-menu-inline.ant-menu-root > .ant-menu-item .ant-menu-item-icon + .ant-menu-title-content,
#admin-main-sider .ant-menu-inline.ant-menu-root > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-item-icon + .ant-menu-title-content,
#admin-main-sider .ant-menu-sub.ant-menu-inline .ant-menu-item .ant-menu-item-icon + .ant-menu-title-content {
  -webkit-margin-start: 4px !important;
          margin-inline-start: 4px !important;
}

/* Modal */
.ant-modal-content {
  background: var(--color-paper) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  box-shadow: var(--shadow-glass), var(--shadow-card-inner-strong, inset 0 1px 0 rgba(255, 255, 255, 0.05)) !important;
}

.ant-modal-header {
  border-bottom: 1px solid var(--color-border) !important;
  background: transparent !important;
}

.ant-modal-title {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
}

.ant-modal-close-x {
  color: var(--color-text-secondary) !important;
}

/* Dropdowns / selects */
.ant-dropdown {
  background: var(--color-paper) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

.ant-dropdown .ant-dropdown-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px !important;
}

.ant-select-dropdown {
  background: var(--color-paper) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 4px !important;
}

.ant-dropdown-menu-item,
.ant-select-item {
  color: var(--color-text-secondary) !important;
  border-radius: var(--radius-sm) !important;
}

.ant-select-dropdown .ant-select-item .ant-select-item-option-content {
  color: var(--color-text-secondary) !important;
}

.ant-dropdown-menu-item:hover,
.ant-select-item-option-active,
.ant-select-item:hover {
  background: var(--color-elevated) !important;
  color: var(--color-text-primary) !important;
}

.ant-select-item-option-active .ant-select-item-option-content,
.ant-select-item:hover .ant-select-item-option-content {
  color: var(--color-text-primary) !important;
}

.ant-select-item-option-selected .ant-select-item-option-content {
  color: var(--color-primary) !important;
}

.ant-tooltip .ant-tooltip-inner {
  background: var(--color-elevated) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Badge */
.ant-badge-count {
  background: var(--color-error) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* Status pills */
.status-pill,
.status-cyber {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0em;
  text-transform: none;
}

.status-pill::before,
.status-cyber::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-pill.success,
.status-cyber.success {
  background: rgba(0, 208, 132, 0.1);
  background: rgba(var(--color-success-rgb, 0, 208, 132), 0.1);
  color: var(--color-success);
  border: 1px solid rgba(0, 208, 132, 0.25);
  border: 1px solid rgba(var(--color-success-rgb, 0, 208, 132), 0.25);
}

.status-pill.success::before,
.status-cyber.success::before {
  background: var(--color-success);
}

.status-pill.warning,
.status-cyber.warning {
  background: rgba(239, 188, 42, 0.1);
  background: rgba(var(--color-warning-rgb, 239, 188, 42), 0.1);
  color: var(--color-warning);
  border: 1px solid rgba(239, 188, 42, 0.25);
  border: 1px solid rgba(var(--color-warning-rgb, 239, 188, 42), 0.25);
}

.status-pill.warning::before,
.status-cyber.warning::before {
  background: var(--color-warning);
}

.status-pill.error,
.status-cyber.error {
  background: rgba(230, 57, 70, 0.1);
  background: rgba(var(--color-error-rgb, 230, 57, 70), 0.1);
  color: var(--color-error);
  border: 1px solid rgba(230, 57, 70, 0.25);
  border: 1px solid rgba(var(--color-error-rgb, 230, 57, 70), 0.25);
}

.status-pill.error::before,
.status-cyber.error::before {
  background: var(--color-error);
}

.status-pill.info,
.status-cyber.info {
  background: rgba(6, 147, 227, 0.1);
  background: rgba(var(--color-info-rgb, 6, 147, 227), 0.1);
  color: var(--color-info);
  border: 1px solid rgba(6, 147, 227, 0.25);
  border: 1px solid rgba(var(--color-info-rgb, 6, 147, 227), 0.25);
}

.status-pill.info::before,
.status-cyber.info::before {
  background: var(--color-info);
}

/* Neutral/default status pill */
.status-pill.neutral,
.status-cyber.neutral {
  background: rgba(var(--color-primary-rgb), 0.06);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.status-pill.neutral::before,
.status-cyber.neutral::before {
  background: var(--color-text-disabled);
}

/* Progress */
.ant-progress-bg {
  background: var(--color-primary) !important;
}

.ant-progress-bg::after {
  display: none !important;
}

.ant-progress-inner {
  background: var(--color-elevated) !important;
}

/* Alerts */
.ant-alert {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-border) !important;
}

.ant-alert::before {
  display: none !important;
}

.ant-alert-success {
  border-color: rgba(0, 208, 132, 0.3) !important;
  border-color: rgba(var(--color-success-rgb, 0, 208, 132), 0.3) !important;
  background: rgba(0, 208, 132, 0.08) !important;
  background: rgba(var(--color-success-rgb, 0, 208, 132), 0.08) !important;
  color: var(--color-text-primary) !important;
}

.ant-alert-warning {
  border-color: rgba(239, 188, 42, 0.3) !important;
  border-color: rgba(var(--color-warning-rgb, 239, 188, 42), 0.3) !important;
  background: rgba(239, 188, 42, 0.08) !important;
  background: rgba(var(--color-warning-rgb, 239, 188, 42), 0.08) !important;
  color: var(--color-text-primary) !important;
}

.ant-alert-error {
  border-color: rgba(230, 57, 70, 0.3) !important;
  border-color: rgba(var(--color-error-rgb, 230, 57, 70), 0.3) !important;
  background: rgba(230, 57, 70, 0.08) !important;
  background: rgba(var(--color-error-rgb, 230, 57, 70), 0.08) !important;
  color: var(--color-text-primary) !important;
}

.ant-alert-info {
  border-color: rgba(6, 147, 227, 0.3) !important;
  border-color: rgba(var(--color-info-rgb, 6, 147, 227), 0.3) !important;
  background: rgba(6, 147, 227, 0.08) !important;
  background: rgba(var(--color-info-rgb, 6, 147, 227), 0.08) !important;
  color: var(--color-text-primary) !important;
}

/* Tags */
.ant-tag {
  background: rgba(224, 30, 69, 0.09) !important;
  background: rgba(var(--color-primary-rgb, 224, 30, 69), 0.09) !important;
  border: 1px solid rgba(224, 30, 69, 0.22) !important;
  border: 1px solid rgba(var(--color-primary-rgb, 224, 30, 69), 0.22) !important;
  color: var(--color-link) !important;
}

.ant-divider {
  border-color: var(--color-border) !important;
}

.ant-spin-dot .ant-spin-dot-item,
.ant-spin-dot i {
  background-color: var(--color-primary) !important;
}

.ant-spin-text {
  color: var(--color-text-secondary) !important;
}

.ant-skeleton .ant-skeleton-content .ant-skeleton-title,
.ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph > li {
  background: linear-gradient(
    90deg,
    var(--color-elevated) 25%,
    var(--color-border) 50%,
    var(--color-elevated) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s linear infinite !important;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Main column — no decorative overlays */
.atbd-main-layout::before,
.layout::after {
  display: none !important;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
  border: 2px solid var(--color-background);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-disabled);
}

/* Auth shell */
.dark-auth {
  background: var(--color-background) !important;
}

.dark-auth .ant-card {
  background: var(--color-paper) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Monospace log / code block */
.tool-terminal,
.cyber-terminal {
  font-family: ui-monospace, monospace;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.55;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  color: var(--color-text-primary);
  overflow: auto;
}

.tool-terminal::before,
.cyber-terminal::before {
  display: none;
}

.tool-terminal-text,
.cyber-terminal-text {
  font-family: inherit;
  color: var(--color-text-primary);
}

/* Responsive */
@media (max-width: 991px) {
  .ant-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .ant-drawer-content-wrapper {
    max-width: min(100vw - 24px, 420px);
  }
}

@media (max-width: 768px) {
  .ant-card-head {
    padding: 10px 14px !important;
    min-height: 0 !important;
  }

  .ant-card-body {
    padding: 14px !important;
  }

  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  .ant-modal {
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }

  .ant-modal-body {
    max-height: min(70dvh, calc(100dvh - 200px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tool-terminal,
  .cyber-terminal {
    padding: 12px;
    font-size: 12px;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .ant-card-head {
    padding: 12px 18px !important;
  }

  .ant-card-body {
    padding: 18px !important;
  }
}

@media (max-width: 480px) {
  .status-pill,
  .status-cyber {
    padding: 3px 8px;
    font-size: 11px;
  }

  .ant-modal {
    max-width: 100% !important;
    margin: 0 !important;
    top: 0;
  }

  .ant-modal-content {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }

}

@media (max-width: 767px) {
  .ant-input,
  .ant-input-affix-wrapper .ant-input,
  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector,
  .ant-picker-input > input,
  .ant-textarea {
    font-size: 16px !important;
  }
}

/* ============================================
   TAG VARIANTS (consistent with theme)
   ============================================ */
.ant-tag-success {
  background: rgba(0, 208, 132, 0.1) !important;
  background: rgba(var(--color-success-rgb, 0, 208, 132), 0.1) !important;
  border-color: rgba(0, 208, 132, 0.25) !important;
  border-color: rgba(var(--color-success-rgb, 0, 208, 132), 0.25) !important;
  color: var(--color-success) !important;
}

.ant-tag-warning {
  background: rgba(239, 188, 42, 0.1) !important;
  background: rgba(var(--color-warning-rgb, 239, 188, 42), 0.1) !important;
  border-color: rgba(239, 188, 42, 0.25) !important;
  border-color: rgba(var(--color-warning-rgb, 239, 188, 42), 0.25) !important;
  color: var(--color-warning) !important;
}

.ant-tag-error {
  background: rgba(230, 57, 70, 0.1) !important;
  background: rgba(var(--color-error-rgb, 230, 57, 70), 0.1) !important;
  border-color: rgba(230, 57, 70, 0.25) !important;
  border-color: rgba(var(--color-error-rgb, 230, 57, 70), 0.25) !important;
  color: var(--color-error) !important;
}

.ant-tag-processing {
  background: rgba(6, 147, 227, 0.1) !important;
  background: rgba(var(--color-info-rgb, 6, 147, 227), 0.1) !important;
  border-color: rgba(6, 147, 227, 0.25) !important;
  border-color: rgba(var(--color-info-rgb, 6, 147, 227), 0.25) !important;
  color: var(--color-info) !important;
}

/* ============================================
   TOOLTIP ARROW + DARK CONSISTENCY
   ============================================ */
.ant-tooltip .ant-tooltip-arrow::before,
.ant-tooltip .ant-tooltip-arrow::after {
  background: var(--color-elevated) !important;
}

/* ============================================
   SWITCH COMPONENT
   ============================================ */
.ant-switch {
  background: var(--color-border) !important;
}

.ant-switch-checked {
  background: var(--color-primary) !important;
}

/* ============================================
   SEGMENTED CONTROL
   ============================================ */
.ant-segmented {
  background: var(--color-elevated) !important;
  border-radius: var(--radius-md) !important;
}

.ant-segmented .ant-segmented-item-selected {
  background: var(--color-paper) !important;
  box-shadow: var(--shadow-sm) !important;
}

.ant-segmented .ant-segmented-item-label {
  color: var(--color-text-secondary);
}

.ant-segmented .ant-segmented-item-selected .ant-segmented-item-label {
  color: var(--color-text-primary);
}

/* ============================================
   TABS — brand ink + clearer hierarchy
   ============================================ */
.ant-tabs-top > .ant-tabs-nav::before,
.ant-tabs-bottom > .ant-tabs-nav::before {
  border-bottom-color: var(--color-border) !important;
}

.ant-tabs .ant-tabs-tab {
  transition: color 0.12s ease !important;
  transition: color var(--duration-fast, 0.12s) ease !important;
}

.ant-tabs .ant-tabs-tab:hover .ant-tabs-tab-btn {
  color: var(--color-text-primary) !important;
}

.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.ant-tabs-ink-bar {
  background: var(--color-primary) !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
}

.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
  background: var(--color-elevated) !important;
  border-color: var(--color-border) !important;
}

.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active {
  background: var(--color-paper) !important;
  border-bottom-color: var(--color-paper) !important;
}

/* ============================================
   STEPS — active ring uses brand
   ============================================ */
.ant-steps .ant-steps-item-process .ant-steps-item-icon {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.ant-steps .ant-steps-item-finish .ant-steps-item-icon {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.ant-steps .ant-steps-item-finish .ant-steps-item-tail::after {
  background: var(--color-primary) !important;
}

/* ============================================
   MOBILE CONSOLE IMPROVEMENTS
   ============================================ */

/* Touch-friendly minimum sizes on mobile */
@media (max-width: 767px) {
  /* Default buttons — omit .ant-btn-sm / link (dense UI + header guest actions use size="small") */
  .ant-btn:not(.ant-btn-sm):not(.ant-btn-link),
  .ant-btn-lg,
  button[class*="btn"]:not([class*="btn-sm"]):not([class*="btn-link"]),
  a[class*="btn"]:not([class*="btn-sm"]) {
    min-height: 44px;
    min-width: 44px;
  }

  .ant-btn-sm,
  .ant-btn-link {
    min-width: 0;
    min-height: 36px;
  }

  /* Form inputs on mobile - prevent zoom */
  .ant-input,
  .ant-input-affix-wrapper,
  .ant-select-selector,
  .ant-picker {
    min-height: 44px;
  }

  /* Table cells on mobile */
  .ant-table-cell {
    min-height: 44px;
  }

  /* Menu items on mobile */
  .ant-menu-item,
  .ant-menu-submenu-title {
    min-height: 48px;
  }

  /* Dropdown items */
  .ant-dropdown-menu-item,
  .ant-select-item {
    min-height: 40px;
    padding: 10px 12px;
  }

  /* Drawer improvements */
  .ant-drawer-body {
    padding: 16px;
  }

  /* Pagination */
  .ant-pagination-item,
  .ant-pagination-prev,
  .ant-pagination-next {
    min-width: 40px;
    height: 40px;
  }

  /* Cards on mobile */
  .ant-card {
    margin-bottom: 12px;
  }

  /* Prevent horizontal overflow */
  .app-page-inner,
  .ant-layout-content {
    overflow-x: hidden;
  }

  /* Tab scrolling on mobile */
  .ant-tabs-nav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ant-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  /* Segmented control on mobile */
  .ant-segmented {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ant-segmented::-webkit-scrollbar {
    display: none;
  }
}

/* Very small screens (320px) */
@media (max-width: 359px) {
  .ant-btn:not(.ant-btn-sm) {
    padding: 0 12px;
    font-size: 13px;
  }

  .ant-modal {
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
  }

  .ant-card {
    border-radius: 10px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .ant-btn:hover,
  .ant-card:hover {
    transform: none;
  }

  /* Active state feedback */
  .ant-btn:active {
    transform: scale(0.98);
  }

  /* Better scroll behavior */
  .ant-layout-content {
    -webkit-overflow-scrolling: touch;
  }

  /* Table scroll shadows — fade hint that content extends */
  .ant-table-wrapper {
    position: relative;
  }

  .ant-table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to left, #0E0E0E, transparent);
    background: linear-gradient(to left, var(--color-paper, #0E0E0E), transparent);
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
  }

  /* Modal backdrop */
  .ant-modal-mask {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  /* Dropdown backdrop for better visibility */
  .ant-dropdown-mask {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* Safe area support for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
  .app-page-inner {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .ant-drawer-content {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .ant-modal-content {
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark mode specific mobile fixes */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  /* Ensure contrast on dark mode */
  .ant-input,
  .ant-select-selector {
    background: rgba(20, 20, 25, 0.95) !important;
  }

  /* Modal improvements for dark mode */
  .ant-modal-content {
    background: rgba(14, 14, 18, 0.98) !important;
  }

  /* Drawer improvements for dark mode */
  .ant-drawer-content {
    background: var(--color-paper) !important;
  }
}

/* Full-width drawers on small phones */
@media (max-width: 479px) {
  .ant-drawer-right .ant-drawer-content-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .ant-drawer-content {
    border-radius: 0 !important;
  }

  .ant-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
  }

  .ant-modal-body {
    padding: 16px !important;
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .ant-modal {
    top: 10%;
    margin-top: 0;
  }

  .ant-modal-content {
    max-height: 80vh;
  }

  .ant-modal-body {
    max-height: 60vh;
  }

  .ant-card {
    margin-bottom: 8px;
  }
}

/* ============================================
   BREADCRUMB MOBILE IMPROVEMENTS
   ============================================ */
.app-path-breadcrumb {
  padding: 10px 0;
  margin-bottom: 8px;
}

.app-path-breadcrumb .ant-breadcrumb {
  font-size: 12px;
}

.app-path-breadcrumb .ant-breadcrumb-link,
.app-path-breadcrumb .ant-breadcrumb-link a {
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.app-path-breadcrumb .ant-breadcrumb-link:hover a,
.app-path-breadcrumb .ant-breadcrumb-link:hover {
  color: var(--color-primary);
}

.app-path-breadcrumb .ant-breadcrumb-separator {
  color: var(--color-text-disabled);
  margin: 0 6px;
}

@media (max-width: 640px) {
  .app-path-breadcrumb {
    padding: 8px 0;
    margin-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .app-path-breadcrumb::-webkit-scrollbar {
    display: none;
  }

  .app-path-breadcrumb .ant-breadcrumb {
    font-size: 11px;
    white-space: nowrap;
    flex-wrap: nowrap;
  }

  .app-path-breadcrumb .ninjadash-seperator {
    font-size: 10px;
  }
}

/* Auth variant breadcrumbs */
.app-path-breadcrumb--auth {
  justify-content: center;
}

@media (max-width: 640px) {
  .app-path-breadcrumb--auth {
    justify-content: flex-start;
  }
}

/* ============================================
   SIDEBAR MOBILE IMPROVEMENTS
   ============================================ */
@media (max-width: 991px) {
  .ant-layout-sider {
    z-index: 1000 !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Mobile sidebar overlay */
  .ant-layout-sider .ant-layout-sider-children {
    padding-top: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Better menu item spacing on mobile */
  .ant-layout-sider .ant-menu-item,
  .ant-layout-sider .ant-menu-submenu-title {
    min-height: 48px;
    line-height: 48px;
    margin: 2px 8px;
    border-radius: 8px;
  }

  /* Larger touch targets for submenu */
  .ant-layout-sider .ant-menu-sub .ant-menu-item {
    min-height: 44px;
    line-height: 44px;
  }

  /* Backdrop should cover entire viewport */
  .ninjadash-shade {
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
  }
}

/* ============================================
   HEADER MOBILE IMPROVEMENTS
   ============================================ */
@media (max-width: 767px) {
  .app-shell-header {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    overflow-x: visible !important;
  }

  .app-shell-header__brand {
    min-width: -webkit-min-content !important;
    min-width: min-content !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  .app-shell-header__logo-link {
    flex-shrink: 0 !important;
    max-width: min(168px, 38vw) !important;
  }

  .app-shell-header__logo {
    max-height: 28px;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Header menu trigger — not the 44px default .ant-btn block */
  .app-shell-header .app-shell-header__menu-btn.ant-btn {
    min-height: 40px !important;
    min-width: 40px !important;
    height: auto !important;
  }

  /* Header guest Log in / Sign up — compact beside wordmark */
  .app-shell-header .ninjadash-nav-actions__guest .nav-guest-btn.ant-btn {
    min-height: 32px !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  /* Adjust content margin for mobile */
  .atbd-main-layout {
    margin-top: 0 !important;
  }
}

/* ============================================
   LOGO SVG MOBILE FIXES
   ============================================ */
@media (max-width: 475px) {
  .navbar-brand .app-shell-header__logo {
    max-height: 24px;
  }

  .app-shell-header__logo-link {
    max-width: min(148px, 50vw) !important;
  }

  .app-shell-header__brand-row {
    gap: 8px !important;
  }

  .app-shell-header__menu-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .app-shell-header .ninjadash-nav-actions__guest .nav-guest-btn.ant-btn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
}

/* ============================================
   SEARCH BAR MOBILE IMPROVEMENTS
   ============================================ */
@media (max-width: 767px) {
  .ninjadash-searchbar {
    position: fixed !important;
    top: 60px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    z-index: 1001 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  }

  .ninjadash-searchbar input {
    font-size: 15px !important; /* Prevents iOS zoom */
  }
}

/* ============================================
   NOTIFICATION DROPDOWN MOBILE
   ============================================ */
@media (max-width: 767px) {
  .ant-dropdown-menu {
    max-width: calc(100vw - 32px);
    overflow-x: auto;
  }

  .ant-notification-notice {
    max-width: calc(100vw - 32px);
  }

  .ant-notification-notice-message {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .ant-notification-notice-description {
    font-size: 13px;
  }
}

/* ============================================
   TOOLTIP MOBILE IMPROVEMENTS
   ============================================ */
@media (max-width: 479px) {
  .ant-tooltip .ant-tooltip-inner {
    font-size: 11px !important;
    padding: 8px 12px !important;
    max-width: calc(100vw - 48px) !important;
  }

  .ant-tooltip .ant-tooltip-arrow {
    display: none !important;
  }
}

/* ============================================
   AUTOCOMPLETE & SUGGESTIONS MOBILE
   ============================================ */
@media (max-width: 640px) {
  .ant-select-auto-complete .ant-select-selector,
  .ant-select-combobox .ant-select-selector {
    font-size: 15px !important;
  }

  .ant-auto-complete {
    width: 100% !important;
  }

  .ant-auto-complete-suggestions {
    max-width: 100%;
  }
}

/* ============================================
   ENHANCED LOADING STATES
   ============================================ */

/* Skeleton shimmer animation with brand accent */
.ant-skeleton .ant-skeleton-content .ant-skeleton-title,
.ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph > li {
  background: linear-gradient(
    90deg,
    var(--color-elevated) 25%,
    rgba(224, 30, 69, 0.08) 50%,
    var(--color-elevated) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer-brand 1.8s ease-in-out infinite !important;
}

@keyframes skeleton-shimmer-brand {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Loading spinner brand colors */
.ant-spin-dot .ant-spin-dot-item {
  background-color: var(--color-primary) !important;
}

.ant-spinner .ant-spin-spinning {
  border-color: var(--color-primary) !important;
}

/* Loading button state */
.ant-btn-loading {
  opacity: 0.85;
  cursor: wait !important;
  pointer-events: none;
}

/* Loading overlay for cards */
.card-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-background), 0.7);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
}

/* ============================================
   ENHANCED FORM VALIDATION
   ============================================ */

/* Error state with brand styling */
.ant-form-item-has-error .ant-input,
.ant-form-item-has-error .ant-input-affix-wrapper,
.ant-form-item-has-error .ant-select-selector,
.ant-form-item-has-error .ant-picker {
  border-color: var(--color-error) !important;
  background: rgba(230, 57, 70, 0.05) !important;
  background: rgba(var(--color-error-rgb, 230, 57, 70), 0.05) !important;
}

.ant-form-item-has-error .ant-input:focus,
.ant-form-item-has-error .ant-input-affix-wrapper-focused,
.ant-form-item-has-error .ant-select-focused .ant-select-selector {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-error-rgb, 230, 57, 70), 0.15) !important;
}

/* Success state */
.ant-form-item-has-success .ant-input,
.ant-form-item-has-success .ant-input-affix-wrapper,
.ant-form-item-has-success .ant-select-selector {
  border-color: var(--color-success) !important;
  background: rgba(0, 208, 132, 0.05) !important;
  background: rgba(var(--color-success-rgb, 0, 208, 132), 0.05) !important;
}

.ant-form-item-has-success .ant-input:focus,
.ant-form-item-has-success .ant-input-affix-wrapper-focused,
.ant-form-item-has-success .ant-select-focused .ant-select-selector {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 3px rgba(0, 208, 132, 0.15) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-success-rgb, 0, 208, 132), 0.15) !important;
}

/* Form item extra spacing */
.ant-form-item-extra {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

/* Required asterisk styling */
.ant-form-item-required::before {
  color: var(--color-error) !important;
  font-weight: 600;
}

/* ============================================
   ENHANCED FOCUS STATES (Accessibility)
   ============================================ */

/* Visible focus ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px;
}

.ant-btn:focus-visible,
.ant-input:focus-visible,
.ant-select:focus-visible .ant-select-selector {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* Remove default focus outline in favor of custom */
.ant-input:focus,
.ant-input-focused,
.ant-select-focused .ant-select-selector,
.ant-picker-focused {
  outline: none !important;
  box-shadow: none !important;
}

/* Focus-within for form items */
.ant-form-item-focus .ant-input,
.ant-form-item-focus .ant-input-affix-wrapper,
.ant-form-item-focus .ant-select-selector {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(224, 30, 69, 0.15) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 224, 30, 69), 0.15) !important;
}

/* ============================================
   ENHANCED ANIMATIONS
   ============================================ */

/* Smooth page transitions */
.page-enter {
  opacity: 0;
  transform: translateY(8px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.page-exit {
  opacity: 1;
}

.page-exit-active {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Slide up animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.35s ease-out;
}

/* Pulse animation for notifications */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================
   ENHANCED TABLE IMPROVEMENTS
   ============================================ */

/* Table row hover effect */
.ant-table-tbody > tr.ant-table-row:hover > td {
  background: rgba(224, 30, 69, 0.04) !important;
  background: rgba(var(--color-primary-rgb, 224, 30, 69), 0.04) !important;
}

/* Table row selection */
.ant-table-tbody > tr.ant-table-row-selected > td {
  background: rgba(224, 30, 69, 0.08) !important;
  background: rgba(var(--color-primary-rgb, 224, 30, 69), 0.08) !important;
}

.ant-table-tbody > tr.ant-table-row-selected:hover > td {
  background: rgba(224, 30, 69, 0.12) !important;
  background: rgba(var(--color-primary-rgb, 224, 30, 69), 0.12) !important;
}

/* Table sortable header */
.ant-table-column-sorter {
  color: var(--color-text-disabled);
  transition: color 0.2s ease;
}

.ant-table-column-sorter:hover {
  color: var(--color-primary);
}

.ant-table-column-sorter-up.active,
.ant-table-column-sorter-down.active {
  color: var(--color-primary);
}

/* ============================================
   ENHANCED EMPTY STATE
   ============================================ */

.ant-empty-description {
  color: var(--color-text-secondary) !important;
}

.ant-empty-normal {
  margin: 24px 0;
}

.ant-empty-img-empty-ellipse {
  fill: var(--color-elevated);
}

.ant-empty-img-empty-path {
  fill: var(--color-border);
}

.ant-empty-img-empty-g {
  fill: var(--color-paper);
}

/* ============================================
   ENHANCED DRAWER
   ============================================ */

.ant-drawer-header {
  background: var(--color-paper) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.ant-drawer-title {
  color: var(--color-text-primary) !important;
  font-weight: 600;
}

.ant-drawer-close {
  color: var(--color-text-secondary) !important;
  transition: color 0.2s ease;
}

.ant-drawer-close:hover {
  color: var(--color-primary) !important;
}

.ant-drawer-footer {
  border-top: 1px solid var(--color-border) !important;
  background: var(--color-paper) !important;
}

/* ============================================
   ENHANCED TREE COMPONENT
   ============================================ */

.ant-tree .ant-tree-node-content-wrapper:hover {
  background: rgba(224, 30, 69, 0.06) !important;
  background: rgba(var(--color-primary-rgb, 224, 30, 69), 0.06) !important;
}

.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background: rgba(224, 30, 69, 0.12) !important;
  background: rgba(var(--color-primary-rgb, 224, 30, 69), 0.12) !important;
}

.ant-tree .ant-tree-treenode-selected .ant-tree-title {
  color: var(--color-primary) !important;
}

/* ============================================
   ENHANCED UPLOAD COMPONENT
   ============================================ */

.ant-upload-drag {
  border-color: var(--color-border) !important;
  background: var(--color-elevated) !important;
  transition: all 0.25s ease;
}

.ant-upload-drag:hover {
  border-color: var(--color-primary) !important;
}

.ant-upload-drag-icon {
  color: var(--color-primary) !important;
}

.ant-upload-text {
  color: var(--color-text-primary) !important;
  font-weight: 500;
}

.ant-upload-hint {
  color: var(--color-text-secondary) !important;
}

/* ============================================
   ENHANCED STEPS COMPONENT
   ============================================ */

.ant-steps-item-finish .ant-steps-item-icon {
  background: transparent !important;
  border-color: var(--color-primary) !important;
}

.ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon {
  color: var(--color-primary) !important;
}

.ant-steps-item-process .ant-steps-item-icon {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.ant-steps-item-wait .ant-steps-item-icon {
  background: var(--color-elevated) !important;
  border-color: var(--color-border) !important;
}

.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
  background: var(--color-primary) !important;
}

/* ============================================
   ENHANCED MOBILE EXPERIENCE — APP THEME
   ============================================ */

/* Ant Select / Cascader dropdowns: full-width on mobile to avoid clipping */
@media (max-width: 639px) {
  .ant-select-dropdown {
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
  }
}

/* Steps component: compact on mobile */
@media (max-width: 639px) {
  .ant-steps-horizontal:not(.ant-steps-label-vertical) {
    flex-direction: column;
  }

  .ant-steps-horizontal:not(.ant-steps-label-vertical) > .ant-steps-item {
    padding-left: 0;
    flex: 0 1 auto;
  }

  .ant-steps-horizontal:not(.ant-steps-label-vertical) > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail {
    display: none;
  }
}

/* Card extra actions: wrap and stack on very narrow screens */
@media (max-width: 479px) {
  .ant-card-extra {
    flex-wrap: wrap;
    gap: 4px;
  }

  .ant-card-extra .ant-btn {
    font-size: 12px;
    padding: 0 8px;
  }
}

/* Upload dragger: compact on mobile */
@media (max-width: 639px) {
  .ant-upload-drag {
    padding: 16px !important;
  }

  .ant-upload-drag-icon {
    font-size: 32px !important;
  }

  .ant-upload-text {
    font-size: 14px !important;
  }

  .ant-upload-hint {
    font-size: 12px !important;
  }
}

/* Table pagination: centered wrapping on mobile */
@media (max-width: 639px) {
  .ant-table-pagination.ant-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 12px 0 !important;
  }

  .ant-table-pagination .ant-pagination-total-text {
    flex-basis: 100%;
    text-align: center;
    font-size: 12px;
    order: -1;
    margin-bottom: 4px;
  }

  .ant-table-pagination .ant-pagination-options {
    flex-basis: 100%;
    text-align: center;
    margin: 4px 0 0;
  }

  .ant-pagination-item,
  .ant-pagination-prev,
  .ant-pagination-next,
  .ant-pagination-jump-prev,
  .ant-pagination-jump-next {
    min-width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
  }
}

/* Statistic component: tighter on mobile */
@media (max-width: 767px) {
  .ant-statistic-title {
    font-size: 12px;
    margin-bottom: 2px;
  }

  .ant-statistic-content-value {
    font-size: 20px;
  }
}

@media (max-width: 479px) {
  .ant-statistic-content-value {
    font-size: 18px;
  }
}

/* Tabs: scrollable with better touch targets */
@media (max-width: 767px) {
  .ant-tabs .ant-tabs-tab {
    padding: 10px 12px !important;
    font-size: 13px;
  }

  .ant-tabs-tab + .ant-tabs-tab {
    margin-left: 16px !important;
  }
}

/* Popconfirm / Popover: width constraint on mobile */
@media (max-width: 479px) {
  .ant-popover {
    max-width: calc(100vw - 32px) !important;
  }

  .ant-popover-inner-content {
    padding: 10px 12px !important;
    font-size: 13px;
  }

  .ant-popover-buttons {
    display: flex;
    gap: 6px;
  }

  .ant-popover-buttons .ant-btn {
    flex: 1 1;
    min-width: 0;
  }
}

/* Alert component: compact on mobile */
@media (max-width: 639px) {
  .ant-alert {
    padding: 8px 12px !important;
    font-size: 13px;
  }

  .ant-alert-message {
    font-size: 13px;
  }

  .ant-alert-description {
    font-size: 12px;
  }

  .ant-alert-with-description .ant-alert-icon {
    font-size: 18px !important;
  }
}

/* ============================================
   SECURITY OPERATIONS PAGES — MOBILE RESPONSIVE
   ============================================ */

/* Security toolbar: full-width search on mobile */
@media (max-width: 639px) {
  .security-toolbar-search {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
}

/* --- Security page header buttons: wrap & stack on mobile --- */
@media (max-width: 767px) {
  .security-ops-page .ant-page-header-heading-extra {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .security-ops-page .ant-page-header-heading-extra > * {
    flex: 0 0 auto !important;
  }
  .security-ops-page .ant-page-header-heading-extra .ant-btn-lg {
    padding: 4px 12px !important;
    font-size: 13px !important;
    height: 32px !important;
  }
}

@media (max-width: 479px) {
  .security-ops-page .ant-page-header-heading-extra {
    flex-direction: column !important;
  }
  .security-ops-page .ant-page-header-heading-extra > *,
  .security-ops-page .ant-page-header-heading-extra > * > .ant-btn {
    width: 100% !important;
  }
}

/* --- Security tables: responsive overflow & compact on mobile --- */
@media (max-width: 767px) {
  .security-ops-page .ant-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .security-ops-page .ant-table {
    font-size: 12px !important;
  }
  .security-ops-page .ant-table-thead > tr > th,
  .security-ops-page .ant-table-tbody > tr > td {
    padding: 8px 8px !important;
    white-space: nowrap !important;
  }
  .security-ops-page .ant-table-pagination {
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center !important;
  }
  .security-ops-page .ant-table-pagination .ant-pagination-options {
    display: none !important;
  }
}

@media (max-width: 479px) {
  .security-ops-page .ant-table-thead > tr > th,
  .security-ops-page .ant-table-tbody > tr > td {
    padding: 6px 6px !important;
    font-size: 11px !important;
  }
  .security-ops-page .ant-tag {
    font-size: 10px !important;
    padding: 0 4px !important;
    -webkit-margin-end: 4px !important;
            margin-inline-end: 4px !important;
  }
}

/* --- Security stat cards: tighter on mobile --- */
@media (max-width: 767px) {
  .security-ops-page .ant-statistic-title {
    font-size: 11px !important;
  }
  .security-ops-page .ant-statistic-content {
    font-size: 18px !important;
  }
  .security-ops-page .ant-statistic-content-suffix {
    font-size: 13px !important;
  }
}

@media (max-width: 479px) {
  .security-ops-page .ant-statistic-content {
    font-size: 16px !important;
  }
}

/* --- Security cards: reduce padding on mobile --- */
@media (max-width: 575px) {
  .security-ops-page .ant-card-body {
    padding: 12px !important;
  }
  .security-ops-page .ant-card-head {
    padding: 0 12px !important;
    min-height: 36px !important;
  }
  .security-ops-page .ant-card-head-title {
    font-size: 13px !important;
  }
}

/* --- Segmented control: scrollable on small screens --- */
@media (max-width: 639px) {
  .security-ops-page .ant-segmented {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .security-ops-page .ant-segmented::-webkit-scrollbar {
    display: none !important;
  }
  .security-ops-page .ant-segmented .ant-segmented-item-label {
    padding: 0 8px !important;
    font-size: 12px !important;
    min-height: 26px !important;
    line-height: 26px !important;
  }
}

/* --- Tabs: scrollable on small screens --- */
@media (max-width: 639px) {
  .security-ops-page .ant-tabs-nav {
    margin-bottom: 8px !important;
  }
  .security-ops-page .ant-tabs-tab {
    padding: 6px 0 !important;
    font-size: 12px !important;
  }
}

/* --- Modals: proper mobile sizing --- */
@media (max-width: 575px) {
  .security-ops-page .ant-modal {
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
  }
  .security-ops-page .ant-modal .ant-modal-body {
    padding: 12px !important;
    max-height: calc(100dvh - 140px) !important;
    overflow-y: auto !important;
  }
  .security-ops-page .ant-modal .ant-modal-header {
    padding: 12px 12px 8px !important;
  }
  .security-ops-page .ant-modal .ant-modal-footer {
    padding: 8px 12px !important;
  }
}

/* --- Code blocks inside modals: mobile friendly --- */
@media (max-width: 575px) {
  .security-ops-page .ant-typography code,
  .security-ops-page .ant-typography pre {
    font-size: 11px !important;
    padding: 10px !important;
    word-break: break-all !important;
    white-space: pre-wrap !important;
  }
}

/* --- Alerts: compact on mobile --- */
@media (max-width: 575px) {
  .security-ops-page .ant-alert {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .security-ops-page .ant-alert-icon {
    font-size: 14px !important;
    -webkit-margin-end: 8px !important;
            margin-inline-end: 8px !important;
  }
  .security-ops-page .ant-alert-message {
    font-size: 12px !important;
  }
}

/* --- Space component: reduce gap on small screens --- */
@media (max-width: 575px) {
  .security-ops-page .ant-space-vertical {
    gap: 12px !important;
  }
}

/* --- Row gutters: tighter on small screens --- */
@media (max-width: 575px) {
  .security-ops-page .ant-row {
    margin-left: -6px !important;
    margin-right: -6px !important;
    row-gap: 12px !important;
  }
  .security-ops-page .ant-row > .ant-col {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* --- Form inside modals: stack on mobile --- */
@media (max-width: 575px) {
  .security-ops-page .ant-form-item {
    margin-bottom: 12px !important;
  }
  .security-ops-page .ant-form-item-label {
    padding-bottom: 2px !important;
  }
  .security-ops-page .ant-form-item-label > label {
    font-size: 12px !important;
  }
}

/* --- Progress bars inside tables: constrained width --- */
@media (max-width: 767px) {
  .security-ops-page .ant-table .ant-progress {
    min-width: 60px !important;
    max-width: 80px !important;
  }
}

/* --- Timeline (playbooks page): compact on mobile --- */
@media (max-width: 575px) {
  .security-ops-page .ant-timeline-item-content {
    font-size: 12px !important;
  }
}

/* --- Checklist (incident response): readable on mobile --- */
@media (max-width: 479px) {
  .security-ops-page .ant-checkbox-wrapper {
    font-size: 13px !important;
    align-items: flex-start !important;
  }
  .security-ops-page .ant-checkbox-wrapper .ant-checkbox {
    margin-top: 3px !important;
  }
}

/* --- Page header subtitle: prevent overflow on tiny screens --- */
@media (max-width: 479px) {
  .security-ops-page .ant-page-header-heading-sub-title {
    display: none !important;
  }
}

/* ============================================
   EXTRA-SMALL SCREENS (≤400px) — iPhone SE, Galaxy Fold, etc.
   ============================================ */
@media (max-width: 400px) {
  /* Stat cards: single column at very small sizes */
  .security-ops-page .ant-row > .ant-col[class*="ant-col-xs-12"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Tables: even tighter */
  .security-ops-page .ant-table-thead > tr > th,
  .security-ops-page .ant-table-tbody > tr > td {
    padding: 4px 4px !important;
    font-size: 10px !important;
  }
  .security-ops-page .ant-tag {
    font-size: 9px !important;
    line-height: 16px !important;
    padding: 0 3px !important;
    -webkit-margin-end: 2px !important;
            margin-inline-end: 2px !important;
  }
  .security-ops-page .ant-table .ant-progress {
    min-width: 50px !important;
    max-width: 60px !important;
  }
  .security-ops-page .ant-table .ant-progress .ant-progress-text {
    font-size: 10px !important;
  }

  /* Stat values: even smaller */
  .security-ops-page .ant-statistic-title {
    font-size: 10px !important;
  }
  .security-ops-page .ant-statistic-content {
    font-size: 14px !important;
  }
  .security-ops-page .ant-statistic-content-prefix .anticon {
    font-size: 14px !important;
  }

  /* Cards: minimal padding */
  .security-ops-page .ant-card-body {
    padding: 8px !important;
  }
  .security-ops-page .ant-card-head {
    padding: 0 8px !important;
    min-height: 32px !important;
  }
  .security-ops-page .ant-card-head-title {
    font-size: 12px !important;
  }

  /* Alerts: ultra compact */
  .security-ops-page .ant-alert {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
  .security-ops-page .ant-alert-icon {
    font-size: 12px !important;
    -webkit-margin-end: 6px !important;
            margin-inline-end: 6px !important;
  }
  .security-ops-page .ant-alert-message {
    font-size: 11px !important;
  }

  /* Buttons in tables: icon only when possible */
  .security-ops-page .ant-table .ant-btn-sm {
    padding: 0 4px !important;
    font-size: 11px !important;
    height: 22px !important;
  }
  .security-ops-page .ant-table .ant-space {
    gap: 2px !important;
  }

  /* Segmented: even tighter labels */
  .security-ops-page .ant-segmented .ant-segmented-item-label {
    padding: 0 6px !important;
    font-size: 10px !important;
    min-height: 24px !important;
    line-height: 24px !important;
  }

  /* Tabs: tighter */
  .security-ops-page .ant-tabs-tab {
    padding: 4px 0 !important;
    font-size: 11px !important;
  }

  /* Modals: full width */
  .security-ops-page .ant-modal {
    max-width: calc(100vw - 8px) !important;
    margin: 4px auto !important;
  }
  .security-ops-page .ant-modal .ant-modal-body {
    padding: 8px !important;
  }
  .security-ops-page .ant-modal .ant-modal-header {
    padding: 8px 8px 6px !important;
  }
  .security-ops-page .ant-modal .ant-modal-title {
    font-size: 14px !important;
  }

  /* Timeline: tighter */
  .security-ops-page .ant-timeline-item-content {
    font-size: 11px !important;
  }

  /* Checkbox checklist */
  .security-ops-page .ant-checkbox-wrapper {
    font-size: 12px !important;
  }

  /* Row gutters: minimal */
  .security-ops-page .ant-row {
    margin-left: -4px !important;
    margin-right: -4px !important;
    row-gap: 8px !important;
  }
  .security-ops-page .ant-row > .ant-col {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Header buttons: compact single column */
  .security-ops-page .ant-page-header-heading-extra .ant-btn-lg,
  .security-ops-page .ant-page-header-heading-extra .ant-btn {
    font-size: 11px !important;
    height: 28px !important;
    padding: 2px 8px !important;
  }
}

/* ==========================================================================
   DARKSTATE CONSOLE - ENHANCED UI STYLES
   Modern cyber-security aesthetic with glassmorphism and micro-interactions
   ========================================================================== */

/* ============================================
   CSS CUSTOM PROPERTIES - Enhanced Theme
   ============================================ */
:root {
  /* Enhanced surfaces */
  --console-surface-1: rgba(27, 27, 31, 0.6);
  --console-surface-2: rgba(19, 19, 22, 0.8);
  --console-glass: rgba(27, 27, 31, 0.75);

  /* Enhanced accent colors */
  --console-accent: #E01E45;
  --console-accent-glow: rgba(224, 30, 69, 0.4);
  --console-accent-soft: rgba(224, 30, 69, 0.12);

  /* Success variants */
  --console-success: #00D084;
  --console-success-glow: rgba(0, 208, 132, 0.4);
  --console-success-soft: rgba(0, 208, 132, 0.12);

  /* Warning variants */
  --console-warning: #EFBC2A;
  --console-warning-glow: rgba(239, 188, 42, 0.4);
  --console-warning-soft: rgba(239, 188, 42, 0.12);

  /* Error variants */
  --console-error: #E63946;
  --console-error-glow: rgba(230, 57, 70, 0.4);
  --console-error-soft: rgba(230, 57, 70, 0.12);

  /* Info variants */
  --console-info: #1BA3F0;
  --console-info-glow: rgba(27, 163, 240, 0.4);
  --console-info-soft: rgba(27, 163, 240, 0.12);

  /* Animation timing */
  --console-transition-fast: 150ms;
  --console-transition-base: 250ms;
  --console-transition-slow: 400ms;
  --console-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --console-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Border radius */
  --console-radius-sm: 6px;
  --console-radius-md: 10px;
  --console-radius-lg: 14px;
  --console-radius-xl: 18px;

  /* Shadows */
  --console-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --console-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
  --console-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --console-shadow-glow: 0 0 20px var(--console-accent-glow);
}

/* ============================================
   ENHANCED CARD STYLES
   ============================================ */
.console-card {
  background: linear-gradient(
    145deg,
    rgba(19, 19, 22, 0.8) 0%,
    var(--color-elevated) 100%
  );
  background: linear-gradient(
    145deg,
    var(--console-surface-2) 0%,
    var(--color-elevated) 100%
  );
  border: 1px solid var(--color-border);
  border-radius: 14px;
  border-radius: var(--console-radius-lg);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: all var(--console-transition-base) var(--console-easing);
  position: relative;
  overflow: hidden;
}

.console-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(224, 30, 69, 0.3) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 250ms;
  transition: opacity var(--console-transition-base);
}

.console-card:hover {
  border-color: rgba(224, 30, 69, 0.3);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(224, 30, 69, 0.08);
  box-shadow:
    var(--console-shadow-md),
    0 0 30px rgba(224, 30, 69, 0.08);
  transform: translateY(-2px);
}

.console-card:hover::before {
  opacity: 1;
}

/* Card variants */
.console-card--glass {
  background: rgba(27, 27, 31, 0.75);
  background: var(--console-glass);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.console-card--elevated {
  background: linear-gradient(
    165deg,
    var(--color-paper) 0%,
    var(--color-elevated) 100%
  );
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  box-shadow: var(--console-shadow-sm);
}

.console-card--bordered {
  border: 1px solid rgba(224, 30, 69, 0.2);
}

.console-card--glow {
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(224, 30, 69, 0.12);
  box-shadow:
    var(--console-shadow-md),
    0 0 40px var(--console-accent-soft);
}

/* ============================================
   ENHANCED STAT WIDGET
   ============================================ */
.console-stat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(
    135deg,
    rgba(19, 19, 22, 0.8) 0%,
    var(--color-elevated) 100%
  );
  background: linear-gradient(
    135deg,
    var(--console-surface-2) 0%,
    var(--color-elevated) 100%
  );
  border: 1px solid var(--color-border);
  border-radius: 14px;
  border-radius: var(--console-radius-lg);
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: all var(--console-transition-base) var(--console-easing);
}

.console-stat:hover {
  border-color: rgba(224, 30, 69, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  box-shadow: var(--console-shadow-md);
}

.console-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border-radius: var(--console-radius-md);
  background: rgba(224, 30, 69, 0.12);
  background: var(--console-accent-soft);
  color: #E01E45;
  color: var(--console-accent);
  flex-shrink: 0;
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: all var(--console-transition-base) var(--console-easing);
}

.console-stat:hover .console-stat__icon {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(224, 30, 69, 0.12);
  box-shadow: 0 0 20px var(--console-accent-soft);
}

.console-stat__icon--success {
  background: rgba(0, 208, 132, 0.12);
  background: var(--console-success-soft);
  color: #00D084;
  color: var(--console-success);
}

.console-stat__icon--warning {
  background: rgba(239, 188, 42, 0.12);
  background: var(--console-warning-soft);
  color: #EFBC2A;
  color: var(--console-warning);
}

.console-stat__icon--error {
  background: rgba(230, 57, 70, 0.12);
  background: var(--console-error-soft);
  color: #E63946;
  color: var(--console-error);
}

.console-stat__icon--info {
  background: rgba(27, 163, 240, 0.12);
  background: var(--console-info-soft);
  color: #1BA3F0;
  color: var(--console-info);
}

.console-stat__content {
  flex: 1 1;
  min-width: 0;
}

.console-stat__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.console-stat__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  font-family: var(--font-display);
}

.console-stat__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  border-radius: var(--console-radius-sm);
}

.console-stat__trend--up {
  color: #00D084;
  color: var(--console-success);
  background: rgba(0, 208, 132, 0.12);
  background: var(--console-success-soft);
}

.console-stat__trend--down {
  color: #E63946;
  color: var(--console-error);
  background: rgba(230, 57, 70, 0.12);
  background: var(--console-error-soft);
}

/* ============================================
   ENHANCED STATUS INDICATORS
   ============================================ */
.console-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 18px;
  border-radius: var(--console-radius-xl);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  transition: all 150ms;
  transition: all var(--console-transition-fast);
}

.console-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse-status 2s ease-in-out infinite;
}

.console-status--success {
  background: rgba(0, 208, 132, 0.12);
  background: var(--console-success-soft);
  color: #00D084;
  color: var(--console-success);
  border: 1px solid rgba(0, 208, 132, 0.2);
}

.console-status--success::before {
  background: #00D084;
  background: var(--console-success);
  box-shadow: 0 0 8px rgba(0, 208, 132, 0.4);
  box-shadow: 0 0 8px var(--console-success-glow);
}

.console-status--warning {
  background: rgba(239, 188, 42, 0.12);
  background: var(--console-warning-soft);
  color: #EFBC2A;
  color: var(--console-warning);
  border: 1px solid rgba(239, 188, 42, 0.2);
}

.console-status--warning::before {
  background: #EFBC2A;
  background: var(--console-warning);
  box-shadow: 0 0 8px rgba(239, 188, 42, 0.4);
  box-shadow: 0 0 8px var(--console-warning-glow);
}

.console-status--error {
  background: rgba(230, 57, 70, 0.12);
  background: var(--console-error-soft);
  color: #E63946;
  color: var(--console-error);
  border: 1px solid rgba(230, 57, 70, 0.2);
}

.console-status--error::before {
  background: #E63946;
  background: var(--console-error);
  box-shadow: 0 0 8px rgba(230, 57, 70, 0.4);
  box-shadow: 0 0 8px var(--console-error-glow);
}

.console-status--info {
  background: rgba(27, 163, 240, 0.12);
  background: var(--console-info-soft);
  color: #1BA3F0;
  color: var(--console-info);
  border: 1px solid rgba(27, 163, 240, 0.2);
}

.console-status--info::before {
  background: #1BA3F0;
  background: var(--console-info);
  box-shadow: 0 0 8px rgba(27, 163, 240, 0.4);
  box-shadow: 0 0 8px var(--console-info-glow);
}

.console-status--neutral {
  background: rgba(224, 30, 69, 0.12);
  background: var(--console-accent-soft);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.console-status--neutral::before {
  background: var(--color-text-disabled);
  animation: none;
}

@keyframes pulse-status {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

/* ============================================
   ENHANCED TABLES
   ============================================ */
.console-table {
  background: transparent;
  border-radius: 14px;
  border-radius: var(--console-radius-lg);
  overflow: hidden;
}

.console-table .ant-table {
  background: transparent;
}

.console-table .ant-table-thead > tr > th {
  background: linear-gradient(
    180deg,
    rgba(19, 19, 22, 0.8) 0%,
    var(--color-elevated) 100%
  );
  background: linear-gradient(
    180deg,
    var(--console-surface-2) 0%,
    var(--color-elevated) 100%
  );
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 16px;
}

.console-table .ant-table-tbody > tr > td {
  background: transparent;
  border-bottom: 1px solid rgba(46, 47, 54, 0.5);
  color: var(--color-text-primary);
  padding: 14px 16px;
  transition: background 150ms;
  transition: background var(--console-transition-fast);
}

.console-table .ant-table-tbody > tr:hover > td {
  background: rgba(224, 30, 69, 0.12);
  background: var(--console-accent-soft);
}

.console-table .ant-table-tbody > tr:last-child > td {
  border-bottom: none;
}

/* Table row hover effect */
.console-table-row {
  position: relative;
  cursor: pointer;
}

.console-table-row::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #E01E45;
  background: var(--console-accent);
  transform: scaleY(0);
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform var(--console-transition-fast) var(--console-easing);
}

.console-table-row:hover::after {
  transform: scaleY(1);
}

/* ============================================
   ENHANCED BUTTONS
   ============================================ */
.console-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border-radius: var(--console-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: all var(--console-transition-base) var(--console-easing);
  position: relative;
  overflow: hidden;
}

.console-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 150ms;
  transition: opacity var(--console-transition-fast);
}

.console-btn:hover::before {
  opacity: 1;
}

.console-btn--primary {
  background: linear-gradient(
    135deg,
    #E01E45 0%,
    #FF3D65 100%
  );
  background: linear-gradient(
    135deg,
    var(--console-accent) 0%,
    #FF3D65 100%
  );
  color: #fff;
  box-shadow: 0 4px 16px rgba(224, 30, 69, 0.3);
}

.console-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(224, 30, 69, 0.4);
}

.console-btn--primary:active {
  transform: translateY(0);
}

.console-btn--secondary {
  background: rgba(19, 19, 22, 0.8);
  background: var(--console-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.console-btn--secondary:hover {
  border-color: #E01E45;
  border-color: var(--console-accent);
  color: #E01E45;
  color: var(--console-accent);
  background: rgba(224, 30, 69, 0.12);
  background: var(--console-accent-soft);
}

.console-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.console-btn--ghost:hover {
  background: rgba(224, 30, 69, 0.12);
  background: var(--console-accent-soft);
  color: #E01E45;
  color: var(--console-accent);
}

.console-btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  border-radius: var(--console-radius-md);
}

/* ============================================
   ENHANCED INPUTS
   ============================================ */
.console-input {
  background: rgba(19, 19, 22, 0.8);
  background: var(--console-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  border-radius: var(--console-radius-md);
  padding: 12px 16px;
  color: var(--color-text-primary);
  font-size: 14px;
  transition: all 150ms;
  transition: all var(--console-transition-fast);
}

.console-input:hover {
  border-color: rgba(224, 30, 69, 0.3);
}

.console-input:focus {
  border-color: #E01E45;
  border-color: var(--console-accent);
  box-shadow:
    0 0 0 3px rgba(224, 30, 69, 0.12),
    0 0 20px rgba(224, 30, 69, 0.1);
  box-shadow:
    0 0 0 3px var(--console-accent-soft),
    0 0 20px rgba(224, 30, 69, 0.1);
  outline: none;
}

.console-input::placeholder {
  color: var(--color-text-disabled);
}

/* ============================================
   ENHANCED MODALS & DRAWERS
   ============================================ */
.console-modal .ant-modal-content {
  background: rgba(27, 27, 31, 0.75);
  background: var(--console-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  border-radius: var(--console-radius-xl);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  box-shadow: var(--console-shadow-lg);
}

.console-modal .ant-modal-header {
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  padding: 20px 24px;
}

.console-modal .ant-modal-title {
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 600;
}

.console-modal .ant-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border-radius: var(--console-radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  transition: all 150ms;
  transition: all var(--console-transition-fast);
}

.console-modal .ant-modal-close:hover {
  background: rgba(224, 30, 69, 0.12);
  background: var(--console-accent-soft);
  color: #E01E45;
  color: var(--console-accent);
}

.console-modal .ant-modal-body {
  padding: 24px;
}

.console-modal .ant-modal-footer {
  border-top: 1px solid var(--color-border);
  padding: 16px 24px;
}

/* ============================================
   ENHANCED DROPDOWNS & SELECTS
   ============================================ */
.console-select .ant-select-selector {
  background: rgba(19, 19, 22, 0.8) !important;
  background: var(--console-surface-2) !important;
  border-color: var(--color-border) !important;
  border-radius: 10px !important;
  border-radius: var(--console-radius-md) !important;
  padding: 10px 16px !important;
  min-height: 44px !important;
}

.console-select .ant-select-selection-item,
.console-select .ant-select-selection-placeholder {
  color: var(--color-text-primary);
  line-height: 24px !important;
}

.console-select .ant-select-arrow {
  color: var(--color-text-secondary);
}

.console-select:hover .ant-select-selector {
  border-color: rgba(224, 30, 69, 0.3) !important;
}

.console-select.ant-select-focused .ant-select-selector {
  border-color: #E01E45 !important;
  border-color: var(--console-accent) !important;
  box-shadow: 0 0 0 3px rgba(224, 30, 69, 0.12) !important;
  box-shadow: 0 0 0 3px var(--console-accent-soft) !important;
}

/* Select dropdown */
.console-select-dropdown {
  background: rgba(27, 27, 31, 0.75) !important;
  background: var(--console-glass) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  border-radius: var(--console-radius-lg) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
  box-shadow: var(--console-shadow-lg) !important;
  padding: 8px !important;
}

.console-select-dropdown .ant-select-item {
  border-radius: 6px !important;
  border-radius: var(--console-radius-sm) !important;
  padding: 10px 14px !important;
  margin-bottom: 2px !important;
  transition: all 150ms;
  transition: all var(--console-transition-fast);
}

.console-select-dropdown .ant-select-item-option-active {
  background: rgba(224, 30, 69, 0.12) !important;
  background: var(--console-accent-soft) !important;
}

.console-select-dropdown .ant-select-item-option-selected {
  background: rgba(224, 30, 69, 0.12) !important;
  background: var(--console-accent-soft) !important;
  color: #E01E45 !important;
  color: var(--console-accent) !important;
  font-weight: 600;
}

/* ============================================
   ENHANCED TABS
   ============================================ */
.console-tabs .ant-tabs-nav {
  margin-bottom: 20px;
}

.console-tabs .ant-tabs-tab {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: all 150ms;
  transition: all var(--console-transition-fast);
}

.console-tabs .ant-tabs-tab:hover {
  color: var(--color-text-primary);
}

.console-tabs .ant-tabs-tab-active {
  color: #E01E45 !important;
  color: var(--console-accent) !important;
}

.console-tabs .ant-tabs-ink-bar {
  background: #E01E45 !important;
  background: var(--console-accent) !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
}

.console-tabs .ant-tabs-tab-btn:focus:not(:disabled) {
  color: #E01E45;
  color: var(--console-accent);
}

/* ============================================
   ENHANCED BADGES & TAGS
   ============================================ */
.console-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 18px;
  border-radius: var(--console-radius-xl);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.console-badge--primary {
  background: rgba(224, 30, 69, 0.12);
  background: var(--console-accent-soft);
  color: #E01E45;
  color: var(--console-accent);
}

.console-badge--success {
  background: rgba(0, 208, 132, 0.12);
  background: var(--console-success-soft);
  color: #00D084;
  color: var(--console-success);
}

.console-badge--warning {
  background: rgba(239, 188, 42, 0.12);
  background: var(--console-warning-soft);
  color: #EFBC2A;
  color: var(--console-warning);
}

.console-badge--error {
  background: rgba(230, 57, 70, 0.12);
  background: var(--console-error-soft);
  color: #E63946;
  color: var(--console-error);
}

.console-badge--info {
  background: rgba(27, 163, 240, 0.12);
  background: var(--console-info-soft);
  color: #1BA3F0;
  color: var(--console-info);
}

/* ============================================
   ENHANCED PROGRESS BARS
   ============================================ */
.console-progress .ant-progress-bg {
  background: linear-gradient(
    90deg,
    #E01E45 0%,
    #FF3D65 100%
  ) !important;
  background: linear-gradient(
    90deg,
    var(--console-accent) 0%,
    #FF3D65 100%
  ) !important;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition: width 0.6s var(--console-easing);
}

.console-progress .ant-progress-inner {
  background: rgba(19, 19, 22, 0.8) !important;
  background: var(--console-surface-2) !important;
  border-radius: 18px !important;
  border-radius: var(--console-radius-xl) !important;
}

.console-progress--success .ant-progress-bg {
  background: linear-gradient(
    90deg,
    #00D084 0%,
    #00FF88 100%
  ) !important;
  background: linear-gradient(
    90deg,
    var(--console-success) 0%,
    #00FF88 100%
  ) !important;
}

.console-progress--warning .ant-progress-bg {
  background: linear-gradient(
    90deg,
    #EFBC2A 0%,
    #FFD93D 100%
  ) !important;
  background: linear-gradient(
    90deg,
    var(--console-warning) 0%,
    #FFD93D 100%
  ) !important;
}

.console-progress--error .ant-progress-bg {
  background: linear-gradient(
    90deg,
    #E63946 0%,
    #FF6B6B 100%
  ) !important;
  background: linear-gradient(
    90deg,
    var(--console-error) 0%,
    #FF6B6B 100%
  ) !important;
}

/* ============================================
   ENHANCED TOOLTIPS
   ============================================ */
.console-tooltip .ant-tooltip-inner {
  background: rgba(27, 27, 31, 0.75) !important;
  background: var(--console-glass) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  border-radius: var(--console-radius-md);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--color-text-primary);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  box-shadow: var(--console-shadow-md);
}

.console-tooltip .ant-tooltip-arrow::before,
.console-tooltip .ant-tooltip-arrow::after {
  background: rgba(27, 27, 31, 0.75) !important;
  background: var(--console-glass) !important;
}

/* ============================================
   ENHANCED NOTIFICATIONS
   ============================================ */
.console-notification {
  background: rgba(27, 27, 31, 0.75) !important;
  background: var(--console-glass) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  border-radius: var(--console-radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  box-shadow: var(--console-shadow-lg);
}

.console-notification--success {
  border-left: 4px solid #00D084;
  border-left: 4px solid var(--console-success);
}

.console-notification--warning {
  border-left: 4px solid #EFBC2A;
  border-left: 4px solid var(--console-warning);
}

.console-notification--error {
  border-left: 4px solid #E63946;
  border-left: 4px solid var(--console-error);
}

.console-notification--info {
  border-left: 4px solid #1BA3F0;
  border-left: 4px solid var(--console-info);
}

/* ============================================
   ENHANCED SKELETON LOADERS
   ============================================ */
.console-skeleton {
  position: relative;
  overflow: hidden;
}

.console-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .console-skeleton::after {
    animation: none;
  }
}

/* ============================================
   ENHANCED SCROLLBARS
   ============================================ */
.console-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.console-scroll::-webkit-scrollbar-track {
  background: var(--color-background);
  border-radius: 4px;
}

.console-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
  border: 2px solid var(--color-background);
  -webkit-transition: background 150ms;
  transition: background 150ms;
  -webkit-transition: background var(--console-transition-fast);
  transition: background var(--console-transition-fast);
}

.console-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-disabled);
}

/* Firefox */
.console-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-background);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(224, 30, 69, 0.12);
    box-shadow: 0 0 20px var(--console-accent-soft);
  }
  50% {
    box-shadow: 0 0 40px rgba(224, 30, 69, 0.4);
    box-shadow: 0 0 40px var(--console-accent-glow);
  }
}

.console-animate--fade-in-up {
  animation: fadeInUp 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation: fadeInUp var(--console-transition-slow) var(--console-easing) forwards;
}

.console-animate--fade-in-scale {
  animation: fadeInScale 250ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation: fadeInScale var(--console-transition-base) var(--console-easing) forwards;
}

.console-animate--slide-in-right {
  animation: slideInRight 250ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation: slideInRight var(--console-transition-base) var(--console-easing) forwards;
}

/* Staggered children animation */
.console-stagger > * {
  opacity: 0;
  animation: fadeInUp 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation: fadeInUp var(--console-transition-slow) var(--console-easing) forwards;
}

.console-stagger > *:nth-child(1) { animation-delay: 0ms; }
.console-stagger > *:nth-child(2) { animation-delay: 75ms; }
.console-stagger > *:nth-child(3) { animation-delay: 150ms; }
.console-stagger > *:nth-child(4) { animation-delay: 225ms; }
.console-stagger > *:nth-child(5) { animation-delay: 300ms; }
.console-stagger > *:nth-child(6) { animation-delay: 375ms; }
.console-stagger > *:nth-child(7) { animation-delay: 450ms; }
.console-stagger > *:nth-child(8) { animation-delay: 525ms; }

/* ============================================
   UTILITY CLASSES
   ============================================ */
.console-text-gradient {
  background: linear-gradient(
    135deg,
    #E01E45 0%,
    #FF6B8A 50%,
    #E01E45 100%
  );
  background: linear-gradient(
    135deg,
    var(--console-accent) 0%,
    #FF6B8A 50%,
    var(--console-accent) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow 3s ease-in-out infinite;
}

@keyframes gradient-flow {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

.console-glow {
  box-shadow: 0 0 30px rgba(224, 30, 69, 0.12);
  box-shadow: 0 0 30px var(--console-accent-soft);
}

.console-border-glow {
  border-color: #E01E45;
  border-color: var(--console-accent);
  box-shadow:
    0 0 0 1px #E01E45,
    0 0 20px rgba(224, 30, 69, 0.12);
  box-shadow:
    0 0 0 1px var(--console-accent),
    0 0 20px var(--console-accent-soft);
}

/* ============================================
   RESPONSIVE ENHANCEMENTS
   ============================================ */
@media (max-width: 768px) {
  .console-stat {
    padding: 16px;
    gap: 12px;
  }

  .console-stat__icon {
    width: 40px;
    height: 40px;
  }

  .console-stat__value {
    font-size: 24px;
  }

  .console-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .console-input {
    padding: 10px 14px;
  }
}

/* ============================================
   ENHANCED TABLE RESPONSIVENESS
   ============================================ */
.console-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border-radius: var(--console-radius-lg);
}

.console-table {
  min-width: 600px;
}

@media (max-width: 768px) {
  .console-table {
    font-size: 12px;
  }

  .console-table .ant-table-cell {
    padding: 10px 8px !important;
    white-space: nowrap;
  }

  .console-table .ant-table-thead > tr > th {
    font-size: 11px;
    padding: 12px 8px !important;
  }
}

/* Mobile-friendly table with horizontal scroll hint */
@media (max-width: 640px) {
  .console-table-wrapper::after {
    content: '← →';
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-size: 10px;
    color: var(--color-text-disabled);
    opacity: 0.5;
    pointer-events: none;
  }
}

/* ============================================
   ENHANCED FORM RESPONSIVENESS
   ============================================ */
@media (max-width: 640px) {
  .console-form-item {
    margin-bottom: 16px;
  }

  .console-form-item .ant-form-item-label {
    padding-bottom: 6px;
  }

  .console-form-item .ant-form-item-label > label {
    font-size: 13px;
  }

  .console-form-item .ant-form-item-control-input {
    min-height: 44px;
  }
}

/* ============================================
   ENHANCED BUTTON GLOBAL STYLES
   ============================================ */
.ant-btn {
  border-radius: 10px;
  border-radius: var(--console-radius-md);
  font-weight: 500;
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: all var(--console-transition-base) var(--console-easing);
  min-height: 40px;
  padding: 0 20px;
}

.ant-btn:active {
  transform: scale(0.97);
}

@media (max-width: 640px) {
  .ant-btn {
    min-height: 44px;
    font-size: 13px;
    padding: 0 16px;
  }

  .ant-btn-lg {
    min-height: 52px;
    font-size: 15px;
    padding: 0 24px;
  }

  .ant-btn-sm {
    min-height: 36px;
    font-size: 12px;
    padding: 0 12px;
  }
}

/* ============================================
   ENHANCED INPUT GLOBAL STYLES
   ============================================ */
.ant-input,
.ant-input-affix-wrapper,
.ant-select-selector,
.ant-picker {
  border-radius: 10px !important;
  border-radius: var(--console-radius-md) !important;
  min-height: 44px !important;
  transition: all 150ms;
  transition: all var(--console-transition-fast);
}

@media (max-width: 640px) {
  .ant-input,
  .ant-input-affix-wrapper,
  .ant-select-selector,
  .ant-picker {
    min-height: 48px !important;
    font-size: 15px; /* Prevents iOS zoom on focus */
  }
}

/* ============================================
   ENHANCED CARD GLOBAL STYLES
   ============================================ */
.ant-card {
  border-radius: 14px;
  border-radius: var(--console-radius-lg);
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: all var(--console-transition-base) var(--console-easing);
}

@media (max-width: 640px) {
  .ant-card-body {
    padding: 16px !important;
  }

  .ant-card-head {
    padding: 14px 16px !important;
    min-height: auto !important;
  }

  .ant-card-head-title {
    font-size: 14px !important;
  }
}

/* ============================================
   ENHANCED MODAL RESPONSIVENESS
   ============================================ */
@media (max-width: 640px) {
  .ant-modal {
    max-width: calc(100vw - 32px) !important;
    margin: 16px auto !important;
  }

  .ant-modal-content {
    border-radius: 14px !important;
    border-radius: var(--console-radius-lg) !important;
  }

  .ant-modal-header {
    padding: 16px !important;
  }

  .ant-modal-body {
    padding: 16px !important;
  }

  .ant-modal-footer {
    padding: 12px 16px !important;
  }

  .ant-modal-title {
    font-size: 16px !important;
  }
}

/* ============================================
   ENHANCED DRAWER RESPONSIVENESS
   ============================================ */
@media (max-width: 640px) {
  .ant-drawer-content-wrapper {
    border-radius: 14px 14px 0 0 !important;
    border-radius: var(--console-radius-lg) var(--console-radius-lg) 0 0 !important;
  }

  .ant-drawer-header {
    padding: 16px !important;
  }

  .ant-drawer-body {
    padding: 16px !important;
  }
}

/* ============================================
   ENHANCED PAGINATION RESPONSIVENESS
   ============================================ */
@media (max-width: 640px) {
  .ant-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .ant-pagination-item,
  .ant-pagination-prev,
  .ant-pagination-next {
    min-width: 36px;
    min-height: 36px;
    line-height: 36px;
  }

  .ant-pagination-options {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}

/* ============================================
   ENHANCED TAG & BADGE RESPONSIVENESS
   ============================================ */
@media (max-width: 640px) {
  .ant-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .ant-badge-count {
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
  }
}

@media (max-width: 480px) {
  .console-card {
    border-radius: 10px;
    border-radius: var(--console-radius-md);
  }

  .console-tabs .ant-tabs-tab {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ============================================
   ENHANCED FOOTER SOCIAL LINKS
   ============================================ */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: all var(--console-transition-base) var(--console-easing);
}

.footer-social-link:hover {
  color: #E01E45;
  color: var(--console-accent);
  background: rgba(224, 30, 69, 0.12);
  background: var(--console-accent-soft);
}

/* ============================================
   ENHANCED LINK STYLES
   ============================================ */
.footer-link {
  position: relative;
}

.footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #E01E45;
  background: var(--console-accent);
  transition: width 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: width var(--console-transition-base) var(--console-easing);
}

.footer-link:hover::after {
  width: 100%;
}

/* ============================================
   ENHANCED GLASS CARD
   ============================================ */
.glass-card {
  background: linear-gradient(
    145deg,
    rgba(27, 27, 31, 0.7) 0%,
    rgba(19, 19, 22, 0.9) 100%
  );
  border: 1px solid rgba(224, 30, 69, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: all var(--console-transition-base) var(--console-easing);
}

.glass-card:hover {
  border-color: rgba(224, 30, 69, 0.3);
  box-shadow: 0 8px 32px rgba(224, 30, 69, 0.08);
}

/* ============================================
   ENHANCED METALLIC CARD
   ============================================ */
.metallic-card {
  background: linear-gradient(
    135deg,
    rgba(42, 42, 42, 0.4) 0%,
    rgba(27, 27, 31, 0.6) 50%,
    rgba(42, 42, 42, 0.4) 100%
  );
  border: 1px solid rgba(224, 30, 69, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: all var(--console-transition-base) var(--console-easing);
}

.metallic-card:hover {
  border-color: rgba(224, 30, 69, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* ============================================
   ENHANCED ICON CONTAINER
   ============================================ */
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(224, 30, 69, 0.15) 0%, rgba(224, 30, 69, 0.05) 100%);
  border: 1px solid rgba(224, 30, 69, 0.2);
  transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: all var(--console-transition-base) var(--console-easing);
}

.glass-card:hover .icon-container,
.metallic-card:hover .icon-container {
  background: linear-gradient(135deg, rgba(224, 30, 69, 0.25) 0%, rgba(224, 30, 69, 0.1) 100%);
  border-color: rgba(224, 30, 69, 0.35);
  box-shadow: 0 0 20px rgba(224, 30, 69, 0.15);
}

/* ============================================
   ENHANCED SECTION DIVIDER
   ============================================ */
.section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #E01E45 0%, transparent 100%);
  background: linear-gradient(90deg, var(--console-accent) 0%, transparent 100%);
  border-radius: 2px;
  margin: 0 auto;
}

.section-container {
  padding: 80px 0;
}

@media (max-width: 768px) {
  .section-container {
    padding: 60px 0;
  }
}

@media (max-width: 480px) {
  .section-container {
    padding: 48px 0;
  }
}

/* ============================================
   ENHANCED GLOW TEXT
   ============================================ */
.glow-text {
  text-shadow:
    0 0 8px color-mix(in srgb, rgba(224, 30, 69, 0.12) 40%, transparent),
    0 0 20px color-mix(in srgb, rgba(224, 30, 69, 0.12) 15%, transparent);
  text-shadow:
    0 0 8px color-mix(in srgb, var(--console-accent-soft) 40%, transparent),
    0 0 20px color-mix(in srgb, var(--console-accent-soft) 15%, transparent);
}

/* ============================================
   ENHANCED BACKDROP PATTERNS
   ============================================ */
.hex-pattern {
  position: relative;
}

.hex-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2749%27 viewBox=%270 0 28 49%27%3E%3Cg fill-rule=%27evenodd%27%3E%3Cg fill=%27%23E01E45%27 fill-opacity=%270.03%27%3E%3Cpath d=%27M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.hex-pattern > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   PRICING TABLE MOBILE RESPONSIVENESS
   ============================================ */
.pricing-table-container {
  text-align: center;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px clamp(16px, 3vw, 28px) 40px;
}

.pricing-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.pricing-row > .ant-col {
  display: flex;
}

.pricing-row > .ant-col > .pricing-card {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.pricing-card {
  height: 100%;
  position: relative;
  transition:
    border-color 250ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 250ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
  transition:
    border-color var(--console-transition-base) var(--console-easing),
    box-shadow var(--console-transition-base) var(--console-easing),
    transform var(--console-transition-base) var(--console-easing);
  margin-bottom: 0;
}

.pricing-card:hover {
  border-color: color-mix(in srgb, #E01E45 35%, var(--color-border));
  border-color: color-mix(in srgb, var(--console-accent) 35%, var(--color-border));
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px color-mix(in srgb, #E01E45 12%, transparent);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px color-mix(in srgb, var(--console-accent) 12%, transparent);
  transform: translateY(-2px);
}

.pricing-card--popular:hover {
  box-shadow:
    0 8px 36px rgba(224, 30, 69, 0.2),
    0 0 0 1px color-mix(in srgb, #E01E45 45%, transparent);
  box-shadow:
    0 8px 36px rgba(224, 30, 69, 0.2),
    0 0 0 1px color-mix(in srgb, var(--console-accent) 45%, transparent);
}

/* Popular card highlight */
.pricing-card--popular {
  border: 2px solid #E01E45;
  border: 2px solid var(--console-accent);
  box-shadow: 0 0 30px rgba(224, 30, 69, 0.15);
  padding-top: 32px;
}

.pricing-popular-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.pricing-popular-badge span {
  display: inline-block;
  background: linear-gradient(135deg, #E01E45 0%, #FF3D65 100%);
  background: linear-gradient(135deg, var(--console-accent) 0%, #FF3D65 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 18px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(224, 30, 69, 0.3);
}

.pricing-period {
  font-size: 14px;
  font-weight: 400;
}

.pricing-btn {
  width: 100%;
  max-width: 280px;
  min-height: 44px;
  margin-top: auto;
  align-self: center;
}

/* Mobile pricing card adjustments */
@media (max-width: 768px) {
  .pricing-card {
    padding: 22px 18px 20px !important;
  }

  .pricing-card--popular {
    border-width: 2px;
    padding-top: 30px !important;
  }

  .pricing-popular-badge {
    top: -12px;
  }

  .pricing-popular-badge span {
    font-size: 10px;
    padding: 5px 14px;
  }

  .pricing-btn {
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .pricing-card {
    padding: 18px 14px 16px !important;
  }

  .pricing-card--popular {
    margin: 8px 0;
    border-width: 2px;
    padding-top: 26px !important;
  }

  .pricing-popular-badge {
    top: -10px;
  }

  .pricing-popular-badge span {
    font-size: 9px;
    padding: 4px 12px;
  }

  .pricing-row .ant-col {
    margin-bottom: 0 !important;
  }

  .pricing-btn {
    min-height: 52px;
    font-size: 14px;
  }
}

/* ============================================
   ENHANCED TABLE MOBILE RESPONSIVENESS
   ============================================ */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.table-responsive table {
  min-width: 600px;
}

@media (max-width: 768px) {
  .table-responsive {
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: scroll;
  }

  .table-responsive::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--color-background));
    pointer-events: none;
  }
}

@media (max-width: 480px) {
  .table-responsive {
    margin: 0 -12px;
    padding: 0 12px;
  }

  .ant-table-cell {
    padding: 12px 8px !important;
    font-size: 12px;
  }

  .ant-table-cell:first-child {
    padding-left: 12px !important;
  }

  .ant-table-cell:last-child {
    padding-right: 12px !important;
  }
}

/* ============================================
   ENHANCED FORM MOBILE IMPROVEMENTS
   ============================================ */
@media (max-width: 640px) {
  .ant-form-item {
    margin-bottom: 20px;
  }

  .ant-form-item-label > label {
    font-size: 13px;
    font-weight: 500;
  }

  .ant-form-item-explain-error {
    font-size: 11px;
    margin-top: 4px;
  }

  /* Checkbox and radio mobile improvements */
  .ninjadash-check-list-wrap {
    flex-direction: column;
    gap: 16px;
  }

  .ninjadash-check-list {
    width: 100%;
  }

  .ninjadash-check-list li {
    padding: 8px 0;
  }

  /* Select mobile improvements */
  .ant-select {
    width: 100% !important;
  }

  .ant-select-multiple .ant-select-selection-item {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .ant-form {
    margin: 0 -8px;
  }

  .ant-form-item {
    padding: 0 8px;
  }

  .ant-checkbox-wrapper,
  .ant-radio-wrapper {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .ninjadash-upload-text {
    font-size: 12px;
  }
}

/* ============================================
   ENHANCED UPLOAD FORM MOBILE
   ============================================ */
.ninjadash-upload-form .ant-upload {
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px;
}

.ninjadash-upload-browse {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .ninjadash-upload-form .ant-upload {
    padding: 16px;
  }

  .ninjadash-upload-text {
    font-size: 13px;
    text-align: center;
  }

  .ninjadash-upload-browse {
    width: 100%;
  }
}

/* ============================================
   ENHANCED TOOLTIP STYLING - SMALLER & NICER
   ============================================ */
.ant-tooltip .ant-tooltip-inner {
  background: linear-gradient(
    135deg,
    rgba(30, 30, 35, 0.98) 0%,
    rgba(20, 20, 24, 0.98) 100%
  ) !important;
  border: 1px solid rgba(224, 30, 69, 0.25) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: rgba(229, 231, 235, 0.9) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
  max-width: 200px !important;
}

.ant-tooltip .ant-tooltip-arrow::before,
.ant-tooltip .ant-tooltip-arrow::after {
  background: rgba(30, 30, 35, 0.98) !important;
  border-color: rgba(224, 30, 69, 0.2) !important;
}

.ant-tooltip-arrow-content {
  width: 8px !important;
  height: 8px !important;
}

/* ============================================
   IMPROVED TEXT READABILITY ON DARK BACKGROUNDS
   ============================================ */
.console-text-muted {
  color: rgba(156, 163, 175, 0.85) !important;
}

.console-text-secondary {
  color: rgba(209, 213, 219, 0.8) !important;
}

.console-text-tertiary {
  color: rgba(156, 163, 175, 0.65) !important;
}

/* Status colors with better contrast */
.console-status--success {
  color: rgba(0, 208, 132, 0.95) !important;
}

.console-status--warning {
  color: rgba(239, 188, 42, 0.95) !important;
}

.console-status--error {
  color: rgba(230, 57, 70, 0.95) !important;
}

.console-status--info {
  color: rgba(27, 163, 240, 0.95) !important;
}

/* ============================================
   MOBILE TOOLTIP ADJUSTMENTS
   ============================================ */
@media (max-width: 640px) {
  .ant-tooltip .ant-tooltip-inner {
    font-size: 11px !important;
    padding: 6px 10px !important;
    max-width: 160px !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .console-card,
  .console-stat,
  .console-btn,
  .console-input {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  .console-status::before {
    animation: none !important;
  }
}

/* ============================================
   ANT DESIGN EMPTY STATE DARK MODE FIXES
   ============================================ */
.ant-empty-description {
  color: rgba(156, 163, 175, 0.8) !important;
}

.ant-empty-normal-lower {
  color: rgba(156, 163, 175, 0.6) !important;
}

.ant-empty-image svg {
  fill: rgba(156, 163, 175, 0.4) !important;
}

.ant-empty-img-empty-1 .ant-empty-img-simple-g {
  fill: rgba(156, 163, 175, 0.2) !important;
}

.ant-empty-img-empty-2 .ant-empty-img-simple-g {
  fill: rgba(156, 163, 175, 0.2) !important;
}

.ant-empty-img-empty-3 .ant-empty-img-simple ellipse {
  fill: rgba(156, 163, 175, 0.2) !important;
}

/* ============================================
   ANT DESIGN CARD DARK MODE IMPROVEMENTS
   ============================================ */
.ant-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border-color: #3f3f46 !important;
  border-color: var(--color-border, #3f3f46) !important;
}

.ant-card-head {
  background: transparent !important;
  border-bottom-color: #3f3f46 !important;
  border-bottom-color: var(--color-border, #3f3f46) !important;
}

.ant-card-head-title {
  color: rgba(255, 255, 255, 0.92) !important;
}

.ant-card-body {
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-card-extra {
  color: rgba(209, 213, 219, 0.85) !important;
}

/* ============================================
   ANT DESIGN TABLE DARK MODE IMPROVEMENTS
   ============================================ */
.ant-table-wrapper .ant-table {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
}

.ant-table-thead > tr > th {
  background: rgba(220, 30, 69, 0.06) !important;
  color: rgba(229, 231, 235, 0.9) !important;
  border-bottom: 1px solid #3f3f46 !important;
  border-bottom: 1px solid var(--color-border, #3f3f46) !important;
}

.ant-table-tbody > tr > td {
  border-bottom: 1px solid rgba(63, 63, 70, 0.5) !important;
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-table-tbody > tr:hover > td {
  background: rgba(220, 30, 69, 0.04) !important;
}

.ant-table-tbody > tr.ant-table-row-selected > td {
  background: rgba(220, 30, 69, 0.08) !important;
}

.ant-table-column-sorter {
  color: rgba(156, 163, 175, 0.5) !important;
}

.ant-table-filter-trigger {
  color: rgba(156, 163, 175, 0.6) !important;
}

.ant-table-expanded-row > td {
  background: #09090b !important;
  background: var(--color-background, #09090b) !important;
}

/* ============================================
   ANT DESIGN MODAL DARK MODE IMPROVEMENTS
   ============================================ */
.ant-modal-content {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
}

.ant-modal-header {
  background: transparent !important;
  border-bottom: 1px solid #3f3f46 !important;
  border-bottom: 1px solid var(--color-border, #3f3f46) !important;
}

.ant-modal-title {
  color: rgba(255, 255, 255, 0.92) !important;
}

.ant-modal-body {
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-modal-footer {
  border-top: 1px solid #3f3f46 !important;
  border-top: 1px solid var(--color-border, #3f3f46) !important;
}

.ant-modal-close-x {
  color: rgba(156, 163, 175, 0.6) !important;
}

.ant-modal-close:hover .ant-modal-close-x {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   ANT DESIGN DRAWER DARK MODE IMPROVEMENTS
   ============================================ */
.ant-drawer-content {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
}

.ant-drawer-header {
  background: transparent !important;
  border-bottom: 1px solid #3f3f46 !important;
  border-bottom: 1px solid var(--color-border, #3f3f46) !important;
}

.ant-drawer-title {
  color: rgba(255, 255, 255, 0.92) !important;
}

.ant-drawer-body {
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-drawer-footer {
  border-top: 1px solid #3f3f46 !important;
  border-top: 1px solid var(--color-border, #3f3f46) !important;
}

/* ============================================
   ANT DESIGN POPOVER DARK MODE IMPROVEMENTS
   ============================================ */
.ant-popover-inner {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
}

.ant-popover-title {
  color: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: #3f3f46 !important;
  border-bottom-color: var(--color-border, #3f3f46) !important;
}

.ant-popover-inner-content {
  color: rgba(209, 213, 219, 0.85) !important;
}

/* ============================================
   ANT DESIGN POPCONFIRM DARK MODE IMPROVEMENTS
   ============================================ */
.ant-popconfirm .ant-popover-inner {
  padding: 16px !important;
}

.ant-popconfirm-message-title {
  color: rgba(255, 255, 255, 0.92) !important;
}

.ant-popconfirm-description {
  color: rgba(209, 213, 219, 0.75) !important;
}

/* ============================================
   LOG VIEWER SPECIFIC IMPROVEMENTS
   ============================================ */
.log-viewer-line-number {
  color: rgba(156, 163, 175, 0.5) !important;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 12px !important;
  -webkit-user-select: none !important;
          user-select: none !important;
}

.log-viewer-content {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 12px !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
  line-height: 1.6 !important;
}

.log-highlight {
  background: rgba(255, 214, 102, 0.3) !important;
  padding: 0 2px !important;
  border-radius: 2px !important;
}

/* Log level colors */
.log-level-error {
  color: rgba(239, 68, 68, 0.95) !important;
}

.log-level-warn {
  color: rgba(249, 115, 22, 0.95) !important;
}

.log-level-info {
  color: rgba(59, 130, 246, 0.95) !important;
}

.log-level-debug {
  color: rgba(156, 163, 175, 0.85) !important;
}

/* ============================================
   ALERT RULES SPECIFIC IMPROVEMENTS
   ============================================ */
.alert-stat-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 8px !important;
  padding: 16px 24px !important;
  text-align: center !important;
  min-width: 140px !important;
  transition: border-color 0.3s ease !important;
}

.alert-stat-card:hover {
  border-color: rgba(220, 30, 69, 0.5) !important;
}

.alert-stat-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}

.alert-stat-label {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: rgba(156, 163, 175, 0.75) !important;
}

.alert-active .alert-stat-value {
  color: rgba(239, 68, 68, 0.95) !important;
  animation: alertPulse 2s ease-in-out infinite !important;
}

@keyframes alertPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ============================================
   CONDITION BUILDER IMPROVEMENTS
   ============================================ */
.condition-builder-row {
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}

.condition-tag {
  background: rgba(220, 30, 69, 0.1) !important;
  border: 1px solid rgba(220, 30, 69, 0.2) !important;
  color: rgba(229, 231, 235, 0.9) !important;
}

/* ============================================
   TEST RESULTS IMPROVEMENTS
   ============================================ */
.test-match-item {
  background: #09090b !important;
  background: var(--color-background, #09090b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 6px !important;
  padding: 12px !important;
  margin-bottom: 8px !important;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 12px !important;
}

.test-match-level {
  font-weight: 600 !important;
  margin-right: 8px !important;
}

.test-match-meta {
  color: rgba(156, 163, 175, 0.6) !important;
  font-size: 11px !important;
  margin-top: 4px !important;
}

/* ============================================
   DRAG AND DROP TABLE IMPROVEMENTS
   ============================================ */
.drag-handle {
  color: rgba(156, 163, 175, 0.5) !important;
  cursor: grab !important;
  transition: color 0.2s ease !important;
}

.drag-handle:hover {
  color: rgba(220, 30, 69, 0.8) !important;
}

.drag-handle:active {
  cursor: grabbing !important;
}

.drag-row-hover {
  background: rgba(220, 30, 69, 0.04) !important;
}

.ant-table-row.dragging {
  opacity: 0.6 !important;
  background: rgba(220, 30, 69, 0.08) !important;
}

/* ============================================
   SEARCH BAR IMPROVEMENTS
   ============================================ */
.search-highlight-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  background: rgba(220, 30, 69, 0.05) !important;
  border: 1px solid rgba(220, 30, 69, 0.15) !important;
  border-radius: 6px !important;
}

.search-highlight-info {
  font-size: 13px !important;
  color: rgba(209, 213, 219, 0.85) !important;
  flex: 1 1 200px !important;
  min-width: 0 !important;
}

/* ============================================
   TIMELINE IMPROVEMENTS
   ============================================ */
.timeline-alert-item {
  padding: 4px 0 !important;
}

.timeline-alert-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 4px !important;
}

.timeline-alert-message {
  color: rgba(209, 213, 219, 0.85) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.timeline-alert-timestamp {
  color: rgba(156, 163, 175, 0.6) !important;
  font-size: 11px !important;
}

/* ============================================
   PAGE HEADER IMPROVEMENTS
   ============================================ */
.ninjadash-page-header-main {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border-bottom: 1px solid #3f3f46 !important;
  border-bottom: 1px solid var(--color-border, #3f3f46) !important;
  padding: 16px 24px !important;
}

.ninjadash-page-header-main .ninjadash-page-header-content {
  color: rgba(255, 255, 255, 0.92) !important;
}

.ninjadash-page-header-main .ninjadash-page-subtitle {
  color: rgba(156, 163, 175, 0.75) !important;
  font-size: 13px !important;
}

.ninjadash-page-header-main .ant-breadcrumb {
  color: rgba(156, 163, 175, 0.7) !important;
}

.ninjadash-page-header-main .ant-breadcrumb a {
  color: rgba(224, 30, 69, 0.8) !important;
  transition: color 0.2s ease !important;
}

.ninjadash-page-header-main .ant-breadcrumb a:hover {
  color: rgba(224, 30, 69, 1) !important;
}

/* ============================================
   SIDEBAR NAVIGATION IMPROVEMENTS
   ============================================ */
.ant-menu-dark {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
}

.ant-menu-dark .ant-menu-item {
  color: rgba(209, 213, 219, 0.85) !important;
  border-radius: 8px !important;
  margin: 4px 8px !important;
  transition: all 0.25s ease !important;
}

.ant-menu-dark .ant-menu-item:hover {
  background: rgba(220, 30, 69, 0.1) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.ant-menu-dark .ant-menu-item-selected {
  background: rgba(220, 30, 69, 0.15) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.ant-menu-dark .ant-menu-item-selected::after {
  border-color: rgba(220, 30, 69, 0.8) !important;
}

/* Keep console sidebar active treatment unified (Style.js + theme use left rail, no Ant right-edge tick) */
#admin-main-sider .ant-menu.console-sidebar-nav.ant-menu-dark .ant-menu-item-selected::after,
#admin-main-sider .ant-menu.console-sidebar-nav .ant-menu-item-selected::after {
  display: none !important;
}

.ant-menu-dark .ant-menu-submenu-title {
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-menu-dark .ant-menu-submenu-title:hover {
  background: rgba(220, 30, 69, 0.1) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.ant-menu-dark .ant-menu-sub .ant-menu-item {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

/* ============================================
   HEADER TOP BAR IMPROVEMENTS
   ============================================ */
.ant-layout-header {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border-bottom: 1px solid #3f3f46 !important;
  border-bottom: 1px solid var(--color-border, #3f3f46) !important;
}

.header-search-input {
  background: rgba(14, 14, 14, 0.6) !important;
  border: 1px solid rgba(63, 63, 70, 0.5) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.25s ease !important;
}

.header-search-input:hover {
  border-color: rgba(220, 30, 69, 0.4) !important;
}

.header-search-input:focus,
.header-search-input:focus-within {
  border-color: rgba(220, 30, 69, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(220, 30, 69, 0.1) !important;
  background: rgba(14, 14, 14, 0.8) !important;
}

.header-search-input::placeholder {
  color: rgba(156, 163, 175, 0.5) !important;
}

/* ============================================
   TAG IMPROVEMENTS
   ============================================ */
.ant-tag {
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  transition: all 0.2s ease !important;
}

.ant-tag:hover {
  opacity: 0.85 !important;
}

.ant-tag-red {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: rgba(248, 113, 113, 0.95) !important;
}

.ant-tag-orange {
  background: rgba(249, 115, 22, 0.15) !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
  color: rgba(251, 146, 60, 0.95) !important;
}

.ant-tag-green {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: rgba(74, 222, 128, 0.95) !important;
}

.ant-tag-blue {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: rgba(96, 165, 250, 0.95) !important;
}

.ant-tag-geekblue {
  background: rgba(114, 59, 219, 0.15) !important;
  border-color: rgba(114, 59, 219, 0.3) !important;
  color: rgba(167, 139, 250, 0.95) !important;
}

/* ============================================
   SWITCH IMPROVEMENTS
   ============================================ */
.ant-switch {
  background: rgba(63, 63, 70, 0.8) !important;
  transition: all 0.25s ease !important;
}

.ant-switch:hover:not(.ant-switch-disabled) {
  background: rgba(80, 80, 90, 0.9) !important;
}

.ant-switch-checked {
  background: rgba(220, 30, 69, 0.8) !important;
}

.ant-switch-checked:hover:not(.ant-switch-disabled) {
  background: rgba(220, 30, 69, 0.95) !important;
}

/* ============================================
   CHECKBOX AND RADIO IMPROVEMENTS
   ============================================ */
.ant-checkbox-inner {
  background: rgba(30, 30, 35, 0.9) !important;
  border-color: rgba(63, 63, 70, 0.6) !important;
  transition: all 0.2s ease !important;
}

.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner {
  border-color: rgba(220, 30, 69, 0.6) !important;
}

.ant-checkbox-checked .ant-checkbox-inner {
  background: rgba(220, 30, 69, 0.8) !important;
  border-color: rgba(220, 30, 69, 0.8) !important;
}

.ant-radio-inner {
  background: rgba(30, 30, 35, 0.9) !important;
  border-color: rgba(63, 63, 70, 0.6) !important;
  transition: all 0.2s ease !important;
}

.ant-radio-wrapper:hover .ant-radio-inner,
.ant-radio:hover .ant-radio-inner {
  border-color: rgba(220, 30, 69, 0.6) !important;
}

.ant-radio-checked .ant-radio-inner {
  border-color: rgba(220, 30, 69, 0.8) !important;
}

.ant-radio-checked .ant-radio-inner::after {
  background: rgba(220, 30, 69, 0.9) !important;
}

/* ============================================
   TABS IMPROVEMENTS
   ============================================ */
.ant-tabs-nav {
  margin-bottom: 16px !important;
}

.ant-tabs-tab {
  color: rgba(156, 163, 175, 0.75) !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.ant-tabs-tab:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: rgba(220, 30, 69, 0.95) !important;
  font-weight: 600 !important;
}

.ant-tabs-ink-bar {
  background: linear-gradient(90deg, rgba(220, 30, 69, 0.8), rgba(220, 30, 69, 0.95)) !important;
  height: 3px !important;
  border-radius: 3px !important;
}

.ant-tabs-tabpane {
  color: rgba(209, 213, 219, 0.85) !important;
}

/* ============================================
   BADGE IMPROVEMENTS
   ============================================ */
.ant-badge-count {
  background: rgba(220, 30, 69, 0.9) !important;
  box-shadow: 0 2px 8px rgba(220, 30, 69, 0.3) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
}

.ant-badge-status-processing {
  background: rgba(220, 30, 69, 0.9) !important;
}

.ant-badge-status-success {
  background: rgba(34, 197, 94, 0.9) !important;
}

.ant-badge-status-warning {
  background: rgba(249, 115, 22, 0.9) !important;
}

.ant-badge-status-error {
  background: rgba(239, 68, 68, 0.9) !important;
}

/* ============================================
   PAGINATION IMPROVEMENTS
   ============================================ */
.ant-pagination-item {
  background: rgba(30, 30, 35, 0.8) !important;
  border-color: rgba(63, 63, 70, 0.5) !important;
  border-radius: 6px !important;
}

.ant-pagination-item a {
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-pagination-item:hover {
  border-color: rgba(220, 30, 69, 0.5) !important;
}

.ant-pagination-item:hover a {
  color: rgba(220, 30, 69, 0.9) !important;
}

.ant-pagination-item-active {
  background: rgba(220, 30, 69, 0.15) !important;
  border-color: rgba(220, 30, 69, 0.6) !important;
}

.ant-pagination-item-active a {
  color: rgba(220, 30, 69, 0.95) !important;
}

.ant-pagination-prev button,
.ant-pagination-next button {
  color: rgba(209, 213, 219, 0.75) !important;
}

.ant-pagination-options-size-changer .ant-select-selector {
  background: rgba(30, 30, 35, 0.8) !important;
  border-color: rgba(63, 63, 70, 0.5) !important;
  border-radius: 6px !important;
}

/* ============================================
   STATISTIC IMPROVEMENTS
   ============================================ */
.ant-statistic-title {
  color: rgba(156, 163, 175, 0.7) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.ant-statistic-content {
  color: rgba(255, 255, 255, 0.95) !important;
}

.ant-statistic-content-suffix {
  color: rgba(209, 213, 219, 0.75) !important;
  font-size: 0.75em !important;
}

/* ============================================
   PROGRESS BAR IMPROVEMENTS
   ============================================ */
.ant-progress-inner {
  background: rgba(63, 63, 70, 0.4) !important;
  border-radius: 8px !important;
}

.ant-progress-bg {
  background: linear-gradient(90deg, rgba(220, 30, 69, 0.8), rgba(220, 30, 69, 0.95)) !important;
  border-radius: 8px !important;
}

.ant-progress-success-bg {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.8), rgba(34, 197, 94, 0.95)) !important;
}

.ant-progress-text {
  color: rgba(209, 213, 219, 0.85) !important;
}

/* ============================================
   DROPDOWN MENU IMPROVEMENTS
   ============================================ */
.ant-dropdown-menu {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  padding: 6px !important;
}

.ant-dropdown-menu-item {
  color: rgba(209, 213, 219, 0.85) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
}

.ant-dropdown-menu-item:hover {
  background: rgba(220, 30, 69, 0.1) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.ant-dropdown-menu-item-danger {
  color: rgba(239, 68, 68, 0.9) !important;
}

.ant-dropdown-menu-item-danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: rgba(239, 68, 68, 1) !important;
}

/* ============================================
   SELECT DROPDOWN IMPROVEMENTS
   ============================================ */
.ant-select-dropdown {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.ant-select-item {
  color: rgba(209, 213, 219, 0.85) !important;
  border-radius: 4px !important;
}

.ant-select-item-option-active {
  background: rgba(220, 30, 69, 0.08) !important;
}

.ant-select-item-option-selected {
  background: rgba(220, 30, 69, 0.15) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
}

/* ============================================
   DATE PICKER IMPROVEMENTS
   ============================================ */
.ant-picker {
  background: rgba(30, 30, 35, 0.8) !important;
  border-color: rgba(63, 63, 70, 0.5) !important;
  border-radius: 8px !important;
}

.ant-picker:hover,
.ant-picker-focused {
  border-color: rgba(220, 30, 69, 0.6) !important;
}

.ant-picker-input > input {
  color: rgba(255, 255, 255, 0.9) !important;
}

.ant-picker-suffix,
.ant-picker-separator {
  color: rgba(156, 163, 175, 0.6) !important;
}

.ant-picker-panel-container {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.ant-picker-header,
.ant-picker-content th,
.ant-picker-cell {
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
  background: rgba(220, 30, 69, 0.9) !important;
}

.ant-picker-cell:hover:not(.ant-picker-cell-selected) .ant-picker-cell-inner {
  background: rgba(220, 30, 69, 0.15) !important;
}

/* ============================================
   TIME PICKER IMPROVEMENTS
   ============================================ */
.ant-time-picker-panel {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 8px !important;
}

.ant-time-picker-input {
  background: rgba(30, 30, 35, 0.8) !important;
  border-color: rgba(63, 63, 70, 0.5) !important;
  border-radius: 8px !important;
}

.ant-time-picker-panel-input {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   SLIDER IMPROVEMENTS
   ============================================ */
.ant-slider-rail {
  background: rgba(63, 63, 70, 0.5) !important;
  border-radius: 4px !important;
}

.ant-slider-track {
  background: rgba(220, 30, 69, 0.7) !important;
  border-radius: 4px !important;
}

.ant-slider-handle {
  background: rgba(220, 30, 69, 0.9) !important;
  border-color: rgba(220, 30, 69, 0.9) !important;
  box-shadow: 0 2px 8px rgba(220, 30, 69, 0.3) !important;
}

.ant-slider-handle:hover,
.ant-slider-handle:focus {
  border-color: rgba(220, 30, 69, 1) !important;
  box-shadow: 0 2px 12px rgba(220, 30, 69, 0.4) !important;
}

.ant-slider-mark-text {
  color: rgba(156, 163, 175, 0.6) !important;
}

/* ============================================
   TRANSFER LIST IMPROVEMENTS
   ============================================ */
.ant-transfer-list {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border-color: #3f3f46 !important;
  border-color: var(--color-border, #3f3f46) !important;
  border-radius: 8px !important;
}

.ant-transfer-list-header {
  background: rgba(220, 30, 69, 0.05) !important;
  border-bottom-color: #3f3f46 !important;
  border-bottom-color: var(--color-border, #3f3f46) !important;
}

.ant-transfer-list-header-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

.ant-transfer-list-body {
  background: transparent !important;
}

.ant-transfer-list-item {
  color: rgba(209, 213, 219, 0.85) !important;
  border-radius: 4px !important;
}

.ant-transfer-list-item:hover {
  background: rgba(220, 30, 69, 0.08) !important;
}

.ant-transfer-list-item-checked {
  background: rgba(220, 30, 69, 0.12) !important;
}

/* ============================================
   STEPS IMPROVEMENTS
   ============================================ */
.ant-steps-item-finish .ant-steps-item-icon {
  background: rgba(220, 30, 69, 0.1) !important;
  border-color: rgba(220, 30, 69, 0.6) !important;
}

.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
  color: rgba(220, 30, 69, 0.9) !important;
}

.ant-steps-item-process .ant-steps-item-icon {
  background: rgba(220, 30, 69, 0.9) !important;
  border-color: rgba(220, 30, 69, 0.9) !important;
}

.ant-steps-item-wait .ant-steps-item-icon {
  background: rgba(63, 63, 70, 0.4) !important;
  border-color: rgba(63, 63, 70, 0.6) !important;
}

.ant-steps-item-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

.ant-steps-item-description {
  color: rgba(156, 163, 175, 0.7) !important;
}

/* ============================================
   MESSAGE/ALERT IMPROVEMENTS
   ============================================ */
.ant-message-notice-content {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  padding: 12px 20px !important;
}

.ant-message-success .anticon {
  color: rgba(34, 197, 94, 0.9) !important;
}

.ant-message-error .anticon {
  color: rgba(239, 68, 68, 0.9) !important;
}

.ant-message-warning .anticon {
  color: rgba(249, 115, 22, 0.9) !important;
}

.ant-message-info .anticon {
  color: rgba(59, 130, 246, 0.9) !important;
}

/* ============================================
   NOTIFICATION IMPROVEMENTS
   ============================================ */
.ant-notification-notice {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  padding: 16px 20px !important;
}

.ant-notification-notice-message {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

.ant-notification-notice-description {
  color: rgba(209, 213, 219, 0.8) !important;
}

.ant-notification-notice-close {
  color: rgba(156, 163, 175, 0.6) !important;
}

.ant-notification-notice-close:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   DESCRIPTIONS LIST IMPROVEMENTS
   ============================================ */
.ant-descriptions {
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-descriptions-title {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600 !important;
}

.ant-descriptions-item-label {
  color: rgba(156, 163, 175, 0.75) !important;
  font-size: 13px !important;
}

.ant-descriptions-item-content {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
}

.ant-descriptions-item {
  padding-bottom: 12px !important;
}

/* ============================================
   LIST VIEW IMPROVEMENTS
   ============================================ */
.ant-list {
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-list-header {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600 !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #3f3f46 !important;
  border-bottom: 1px solid var(--color-border, #3f3f46) !important;
}

.ant-list-footer {
  color: rgba(156, 163, 175, 0.75) !important;
  padding: 12px 0 !important;
  border-top: 1px solid #3f3f46 !important;
  border-top: 1px solid var(--color-border, #3f3f46) !important;
}

.ant-list-item {
  border-bottom: 1px solid rgba(63, 63, 70, 0.4) !important;
  padding: 12px 0 !important;
  transition: background 0.2s ease !important;
}

.ant-list-item:hover {
  background: rgba(220, 30, 69, 0.04) !important;
}

.ant-list-item-meta-title {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500 !important;
}

.ant-list-item-meta-description {
  color: rgba(156, 163, 175, 0.7) !important;
  font-size: 12px !important;
}

.ant-list-item-action > li {
  color: rgba(156, 163, 175, 0.7) !important;
}

.ant-list-item-action-split {
  background: rgba(63, 63, 70, 0.5) !important;
}

/* ============================================
   TREE COMPONENT IMPROVEMENTS
   ============================================ */
.ant-tree {
  background: transparent !important;
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-tree-node-content-wrapper {
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.ant-tree-node-content-wrapper:hover {
  background: rgba(220, 30, 69, 0.1) !important;
}

.ant-tree-node-selected {
  background: rgba(220, 30, 69, 0.15) !important;
}

.ant-tree-switcher {
  color: rgba(156, 163, 175, 0.6) !important;
}

.ant-tree-title {
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-tree-directory-tree .ant-tree-node-content-wrapper:hover {
  background: rgba(220, 30, 69, 0.1) !important;
}

.ant-tree-directory-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background: rgba(220, 30, 69, 0.15) !important;
}

/* ============================================
   CAROUSEL/SWIPER IMPROVEMENTS
   ============================================ */
.ant-carousel .slick-slider {
  padding: 0 8px !important;
}

.ant-carousel .slick-dots li button {
  background: rgba(156, 163, 175, 0.4) !important;
  border-radius: 50% !important;
  width: 8px !important;
  height: 8px !important;
}

.ant-carousel .slick-dots li.slick-active button {
  background: rgba(220, 30, 69, 0.9) !important;
}

/* ============================================
   TIMELINE IMPROVEMENTS
   ============================================ */
.ant-timeline {
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-timeline-item-content {
  color: rgba(209, 213, 219, 0.85) !important;
}

.ant-timeline-item-head {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border-color: rgba(220, 30, 69, 0.8) !important;
}

.ant-timeline-item-tail {
  border-color: rgba(63, 63, 70, 0.5) !important;
}

.ant-timeline-item-pending .ant-timeline-item-head {
  background: rgba(63, 63, 70, 0.4) !important;
  border-color: rgba(156, 163, 175, 0.5) !important;
}

/* ============================================
   ANIMATION IMPROVEMENTS
   ============================================ */
@keyframes accentGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(220, 30, 69, 0.3), 0 0 10px rgba(220, 30, 69, 0.2);
  }
  50% {
    box-shadow: 0 0 10px rgba(220, 30, 69, 0.5), 0 0 20px rgba(220, 30, 69, 0.3);
  }
}

@keyframes subtlePulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.accent-glow {
  animation: accentGlow 2s ease-in-out infinite;
}

.subtle-pulse {
  animation: subtlePulse 2s ease-in-out infinite;
}

/* ============================================
   SKELETON LOADING IMPROVEMENTS
   ============================================ */
.ant-skeleton-content .ant-skeleton-title {
  background: linear-gradient(
    90deg,
    rgba(63, 63, 70, 0.5) 25%,
    rgba(220, 30, 69, 0.15) 50%,
    rgba(63, 63, 70, 0.5) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeletonShimmer 1.5s ease-in-out infinite !important;
}

.ant-skeleton-content .ant-skeleton-paragraph > li {
  background: linear-gradient(
    90deg,
    rgba(63, 63, 70, 0.4) 25%,
    rgba(220, 30, 69, 0.1) 50%,
    rgba(63, 63, 70, 0.4) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeletonShimmer 1.5s ease-in-out infinite !important;
}

.ant-skeleton-avatar {
  background: linear-gradient(
    90deg,
    rgba(63, 63, 70, 0.5) 25%,
    rgba(220, 30, 69, 0.15) 50%,
    rgba(63, 63, 70, 0.5) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeletonShimmer 1.5s ease-in-out infinite !important;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .accent-glow,
  .subtle-pulse,
  .ant-skeleton-content .ant-skeleton-title,
  .ant-skeleton-content .ant-skeleton-paragraph > li,
  .ant-skeleton-avatar {
    animation: none !important;
  }
}

/* ============================================
   RESULT/STATUS PAGE IMPROVEMENTS
   ============================================ */
.ant-result {
  padding: 24px !important;
}

.ant-result-title {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600 !important;
}

.ant-result-subtitle {
  color: rgba(156, 163, 175, 0.75) !important;
}

.ant-result-content {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 8px !important;
}

/* ============================================
   COLLAPSE/ACCORDION IMPROVEMENTS
   ============================================ */
.ant-collapse {
  background: transparent !important;
  border: none !important;
}

.ant-collapse-item {
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
}

.ant-collapse-header {
  background: rgba(24, 24, 27, 0.6) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
}

.ant-collapse-content {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border-top: 1px solid #3f3f46 !important;
  border-top: 1px solid var(--color-border, #3f3f46) !important;
}

.ant-collapse-content-box {
  color: rgba(209, 213, 219, 0.85) !important;
  padding: 16px !important;
}

.ant-collapse-expand-icon {
  color: rgba(156, 163, 175, 0.6) !important;
}

/* ============================================
   CARD SPECIFIC IMPROVEMENTS
   ============================================ */
.enhancement-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
  overflow: hidden !important;
}

.enhancement-card:hover {
  border-color: rgba(220, 30, 69, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(220, 30, 69, 0.1) !important;
}

.enhancement-card-header {
  padding: 16px !important;
  border-bottom: 1px solid #3f3f46 !important;
  border-bottom: 1px solid var(--color-border, #3f3f46) !important;
  background: rgba(14, 14, 14, 0.4) !important;
}

.enhancement-card-body {
  padding: 16px !important;
}

.enhancement-card-footer {
  padding: 12px 16px !important;
  border-top: 1px solid #3f3f46 !important;
  border-top: 1px solid var(--color-border, #3f3f46) !important;
  background: rgba(14, 14, 14, 0.3) !important;
}

/* ============================================
   GRID/LAYOUT IMPROVEMENTS
   ============================================ */
.stat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  grid-gap: 16px !important;
  gap: 16px !important;
}

.feature-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  grid-gap: 20px !important;
  gap: 20px !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-accent {
  color: rgba(220, 30, 69, 0.9) !important;
}

.bg-accent-muted {
  background: rgba(220, 30, 69, 0.08) !important;
}

.border-accent {
  border-color: rgba(220, 30, 69, 0.3) !important;
}

.glow-accent {
  box-shadow: 0 0 20px rgba(220, 30, 69, 0.2) !important;
}

.divider-accent {
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(220, 30, 69, 0.4),
    transparent
  ) !important;
}

/* ============================================
   LEAFLET MAP IMPROVEMENTS
   ============================================ */
.leaflet-container {
  background: #09090b !important;
  background: var(--color-background, #09090b) !important;
  font-family: inherit !important;
}

.leaflet-popup-content-wrapper {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.leaflet-popup-content {
  color: rgba(209, 213, 219, 0.9) !important;
  margin: 12px 14px !important;
}

.leaflet-popup-tip {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
}

.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-control-zoom a {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border-color: #3f3f46 !important;
  border-color: var(--color-border, #3f3f46) !important;
  color: rgba(209, 213, 219, 0.9) !important;
}

.leaflet-control-zoom a:hover {
  background: rgba(220, 30, 69, 0.15) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.leaflet-control-attribution {
  background: rgba(24, 24, 27, 0.8) !important;
  color: rgba(156, 163, 175, 0.6) !important;
  font-size: 10px !important;
}

.geo-log-marker {
  background: transparent !important;
  border: none !important;
}

/* ============================================
   LOG VIEWER LIVE IMPROVEMENTS
   ============================================ */
.live-log-wrapper {
  background: #09090b !important;
  background: var(--color-background, #09090b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.live-log-toolbar {
  background: rgba(24, 24, 27, 0.8) !important;
  border-bottom: 1px solid #3f3f46 !important;
  border-bottom: 1px solid var(--color-border, #3f3f46) !important;
  padding: 12px 16px !important;
}

.live-log-container {
  height: 600px !important;
  background: #09090b !important;
  background: var(--color-background, #09090b) !important;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.live-log-line {
  padding: 2px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
  transition: background 0.15s ease !important;
}

.live-log-line:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

.live-log-timestamp {
  color: rgba(156, 163, 175, 0.5) !important;
  font-size: 12px !important;
  -webkit-user-select: none !important;
          user-select: none !important;
  margin-right: 12px !important;
}

.live-log-level {
  display: inline-block !important;
  min-width: 60px !important;
  margin-right: 12px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}

.live-log-level-error {
  color: rgba(239, 68, 68, 0.95) !important;
}

.live-log-level-warn {
  color: rgba(249, 115, 22, 0.95) !important;
}

.live-log-level-info {
  color: rgba(59, 130, 246, 0.95) !important;
}

.live-log-level-debug {
  color: rgba(156, 163, 175, 0.85) !important;
}

.live-log-status-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
}

.live-log-status-connected {
  background: rgba(34, 197, 94, 0.9) !important;
}

.live-log-status-connecting {
  background: rgba(249, 115, 22, 0.9) !important;
  animation: subtlePulse 1.2s ease-in-out infinite !important;
}

.live-log-status-error {
  background: rgba(239, 68, 68, 0.9) !important;
}

.live-log-status-disconnected {
  background: rgba(107, 114, 128, 0.9) !important;
}

/* ============================================
   INTEGRATIONS PAGE IMPROVEMENTS
   ============================================ */
.integrations-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

.integrations-stat-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
}

.integrations-stat-card:hover {
  border-color: rgba(220, 30, 69, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.integrations-stat-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}

.integrations-stat-label {
  font-size: 12px !important;
  color: rgba(156, 163, 175, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.webhook-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  transition: all 0.2s ease !important;
}

.webhook-card:hover {
  border-color: rgba(220, 30, 69, 0.3) !important;
}

.webhook-status-active {
  color: rgba(34, 197, 94, 0.95) !important;
}

.webhook-status-inactive {
  color: rgba(156, 163, 175, 0.6) !important;
}

/* ============================================
   SEARCH BAR ENHANCEMENTS
   ============================================ */
.search-input-wrapper {
  position: relative !important;
  flex: 1 1 !important;
  min-width: 200px !important;
}

.search-input-wrapper .ant-input-affix-wrapper {
  background: rgba(14, 14, 14, 0.6) !important;
  border: 1px solid rgba(63, 63, 70, 0.5) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  transition: all 0.25s ease !important;
}

.search-input-wrapper .ant-input-affix-wrapper:hover {
  border-color: rgba(220, 30, 69, 0.4) !important;
}

.search-input-wrapper .ant-input-affix-wrapper:focus,
.search-input-wrapper .ant-input-affix-wrapper-focused {
  border-color: rgba(220, 30, 69, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(220, 30, 69, 0.1) !important;
}

.search-input-wrapper .ant-input {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
}

.search-input-wrapper .ant-input::placeholder {
  color: rgba(156, 163, 175, 0.5) !important;
}

.search-input-wrapper .ant-input-search-button {
  background: rgba(220, 30, 69, 0.8) !important;
  border-color: rgba(220, 30, 69, 0.8) !important;
}

.search-input-wrapper .ant-input-search-button:hover {
  background: rgba(220, 30, 69, 0.95) !important;
}

/* ============================================
   ALERT RULES PAGE IMPROVEMENTS
   ============================================ */
.alert-rules-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.alert-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  grid-gap: 16px !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.alert-stat-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
}

.alert-stat-card:hover {
  border-color: rgba(220, 30, 69, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.alert-stat-value {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

.alert-stat-label {
  font-size: 12px !important;
  color: rgba(156, 163, 175, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.alert-stat-card.alert-active {
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.alert-stat-card.alert-active .alert-stat-value {
  color: rgba(239, 68, 68, 0.95) !important;
  animation: subtlePulse 2s ease-in-out infinite !important;
}

.condition-builder {
  background: rgba(24, 24, 27, 0.6) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 8px !important;
  padding: 16px !important;
}

.condition-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

.condition-tag {
  background: rgba(220, 30, 69, 0.08) !important;
  border: 1px solid rgba(220, 30, 69, 0.2) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  color: rgba(209, 213, 219, 0.9) !important;
  font-size: 12px !important;
}

.test-results {
  background: #09090b !important;
  background: var(--color-background, #09090b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

.test-match-item {
  background: rgba(24, 24, 27, 0.6) !important;
  border: 1px solid rgba(63, 63, 70, 0.4) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 12px !important;
}

.test-match-level {
  font-weight: 600 !important;
  margin-right: 8px !important;
}

.test-match-meta {
  color: rgba(156, 163, 175, 0.6) !important;
  font-size: 11px !important;
  margin-top: 4px !important;
}

/* ============================================
   SECURITY PAGES IMPROVEMENTS
   ============================================ */
.security-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.threat-level-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

.threat-level-low {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: rgba(74, 222, 128, 0.95) !important;
}

.threat-level-medium {
  background: rgba(249, 115, 22, 0.1) !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
  color: rgba(251, 146, 60, 0.95) !important;
}

.threat-level-high {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: rgba(248, 113, 113, 0.95) !important;
  animation: subtlePulse 1.5s ease-in-out infinite !important;
}

.threat-level-critical {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  color: rgba(239, 68, 68, 1) !important;
  animation: accentGlow 1.5s ease-in-out infinite !important;
}

.security-metric-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: all 0.25s ease !important;
}

.security-metric-card:hover {
  border-color: rgba(220, 30, 69, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.security-metric-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}

.security-metric-label {
  font-size: 13px !important;
  color: rgba(156, 163, 175, 0.75) !important;
}

.security-metric-trend {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 8px !important;
}

.security-metric-trend-up {
  color: rgba(239, 68, 68, 0.9) !important;
}

.security-metric-trend-down {
  color: rgba(34, 197, 94, 0.9) !important;
}

/* ============================================
   REPORT/DASHBOARD CHART IMPROVEMENTS
   ============================================ */
.chart-container {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

.chart-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.chart-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.chart-subtitle {
  font-size: 12px !important;
  color: rgba(156, 163, 175, 0.7) !important;
  margin-top: 2px !important;
}

/* ============================================
   FILTER BAR IMPROVEMENTS
   ============================================ */
.filter-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 16px !important;
  background: rgba(24, 24, 27, 0.6) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 10px !important;
  margin-bottom: 20px !important;
}

.filter-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.filter-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(156, 163, 175, 0.75) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.filter-divider {
  width: 1px !important;
  height: 24px !important;
  background: rgba(63, 63, 70, 0.5) !important;
  margin: 0 4px !important;
}

/* ============================================
   TABLE ENHANCEMENTS
   ============================================ */
.table-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.table-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.table-column-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.table-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.table-status-active {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  color: rgba(74, 222, 128, 0.95) !important;
}

.table-status-inactive {
  background: rgba(107, 114, 128, 0.1) !important;
  border: 1px solid rgba(107, 114, 128, 0.2) !important;
  color: rgba(156, 163, 175, 0.85) !important;
}

.table-status-pending {
  background: rgba(249, 115, 22, 0.1) !important;
  border: 1px solid rgba(249, 115, 22, 0.2) !important;
  color: rgba(251, 146, 60, 0.95) !important;
}

.table-status-error {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: rgba(248, 113, 113, 0.95) !important;
}

/* ============================================
   FORM WIZARD STEPPER IMPROVEMENTS
   ============================================ */
.wizard-stepper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 32px !important;
}

.wizard-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
}

.wizard-step-circle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  z-index: 1 !important;
}

.wizard-step-circle.active {
  background: rgba(220, 30, 69, 0.9) !important;
  color: white !important;
  box-shadow: 0 0 20px rgba(220, 30, 69, 0.3) !important;
}

.wizard-step-circle.completed {
  background: rgba(220, 30, 69, 0.2) !important;
  border: 2px solid rgba(220, 30, 69, 0.6) !important;
  color: rgba(220, 30, 69, 0.9) !important;
}

.wizard-step-circle.pending {
  background: rgba(63, 63, 70, 0.3) !important;
  border: 2px solid rgba(63, 63, 70, 0.5) !important;
  color: rgba(156, 163, 175, 0.7) !important;
}

.wizard-step-label {
  margin-top: 8px !important;
  font-size: 12px !important;
  color: rgba(156, 163, 175, 0.75) !important;
  text-align: center !important;
}

.wizard-step-label.active {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500 !important;
}

.wizard-connector {
  width: 80px !important;
  height: 2px !important;
  background: rgba(63, 63, 70, 0.5) !important;
  margin: 0 8px !important;
  margin-bottom: 28px !important;
}

.wizard-connector.completed {
  background: rgba(220, 30, 69, 0.6) !important;
}

/* ============================================
   ACTION FEEDBACK IMPROVEMENTS
   ============================================ */
.action-feedback {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

.action-feedback-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  color: rgba(74, 222, 128, 0.95) !important;
}

.action-feedback-error {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: rgba(248, 113, 113, 0.95) !important;
}

.action-feedback-warning {
  background: rgba(249, 115, 22, 0.1) !important;
  border: 1px solid rgba(249, 115, 22, 0.2) !important;
  color: rgba(251, 146, 60, 0.95) !important;
}

/* ============================================
   KEYBOARD SHORTCUT HINT IMPROVEMENTS
   ============================================ */
.kbd-shortcut {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  background: rgba(24, 24, 27, 0.8) !important;
  border: 1px solid rgba(63, 63, 70, 0.5) !important;
  border-radius: 4px !important;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 11px !important;
  color: rgba(209, 213, 219, 0.85) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.shortcut-hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  color: rgba(156, 163, 175, 0.6) !important;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(14, 14, 14, 0.5) !important;
  border-radius: 4px !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(63, 63, 70, 0.6) !important;
  border-radius: 4px !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 30, 69, 0.4) !important;
}

/* ============================================
   METRIC/KPI CARD IMPROVEMENTS
   ============================================ */
.metric-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: all 0.25s ease !important;
}

.metric-card:hover {
  border-color: rgba(220, 30, 69, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-2px) !important;
}

.metric-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

.metric-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(220, 30, 69, 0.1) !important;
  color: rgba(220, 30, 69, 0.9) !important;
}

.metric-trend {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}

.metric-trend-positive {
  background: rgba(34, 197, 94, 0.1) !important;
  color: rgba(74, 222, 128, 0.95) !important;
}

.metric-trend-negative {
  background: rgba(239, 68, 68, 0.1) !important;
  color: rgba(248, 113, 113, 0.95) !important;
}

.metric-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}

.metric-label {
  font-size: 13px !important;
  color: rgba(156, 163, 175, 0.7) !important;
}

.metric-chart-area {
  height: 60px !important;
  margin-top: 16px !important;
}

/* ============================================
   AI/ANALYSIS PAGE IMPROVEMENTS
   ============================================ */
.ai-query-input {
  background: rgba(14, 14, 14, 0.6) !important;
  border: 1px solid rgba(63, 63, 70, 0.5) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.ai-query-input:focus-within {
  border-color: rgba(220, 30, 69, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(220, 30, 69, 0.1) !important;
}

.ai-response-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-top: 16px !important;
}

.ai-response-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(63, 63, 70, 0.3) !important;
}

.ai-response-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(220, 30, 69, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(220, 30, 69, 0.9) !important;
}

.ai-response-content {
  color: rgba(209, 213, 219, 0.9) !important;
  line-height: 1.7 !important;
  font-size: 14px !important;
}

.ai-suggestion-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: rgba(220, 30, 69, 0.08) !important;
  border: 1px solid rgba(220, 30, 69, 0.2) !important;
  border-radius: 20px !important;
  color: rgba(209, 213, 219, 0.9) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ai-suggestion-chip:hover {
  background: rgba(220, 30, 69, 0.15) !important;
  border-color: rgba(220, 30, 69, 0.4) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================
   PIPELINE VISUALIZER IMPROVEMENTS
   ============================================ */
.pipeline-container {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  min-height: 400px !important;
}

.pipeline-node {
  background: rgba(24, 24, 27, 0.8) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  min-width: 140px !important;
  transition: all 0.25s ease !important;
}

.pipeline-node:hover {
  border-color: rgba(220, 30, 69, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-2px) !important;
}

.pipeline-node-active {
  border-color: rgba(220, 30, 69, 0.6) !important;
  box-shadow: 0 0 20px rgba(220, 30, 69, 0.15) !important;
}

.pipeline-node-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  background: rgba(220, 30, 69, 0.1) !important;
  color: rgba(220, 30, 69, 0.9) !important;
}

.pipeline-node-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin-bottom: 4px !important;
}

.pipeline-node-status {
  font-size: 11px !important;
  color: rgba(156, 163, 175, 0.7) !important;
}

.pipeline-connector {
  stroke: rgba(63, 63, 70, 0.6) !important;
  stroke-width: 2 !important;
  fill: none !important;
}

.pipeline-connector-active {
  stroke: rgba(220, 30, 69, 0.8) !important;
}

/* ============================================
   REPORT GENERATOR IMPROVEMENTS
   ============================================ */
.report-template-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.report-template-card:hover {
  border-color: rgba(220, 30, 69, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.report-template-card.selected {
  border-color: rgba(220, 30, 69, 0.6) !important;
  background: rgba(220, 30, 69, 0.05) !important;
}

.report-template-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  background: rgba(220, 30, 69, 0.1) !important;
  color: rgba(220, 30, 69, 0.9) !important;
}

.report-template-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin-bottom: 6px !important;
}

.report-template-desc {
  font-size: 12px !important;
  color: rgba(156, 163, 175, 0.7) !important;
  line-height: 1.5 !important;
}

/* ============================================
   CALENDAR/EVENT IMPROVEMENTS
   ============================================ */
.calendar-container {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

.calendar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.calendar-nav-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(24, 24, 27, 0.8) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  color: rgba(209, 213, 219, 0.85) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.calendar-nav-btn:hover {
  background: rgba(220, 30, 69, 0.1) !important;
  border-color: rgba(220, 30, 69, 0.3) !important;
  color: rgba(220, 30, 69, 0.9) !important;
}

.calendar-day-header {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(156, 163, 175, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  padding: 8px 0 !important;
}

.calendar-day {
  aspect-ratio: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.calendar-day:hover {
  background: rgba(220, 30, 69, 0.08) !important;
}

.calendar-day.today {
  background: rgba(220, 30, 69, 0.15) !important;
  border-color: rgba(220, 30, 69, 0.3) !important;
}

.calendar-day.selected {
  background: rgba(220, 30, 69, 0.2) !important;
  border-color: rgba(220, 30, 69, 0.5) !important;
}

.calendar-day-number {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.calendar-day.today .calendar-day-number {
  color: rgba(220, 30, 69, 0.95) !important;
  font-weight: 700 !important;
}

.event-indicator {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  margin-top: 4px !important;
}

.event-indicator-primary {
  background: rgba(220, 30, 69, 0.9) !important;
}

.event-indicator-success {
  background: rgba(34, 197, 94, 0.9) !important;
}

.event-indicator-warning {
  background: rgba(249, 115, 22, 0.9) !important;
}

/* ============================================
   BOOKMARKS/SAVED VIEWS IMPROVEMENTS
   ============================================ */
.bookmark-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  transition: all 0.2s ease !important;
}

.bookmark-card:hover {
  border-color: rgba(220, 30, 69, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.bookmark-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  background: rgba(220, 30, 69, 0.1) !important;
  color: rgba(220, 30, 69, 0.9) !important;
}

.bookmark-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin-bottom: 4px !important;
}

.bookmark-meta {
  font-size: 11px !important;
  color: rgba(156, 163, 175, 0.6) !important;
}

/* ============================================
   COMPARISON VIEW IMPROVEMENTS
   ============================================ */
.comparison-panel {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.comparison-header {
  padding: 16px !important;
  background: rgba(14, 14, 14, 0.6) !important;
  border-bottom: 1px solid #3f3f46 !important;
  border-bottom: 1px solid var(--color-border, #3f3f46) !important;
}

.comparison-body {
  padding: 16px !important;
  min-height: 200px !important;
}

.diff-line {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 12px !important;
  padding: 2px 12px !important;
  line-height: 1.6 !important;
}

.diff-line-added {
  background: rgba(34, 197, 94, 0.1) !important;
  color: rgba(74, 222, 128, 0.95) !important;
}

.diff-line-removed {
  background: rgba(239, 68, 68, 0.1) !important;
  color: rgba(248, 113, 113, 0.95) !important;
}

.diff-line-unchanged {
  color: rgba(156, 163, 175, 0.7) !important;
}

/* ============================================
   CLUSTER ANALYSIS IMPROVEMENTS
   ============================================ */
.cluster-card {
  background: #18181b !important;
  background: var(--color-elevated, #18181b) !important;
  border: 1px solid #3f3f46 !important;
  border: 1px solid var(--color-border, #3f3f46) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: all 0.25s ease !important;
}

.cluster-card:hover {
  border-color: rgba(220, 30, 69, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.cluster-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}

.cluster-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.cluster-badge-critical {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: rgba(248, 113, 113, 0.95) !important;
}

.cluster-badge-warning {
  background: rgba(249, 115, 22, 0.15) !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
  color: rgba(251, 146, 60, 0.95) !important;
}

.cluster-badge-info {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: rgba(96, 165, 250, 0.95) !important;
}

.cluster-count {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 4px !important;
}

.cluster-count-label {
  font-size: 12px !important;
  color: rgba(156, 163, 175, 0.7) !important;
}

.cluster-members {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.cluster-member-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background: rgba(63, 63, 70, 0.3) !important;
  border: 1px solid rgba(63, 63, 70, 0.4) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  color: rgba(209, 213, 219, 0.85) !important;
}

/* =========================================
   AUDIT TRAIL PAGE STYLING
   ========================================= */

.audit-stats-row .ant-col {
  margin-bottom: 12px;
}

.stat-card {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(224, 30, 69, 0.15) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.stat-card:hover {
  border-color: rgba(224, 30, 69, 0.4) !important;
  box-shadow: 0 4px 20px rgba(224, 30, 69, 0.15) !important;
  transform: translateY(-2px);
}

.stat-card .ant-statistic-title {
  color: var(--color-text-secondary) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.stat-card .ant-statistic-content-value {
  color: var(--color-text-primary) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
}

.stat-card .ant-statistic-content-prefix {
  margin-right: 8px;
  color: var(--accent-color) !important;
}

/* Page-level demo callouts only — not header chip (.demo-banner--inline / --full-width). */
.demo-banner:not(.demo-banner--inline):not(.demo-banner--full-width) {
  background: linear-gradient(135deg, rgba(224, 30, 69, 0.1) 0%, rgba(224, 30, 69, 0.05) 100%) !important;
  border: 1px dashed var(--accent-color) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.demo-banner:not(.demo-banner--inline):not(.demo-banner--full-width) .demo-icon {
  font-size: 24px !important;
  color: var(--accent-color) !important;
}

.demo-banner:not(.demo-banner--inline):not(.demo-banner--full-width) .demo-text {
  flex: 1 1;
}

.demo-banner:not(.demo-banner--inline):not(.demo-banner--full-width) .demo-title {
  font-weight: 700 !important;
  color: var(--accent-color) !important;
  font-size: 14px !important;
}

.demo-banner:not(.demo-banner--inline):not(.demo-banner--full-width) .demo-subtitle {
  color: var(--color-text-secondary) !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

.filter-bar {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
  padding: 16px !important;
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
}

.timeline-entry {
  cursor: pointer;
  padding: 12px !important;
  border-radius: 8px !important;
  transition: background 0.2s ease;
}

.timeline-entry:hover {
  background: rgba(224, 30, 69, 0.05) !important;
}

.timeline-entry .entry-action {
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}

.timeline-entry .entry-details {
  color: var(--color-text-secondary) !important;
  font-size: 12px !important;
  margin-top: 6px !important;
}

.timeline-entry .entry-timestamp {
  color: var(--color-text-tertiary) !important;
  font-size: 11px !important;
  margin-top: 6px !important;
}

.metadata-section {
  background: var(--color-background) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-top: 16px !important;
}

.metadata-section .metadata-title {
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.severity-breakdown {
  padding: 16px !important;
}

.severity-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.severity-bar {
  flex: 1 1 !important;
  margin: 0 12px !important;
}

.severity-count {
  font-weight: 700 !important;
  font-size: 14px !important;
  min-width: 40px !important;
  text-align: right !important;
  color: var(--color-text-primary) !important;
}

.category-breakdown {
  padding: 8px 0 !important;
}

.category-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.category-item:last-child {
  border-bottom: none !important;
}

.category-count {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--color-text-primary) !important;
}

/* =========================================
   COMPLIANCE REPORT PAGE STYLING
   ========================================= */

.compliance-score-card {
  text-align: center !important;
  padding: 24px !important;
}

.compliance-score-card .ant-progress-text {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
}

.compliance-score-card .ant-progress-circle .ant-progress-text {
  font-size: 36px !important;
}

.category-breakdown-card {
  padding: 16px !important;
}

.category-row {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}

.category-row .category-label {
  width: 160px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}

.category-row .category-bar {
  flex: 1 1 !important;
  margin: 0 12px !important;
}

.category-row .category-score {
  width: 50px !important;
  text-align: right !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--accent-color) !important;
}

.remediation-card {
  padding: 0 !important;
}

.remediation-item {
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  border-radius: 8px !important;
  background: var(--color-background) !important;
  border-left: 4px solid transparent !important;
  transition: all 0.2s ease;
}

.remediation-item:hover {
  background: var(--color-elevated) !important;
}

.remediation-item.critical { border-left-color: #ff4d4f !important; }
.remediation-item.high { border-left-color: #fa8c16 !important; }
.remediation-item.medium { border-left-color: #faad14 !important; }
.remediation-item.low { border-left-color: #52c41a !important; }

.remediation-item .remediation-name {
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
  color: var(--color-text-primary) !important;
}

.remediation-item .remediation-text {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}

.remediation-item .remediation-meta {
  display: flex !important;
  gap: 8px !important;
}

.trend-card {
  padding: 16px !important;
}

.trend-card .recharts-cartesian-grid-horizontal line,
.trend-card .recharts-cartesian-grid-vertical line {
  stroke: rgba(255, 255, 255, 0.05) !important;
}

.report-history-card .ant-timeline-item-content {
  color: var(--color-text-primary) !important;
}

.report-history-card .ant-timeline-item {
  padding-bottom: 20px !important;
}

/* =========================================
   INCIDENT MANAGER PAGE STYLING
   ========================================= */

.incident-stats-row {
  margin-bottom: 24px !important;
}

.incident-stats-row .ant-col {
  margin-bottom: 12px;
}

.incident-table-card {
  border-radius: 12px !important;
  border: 1px solid rgba(224, 30, 69, 0.15) !important;
  background: var(--color-elevated) !important;
  overflow: hidden;
}

.incident-table-card .ant-card-head {
  border-bottom: 1px solid rgba(224, 30, 69, 0.1) !important;
  background: rgba(224, 30, 69, 0.03) !important;
}

.incident-table-card .ant-card-head-title {
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
}

.stat-card-critical {
  border-left: 4px solid #ff4d4f !important;
}

.stat-card-active {
  border-left: 4px solid #fa8c16 !important;
}

.stat-card-monitoring {
  border-left: 4px solid #1890ff !important;
}

.stat-card-resolved {
  border-left: 4px solid #52c41a !important;
}

.ant-table-row-critical td {
  background: rgba(255, 77, 79, 0.08) !important;
}

.ant-table-row-failure td {
  background: rgba(255, 77, 79, 0.04) !important;
}

.severity-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.pulse-critical .severity-dot {
  animation: pulseCritical 2s infinite !important;
}

@keyframes pulseCritical {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(255, 77, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); }
}

.pulse-high .severity-dot {
  animation: pulseHigh 2s infinite !important;
}

@keyframes pulseHigh {
  0% { box-shadow: 0 0 0 0 rgba(250, 140, 22, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(250, 140, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(250, 140, 22, 0); }
}

.duration-display {
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.duration-active {
  color: #ff4d4f !important;
}

.duration-resolved {
  color: #52c41a !important;
}

.status-steps {
  margin-bottom: 24px !important;
  padding: 20px !important;
  background: var(--color-background) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(224, 30, 69, 0.1) !important;
}

.detail-section {
  margin-bottom: 20px !important;
  padding: 16px !important;
  background: var(--color-elevated) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.detail-section h4 {
  margin-bottom: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--color-text-primary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.timeline-section .ant-timeline {
  padding-top: 8px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}

.add-note-section {
  display: flex !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.status-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

.related-logs-list {
  max-height: 200px !important;
  overflow-y: auto !important;
}

.related-log-item {
  padding: 10px 14px !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  background: var(--color-background) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace !important;
  font-size: 12px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.resolve-section {
  margin-top: 16px !important;
  padding: 16px !important;
  background: rgba(82, 196, 26, 0.05) !important;
  border: 1px solid rgba(82, 196, 26, 0.15) !important;
  border-radius: 10px !important;
}

.active-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  background: #ff4d4f !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-left: 10px !important;
}

/* =========================================
   CHAT APPLICATION STYLING
   ========================================= */

.chat-container {
  height: calc(100vh - 180px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.chat-sidebar {
  width: 300px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: var(--color-elevated) !important;
  display: flex !important;
  flex-direction: column !important;
}

.chat-search {
  padding: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.chat-contacts-list {
  flex: 1 1 !important;
  overflow-y: auto !important;
}

.chat-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.chat-contact-item:hover,
.chat-contact-item.active {
  background: rgba(224, 30, 69, 0.08) !important;
}

.chat-contact-item .avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

.chat-contact-item .contact-info {
  flex: 1 1 !important;
  min-width: 0 !important;
}

.chat-contact-item .contact-name {
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 4px !important;
}

.chat-contact-item .contact-preview {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.chat-main-area {
  flex: 1 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.chat-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--color-elevated) !important;
}

.chat-messages {
  flex: 1 1 !important;
  overflow-y: auto !important;
  padding: 20px !important;
}

.chat-message {
  margin-bottom: 16px !important;
  max-width: 70% !important;
}

.chat-message.sent {
  margin-left: auto !important;
}

.chat-message.received {
  margin-right: auto !important;
}

.chat-message-bubble {
  padding: 12px 16px !important;
  border-radius: 16px !important;
  position: relative !important;
}

.chat-message.sent .chat-message-bubble {
  background: linear-gradient(135deg, var(--accent-color) 0%, #e0113a 100%) !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important;
}

.chat-message.received .chat-message-bubble {
  background: var(--color-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom-left-radius: 4px !important;
}

.chat-message-time {
  font-size: 10px !important;
  color: var(--color-text-tertiary) !important;
  margin-top: 6px !important;
}

.chat-input-area {
  padding: 16px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: var(--color-elevated) !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-end !important;
}

.chat-input {
  flex: 1 1 !important;
  background: var(--color-background) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  padding: 12px 20px !important;
}

.chat-input:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(224, 30, 69, 0.15) !important;
}

/* =========================================
   CALENDAR PAGE STYLING
   ========================================= */

.calendar-container {
  background: var(--color-elevated) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  overflow: hidden;
}

.calendar-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.calendar-nav {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

.calendar-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
}

.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  grid-gap: 1px !important;
  gap: 1px !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.calendar-day-header {
  padding: 12px !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  color: var(--color-text-secondary) !important;
  background: var(--color-background) !important;
}

.calendar-day {
  min-height: 100px !important;
  padding: 8px !important;
  background: var(--color-elevated) !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.calendar-day:hover {
  background: rgba(224, 30, 69, 0.05) !important;
}

.calendar-day.other-month {
  opacity: 0.4 !important;
}

.calendar-day.today {
  background: rgba(224, 30, 69, 0.1) !important;
}

.calendar-day.selected {
  background: rgba(224, 30, 69, 0.15) !important;
  outline: 2px solid var(--accent-color) !important;
  outline-offset: -2px !important;
}

.day-number {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 6px !important;
}

.today .day-number {
  background: var(--accent-color) !important;
  color: #fff !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.event-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  margin-bottom: 3px !important;
}

.event-chip {
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 3px !important;
}

/* =========================================
   CONTACT MANAGEMENT STYLING
   ========================================= */

.contact-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  grid-gap: 20px !important;
  gap: 20px !important;
}

.contact-card {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: all 0.3s ease !important;
}

.contact-card:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-4px) !important;
}

.contact-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}

.contact-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 6px !important;
}

.contact-role {
  font-size: 13px !important;
  color: var(--accent-color) !important;
  margin-bottom: 12px !important;
}

.contact-info-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
}

.contact-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* =========================================
   DASHBOARD DEMO PAGES STYLING
   ========================================= */

.demo-overview-card {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.demo-overview-card:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

.demo-overview-card .ant-card-head {
  background: rgba(224, 30, 69, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.demo-overview-card .ant-card-head-title {
  font-weight: 700 !important;
}

.demo-overview-card .ant-card-body {
  padding: 20px !important;
}

.top-performer-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px !important;
  border-radius: 8px !important;
  transition: background 0.2s ease !important;
}

.top-performer-item:hover {
  background: rgba(224, 30, 69, 0.05) !important;
}

.top-performer-rank {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.top-performer-rank.gold {
  background: linear-gradient(135deg, #ffd700, #ffb347) !important;
  color: #1a1a2e !important;
}

.top-performer-rank.silver {
  background: linear-gradient(135deg, #c0c0c0, #a8a8a8) !important;
  color: #1a1a2e !important;
}

.top-performer-rank.bronze {
  background: linear-gradient(135deg, #cd7f32, #b8860b) !important;
  color: #fff !important;
}

.top-performer-info {
  flex: 1 1 !important;
}

.top-performer-name {
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}

.top-performer-stats {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
}

.activity-item {
  display: flex !important;
  gap: 14px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.activity-item:last-child {
  border-bottom: none !important;
}

.activity-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

.activity-content {
  flex: 1 1 !important;
}

.activity-text {
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 4px !important;
}

.activity-time {
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
}

.progress-card {
  background: var(--color-elevated) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

.progress-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.progress-label {
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}

.progress-value {
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--accent-color) !important;
}

/* =========================================
   ENHANCED ANIMATIONS
   ========================================= */

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmerGradient {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-fade-in-scale {
  animation: fadeInScale 0.3s ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease-out forwards;
}

.animate-slide-in-up {
  animation: slideInUp 0.3s ease-out forwards;
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-elevated) 25%,
    rgba(224, 30, 69, 0.1) 50%,
    var(--color-elevated) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmerGradient 1.5s infinite !important;
}

/* =========================================
   ENHANCED RESPONSIVE DESIGN
   ========================================= */

@media (max-width: 768px) {
  .filter-bar {
    padding: 12px !important;
  }

  .filter-bar .ant-select,
  .filter-bar .ant-picker,
  .filter-bar .ant-input {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  .stat-card {
    padding: 16px !important;
  }

  .stat-card .ant-statistic-content-value {
    font-size: 24px !important;
  }

  .chat-sidebar {
    display: none !important;
  }

  .chat-sidebar.mobile-visible {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important;
  }

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

  .calendar-day {
    min-height: 60px !important;
    padding: 4px !important;
  }
}

@media (max-width: 576px) {
  .page-header-main .ant-page-header-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .page-header-main .ant-page-header-heading-extra {
    margin-top: 12px !important;
  }

  .demo-banner:not(.demo-banner--inline):not(.demo-banner--full-width) {
    flex-direction: column !important;
    text-align: center !important;
  }

  .category-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .category-row .category-bar {
    width: 100% !important;
    margin: 10px 0 !important;
  }
}

/* =========================================
   CHART COMPONENTS STYLING
   ========================================= */

.chartjs-container {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: all 0.3s ease !important;
}

.chartjs-container:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

.chart-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

.chart-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
}

.chart-legend {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
}

.legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
}

.legend-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
}

.chartjs-tooltip {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(224, 30, 69, 0.2) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.chart-stat-card {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  text-align: center;
}

.chart-stat-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--accent-color) !important;
  margin-bottom: 4px !important;
}

.chart-stat-label {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.chart-trend-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.chart-trend-indicator.up {
  background: rgba(82, 196, 26, 0.15) !important;
  color: #52c41a !important;
}

.chart-trend-indicator.down {
  background: rgba(255, 77, 79, 0.15) !important;
  color: #ff4d4f !important;
}

/* =========================================
   SECURITY PAGES STYLING
   ========================================= */

.security-dashboard {
  background: var(--color-elevated) !important;
  border-radius: 12px !important;
}

.threat-card {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.threat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--accent-color), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.threat-card:hover::before {
  opacity: 1 !important;
}

.threat-card:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.threat-level-critical {
  border-left: 4px solid #ff4d4f !important;
}

.threat-level-high {
  border-left: 4px solid #fa8c16 !important;
}

.threat-level-medium {
  border-left: 4px solid #faad14 !important;
}

.threat-level-low {
  border-left: 4px solid #52c41a !important;
}

.security-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  grid-gap: 16px !important;
  gap: 16px !important;
}

.security-metric-item {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: all 0.2s ease !important;
}

.security-metric-item:hover {
  border-color: rgba(224, 30, 69, 0.2) !important;
  background: rgba(224, 30, 69, 0.03) !important;
}

.security-metric-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

.security-metric-info {
  flex: 1 1 !important;
}

.security-metric-value {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
}

.security-metric-label {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
}

.alert-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.alert-badge.critical {
  background: #ff4d4f !important;
}

.alert-badge.high {
  background: #fa8c16 !important;
}

.alert-badge.medium {
  background: #faad14 !important;
  color: #1a1a2e !important;
}

/* =========================================
   SIEM CONSOLE STYLING
   ========================================= */

.siem-console {
  background: var(--color-background) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

.siem-timeline {
  position: relative !important;
  padding-left: 30px !important;
}

.siem-timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 10px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(180deg, var(--accent-color) 0%, rgba(224, 30, 69, 0.1) 100%) !important;
}

.siem-event {
  position: relative !important;
  margin-bottom: 20px !important;
  padding: 14px !important;
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.siem-event::before {
  content: '' !important;
  position: absolute !important;
  left: -24px !important;
  top: 18px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--accent-color) !important;
  border: 2px solid var(--color-background) !important;
}

.siem-event:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.siem-event-time {
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
  margin-bottom: 6px !important;
}

.siem-event-title {
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 4px !important;
}

.siem-event-description {
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
}

/* =========================================
   THREAT INTELLIGENCE STYLING
   ========================================= */

.threat-intel-card {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.threat-intel-card:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
  transform: translateY(-2px) !important;
}

.threat-intel-header {
  padding: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.threat-intel-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(224, 30, 69, 0.1) !important;
  color: var(--accent-color) !important;
}

.threat-intel-title {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--color-text-primary) !important;
}

.threat-intel-body {
  padding: 16px !important;
}

.threat-intel-stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-gap: 12px !important;
  gap: 12px !important;
}

.threat-intel-stat {
  text-align: center !important;
  padding: 12px !important;
  background: var(--color-background) !important;
  border-radius: 8px !important;
}

.threat-intel-stat-value {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--accent-color) !important;
}

.threat-intel-stat-label {
  font-size: 11px !important;
  color: var(--color-text-secondary) !important;
  text-transform: uppercase !important;
}

/* =========================================
   VULNERABILITY MANAGEMENT STYLING
   ========================================= */

.vuln-severity-chart {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 20px !important;
  height: 200px !important;
  padding: 20px !important;
}

.vuln-bar {
  width: 60px !important;
  border-radius: 8px 8px 0 0 !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
}

.vuln-bar:hover {
  filter: brightness(1.2) !important;
  transform: scaleY(1.05) !important;
  transform-origin: bottom !important;
}

.vuln-bar.critical { background: linear-gradient(180deg, #ff4d4f, #ff6b6b) !important; }
.vuln-bar.high { background: linear-gradient(180deg, #fa8c16, #ffb347) !important; }
.vuln-bar.medium { background: linear-gradient(180deg, #faad14, #ffd666) !important; }
.vuln-bar.low { background: linear-gradient(180deg, #52c41a, #73d13d) !important; }

.vuln-bar-label {
  position: absolute !important;
  bottom: -24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
}

.vuln-bar-value {
  position: absolute !important;
  top: -24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
}

.vuln-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px !important;
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  transition: all 0.2s ease !important;
}

.vuln-list-item:hover {
  border-color: rgba(224, 30, 69, 0.2) !important;
  background: rgba(224, 30, 69, 0.03) !important;
}

.vuln-severity-badge {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

.vuln-severity-badge.critical { background: rgba(255, 77, 79, 0.15) !important; color: #ff4d4f !important; }
.vuln-severity-badge.high { background: rgba(250, 140, 22, 0.15) !important; color: #fa8c16 !important; }
.vuln-severity-badge.medium { background: rgba(250, 173, 20, 0.15) !important; color: #faad14 !important; }
.vuln-severity-badge.low { background: rgba(82, 196, 26, 0.15) !important; color: #52c41a !important; }

.vuln-info {
  flex: 1 1 !important;
}

.vuln-title {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 4px !important;
}

.vuln-cve {
  font-size: 12px !important;
  color: var(--accent-color) !important;
  font-family: 'SF Mono', monospace !important;
}

/* =========================================
   INCIDENT RESPONSE STYLING
   ========================================= */

.ir-playbook-card {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.ir-playbook-card:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
}

.ir-playbook-header {
  padding: 16px !important;
  background: rgba(224, 30, 69, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ir-playbook-title {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--color-text-primary) !important;
}

.ir-playbook-body {
  padding: 16px !important;
}

.ir-step {
  display: flex !important;
  gap: 14px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.ir-step:last-child {
  border-bottom: none !important;
}

.ir-step-number {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--accent-color) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  flex-shrink: 0;
}

.ir-step-content {
  flex: 1 1 !important;
}

.ir-step-title {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 4px !important;
}

.ir-step-description {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
}

/* =========================================
   LIVE METRICS STYLING
   ========================================= */

.live-metrics-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  grid-gap: 16px !important;
  gap: 16px !important;
}

.live-metric-card {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  position: relative;
  overflow: hidden;
}

.live-metric-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 60px !important;
  height: 60px !important;
  background: radial-gradient(circle, rgba(224, 30, 69, 0.1) 0%, transparent 70%) !important;
  pointer-events: none;
}

.live-metric-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

.live-metric-label {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.live-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #52c41a !important;
  animation: livePulse 2s infinite !important;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.live-metric-value {
  font-size: 36px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}

.live-metric-trend {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
}

.live-metric-trend.up {
  color: #52c41a !important;
}

.live-metric-trend.down {
  color: #ff4d4f !important;
}

.live-metric-sparkline {
  margin-top: 12px !important;
  height: 40px !important;
}

/* =========================================
   REALTIME ALERTS STYLING
   ========================================= */

.realtime-alerts {
  max-height: 400px !important;
  overflow-y: auto !important;
}

.realtime-alert-item {
  display: flex !important;
  gap: 14px !important;
  padding: 14px !important;
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  animation: slideInUp 0.3s ease-out !important;
}

.realtime-alert-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

.realtime-alert-icon.critical { background: rgba(255, 77, 79, 0.15) !important; color: #ff4d4f !important; }
.realtime-alert-icon.high { background: rgba(250, 140, 22, 0.15) !important; color: #fa8c16 !important; }
.realtime-alert-icon.medium { background: rgba(250, 173, 20, 0.15) !important; color: #faad14 !important; }
.realtime-alert-icon.low { background: rgba(82, 196, 26, 0.15) !important; color: #52c41a !important; }

.realtime-alert-content {
  flex: 1 1 !important;
  min-width: 0 !important;
}

.realtime-alert-title {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 4px !important;
}

.realtime-alert-description {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 6px !important;
}

.realtime-alert-meta {
  display: flex !important;
  gap: 12px !important;
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
}

/* =========================================
   BOOKMARKS & SAVED VIEWS STYLING
   ========================================= */

.bookmark-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}

.bookmark-item:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
  background: rgba(224, 30, 69, 0.03) !important;
}

.bookmark-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(224, 30, 69, 0.1) !important;
  color: var(--accent-color) !important;
  flex-shrink: 0;
}

.bookmark-info {
  flex: 1 1 !important;
  min-width: 0 !important;
}

.bookmark-name {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 2px !important;
}

.bookmark-meta {
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
}

.bookmark-actions {
  display: flex !important;
  gap: 8px !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.bookmark-item:hover .bookmark-actions {
  opacity: 1 !important;
}

/* =========================================
   PIPELINE VISUALIZER STYLING
   ========================================= */

.pipeline-container {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  min-height: 400px !important;
}

.pipeline-node {
  background: var(--color-background) !important;
  border: 2px solid rgba(224, 30, 69, 0.3) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
  position: relative;
}

.pipeline-node:hover {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 20px rgba(224, 30, 69, 0.2) !important;
  transform: translateY(-2px) !important;
}

.pipeline-node.active {
  border-color: #52c41a !important;
  background: rgba(82, 196, 26, 0.05) !important;
}

.pipeline-node.error {
  border-color: #ff4d4f !important;
  background: rgba(255, 77, 79, 0.05) !important;
}

.pipeline-node-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
  font-size: 20px !important;
}

.pipeline-node-title {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 4px !important;
}

.pipeline-node-status {
  font-size: 11px !important;
  color: var(--color-text-secondary) !important;
}

.pipeline-connector {
  stroke: var(--accent-color) !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke-dasharray: 8 4 !important;
  animation: pipelineFlow 1s linear infinite !important;
}

@keyframes pipelineFlow {
  from { stroke-dashoffset: 12; }
  to { stroke-dashoffset: 0; }
}

/* =========================================
   SHARED VIEWS STYLING
   ========================================= */

.shared-view-card {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.shared-view-card:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-2px) !important;
}

.shared-view-preview {
  height: 160px !important;
  background: var(--color-background) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  overflow: hidden;
}

.shared-view-body {
  padding: 16px !important;
}

.shared-view-title {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 8px !important;
  word-break: break-word !important;
}

.shared-view-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
}

.shared-view-author {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ---- Shared Views responsive (tablet) ---- */
@media (max-width: 768px) {
  .shared-view-preview {
    height: 120px !important;
  }

  .shared-view-body {
    padding: 12px !important;
  }

  .shared-view-title {
    font-size: 14px !important;
  }
}

/* ---- Shared Views responsive (phone) ---- */
@media (max-width: 480px) {
  .shared-view-card {
    border-radius: 10px !important;
  }

  .shared-view-preview {
    height: 90px !important;
  }

  .shared-view-body {
    padding: 10px !important;
  }

  .shared-view-title {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .shared-view-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
}

/* ============================================
   MOBILE CONSOLE EXPERIENCE IMPROVEMENTS
   ============================================ */

/* Extra small devices (320px - 479px) */
@media (max-width: 479px) {
  /* Console Layout */
  .console-layout {
    min-height: 100vh !important;
  }

  .console-header {
    padding: 8px 12px !important;
    height: 50px !important;
  }

  .console-header .logo {
    font-size: 16px !important;
  }

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

  /* Sidebar */
  .sidebar {
    width: 280px !important;
    max-width: 80vw !important;
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  .sidebar-menu {
    padding: 8px !important;
  }

  .sidebar-menu-item {
    padding: 12px !important;
    font-size: 14px !important;
    margin-bottom: 4px !important;
  }

  /* Main Content */
  .console-content {
    padding: 12px !important;
    margin: 0 !important;
  }

  /* Page Header */
  .page-header {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }

  .page-title {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }

  .page-subtitle {
    font-size: 13px !important;
  }

  /* Cards */
  .content-card {
    padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  .card-title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  /* Stat Cards */
  .stat-card {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }

  .stat-card .ant-statistic-title {
    font-size: 10px !important;
  }

  .stat-card .ant-statistic-content-value {
    font-size: 24px !important;
  }

  /* Tables */
  .ant-table {
    font-size: 12px !important;
  }

  .ant-table-thead > tr > th {
    padding: 10px 8px !important;
    font-size: 11px !important;
  }

  .ant-table-tbody > tr > td {
    padding: 10px 8px !important;
  }

  /* Forms */
  .form-section {
    padding: 16px !important;
  }

  .form-group {
    margin-bottom: 16px !important;
  }

  .form-label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .form-input {
    padding: 10px 12px !important;
    font-size: 14px !important;
    min-height: 40px !important;
  }

  /* Buttons */
  .action-btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
    min-height: 40px !important;
  }

  /* Filter Bar */
  .filter-bar {
    padding: 12px !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .filter-group {
    width: 100% !important;
  }

  /* Charts */
  .chart-container {
    padding: 12px !important;
    min-height: 200px !important;
  }

  .chart-legend {
    font-size: 11px !important;
    gap: 8px !important;
  }

  /* Alerts & Notifications */
  .alert-item {
    padding: 12px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
  }

  .alert-title {
    font-size: 13px !important;
  }

  .alert-description {
    font-size: 12px !important;
  }

  /* Timeline */
  .timeline-item {
    padding: 12px !important;
    margin-left: 0 !important;
  }

  .timeline-marker {
    width: 24px !important;
    height: 24px !important;
  }

  /* Modal & Drawer */
  .ant-drawer-content {
    padding: 16px !important;
  }

  .ant-drawer-header {
    padding: 12px 16px !important;
  }

  .ant-drawer-title {
    font-size: 16px !important;
  }

  .ant-modal-content {
    padding: 16px !important;
  }

  .ant-modal-header {
    padding: 12px 16px !important;
  }

  .ant-modal-title {
    font-size: 16px !important;
  }

  /* Tabs */
  .ant-tabs-nav {
    margin-bottom: 12px !important;
  }

  .ant-tabs-tab {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Pagination */
  .ant-pagination {
    font-size: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .ant-pagination-item {
    min-width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
  }

  /* Search */
  .search-container {
    margin-bottom: 16px !important;
  }

  .search-input {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* Tags & Badges */
  .ant-tag {
    padding: 2px 8px !important;
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }

  .severity-badge {
    padding: 2px 8px !important;
    font-size: 10px !important;
  }

  /* Avatar */
  .ant-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  /* Dropdown */
  .ant-dropdown-menu {
    padding: 4px !important;
  }

  .ant-dropdown-menu-item {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Tooltip */
  .ant-tooltip-inner {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* Progress */
  .ant-progress-text {
    font-size: 12px !important;
  }

  /* Steps */
  .ant-steps-item-title {
    font-size: 12px !important;
  }

  /* Empty State */
  .ant-empty-description {
    font-size: 13px !important;
  }

  /* Descriptions */
  .ant-descriptions-item-label {
    font-size: 12px !important;
    padding: 8px !important;
  }

  .ant-descriptions-item-content {
    font-size: 13px !important;
    padding: 8px !important;
  }
}

/* Small devices (480px - 639px) */
@media (min-width: 480px) and (max-width: 639px) {
  .console-header {
    padding: 10px 16px !important;
  }

  .console-content {
    padding: 16px !important;
  }

  .content-card {
    padding: 20px !important;
  }

  .page-title {
    font-size: 22px !important;
  }

  .sidebar {
    width: 260px !important;
  }

  .chart-container {
    min-height: 240px !important;
  }
}

/* Tablet devices (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  .console-content {
    padding: 20px !important;
  }

  .sidebar {
    width: 240px !important;
  }

  .content-card {
    padding: 20px !important;
  }
}

/* Touch interactions */
@media (hover: none) and (pointer: coarse) {
  .content-card:active {
    transform: scale(0.99) !important;
  }

  .stat-card:active {
    transform: scale(0.98) !important;
    opacity: 0.95 !important;
  }

  .action-btn:active {
    transform: scale(0.97) !important;
  }

  .table-row:active {
    background: rgba(224, 30, 69, 0.08) !important;
  }

  .sidebar-menu-item:active {
    background: rgba(224, 30, 69, 0.15) !important;
  }

  /* Larger touch targets */
  .action-btn,
  .filter-btn,
  .search-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .sidebar-menu-item {
    min-height: 48px !important;
  }

  .form-input {
    min-height: 44px !important;
  }

  /* Touch feedback */
  .ant-btn:active {
    opacity: 0.8 !important;
  }

  .ant-tabs-tab:active {
    opacity: 0.7 !important;
  }
}

/* Scroll performance */
@media (max-width: 767px) {
  .console-content {
    -webkit-overflow-scrolling: touch !important;
  }

  .ant-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Reduce animations */
  .live-pulse {
    animation-duration: 2s !important;
  }

  .status-indicator {
    animation-duration: 1.5s !important;
  }
}

/* Safe area support */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 639px) {
    .console-footer {
      padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-nav-bar {
      padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .action-sheet {
      padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .console-header {
    height: 40px !important;
    padding: 6px 12px !important;
  }

  .sidebar {
    top: 40px !important;
  }

  .page-header {
    padding: 8px !important;
    margin-bottom: 8px !important;
  }

  .chart-container {
    min-height: 160px !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .content-card,
  .stat-card {
    border-width: 2px !important;
  }

  .action-btn {
    border-width: 2px !important;
  }

  .form-input {
    border-width: 2px !important;
  }
}

/* Dark mode OLED optimization */
@media (max-width: 639px) and (prefers-color-scheme: dark) {
  .console-layout {
    background-color: #000 !important;
  }

  .content-card {
    background: rgba(0, 0, 0, 0.8) !important;
    -webkit-backdrop-filter: blur(16px) !important;
            backdrop-filter: blur(16px) !important;
  }

  .sidebar {
    background: rgba(0, 0, 0, 0.95) !important;
  }
}

/* Print styles */
@media print {
  .sidebar,
  .console-header,
  .mobile-nav-bar,
  .action-btn,
  .filter-bar {
    display: none !important;
  }

  .console-content {
    padding: 0 !important;
  }

  .content-card,
  .stat-card {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}

/* Focus indicators for accessibility */
@media (max-width: 767px) {
  .action-btn:focus-visible,
  .form-input:focus-visible,
  .sidebar-menu-item:focus-visible {
    outline: 2px solid var(--accent-color) !important;
    outline-offset: 2px !important;
  }
}

/* Better spacing for mobile grids */
@media (max-width: 639px) {
  .ant-row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  .ant-col {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 12px !important;
  }
}

/* Responsive grid adjustments */
@media (max-width: 479px) {
  .stats-grid .ant-col {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .filter-row .ant-col {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 998 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.mobile-menu-overlay.active {
  display: block !important;
  opacity: 1 !important;
}

/* Bottom action bar for mobile */
.mobile-bottom-bar {
  display: none !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--color-elevated) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 8px 16px !important;
  z-index: 100 !important;
  gap: 8px !important;
}

@media (max-width: 767px) {
  .mobile-bottom-bar {
    display: flex !important;
  }

  .console-content {
    padding-bottom: 80px !important;
  }
}

@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-bottom-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================
   ADDITIONAL COMPONENT IMPROVEMENTS
   ============================================ */

/* Result List Improvements */
.result-list-item {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  transition: all 0.3s ease !important;
}

.result-list-item:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

.result-list-item.selected {
  border-color: var(--accent-color) !important;
  background: rgba(224, 30, 69, 0.08) !important;
}

/* Splitter/Panel Resizer */
.panel-splitter {
  background: var(--color-border) !important;
  transition: background 0.2s ease !important;
}

.panel-splitter:hover,
.panel-splitter:active {
  background: var(--accent-color) !important;
}

.panel-splitter-handle {
  width: 4px !important;
  background: transparent !important;
}

/* Comparison View */
.comparison-container {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.comparison-header {
  background: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 12px 16px !important;
}

.diff-added {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
}

.diff-removed {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

.diff-unchanged {
  color: var(--color-text-secondary) !important;
}

/* Field Picker */
.field-picker-item {
  padding: 10px 14px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.field-picker-item:hover {
  background: rgba(224, 30, 69, 0.08) !important;
}

.field-picker-item.selected {
  background: rgba(224, 30, 69, 0.12) !important;
  border-left: 3px solid var(--accent-color) !important;
}

/* Query Input Improvements */
.query-input-wrapper {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

.query-input-wrapper:focus-within {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(224, 30, 69, 0.15) !important;
}

.query-input-suggestions {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.query-suggestion-item {
  padding: 10px 14px !important;
  transition: background 0.15s ease !important;
}

.query-suggestion-item:hover,
.query-suggestion-item.active {
  background: rgba(224, 30, 69, 0.1) !important;
}

/* Log Level Indicators */
.log-level-critical {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

.log-level-error {
  background: rgba(249, 115, 22, 0.2) !important;
  border: 1px solid rgba(249, 115, 22, 0.4) !important;
  color: #fb923c !important;
}

.log-level-warning {
  background: rgba(234, 179, 8, 0.2) !important;
  border: 1px solid rgba(234, 179, 8, 0.4) !important;
  color: #facc15 !important;
}

.log-level-info {
  background: rgba(59, 130, 246, 0.2) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  color: #60a5fa !important;
}

.log-level-debug {
  background: rgba(156, 163, 175, 0.2) !important;
  border: 1px solid rgba(156, 163, 175, 0.4) !important;
  color: #9ca3af !important;
}

/* Toolbar Improvements */
.toolbar-group {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  padding: 4px !important;
}

.toolbar-btn {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.toolbar-btn:hover {
  background: rgba(224, 30, 69, 0.1) !important;
}

.toolbar-btn.active {
  background: rgba(224, 30, 69, 0.15) !important;
  color: var(--accent-color) !important;
}

/* Status Dot Indicators */
.status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}

.status-dot.online {
  background: #22c55e !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5) !important;
}

.status-dot.offline {
  background: #6b7280 !important;
}

.status-dot.warning {
  background: #eab308 !important;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.5) !important;
}

.status-dot.error {
  background: #ef4444 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5) !important;
}

/* Animated Status Pulse */
@keyframes status-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

.status-pulse {
  animation: status-pulse 2s ease-in-out infinite !important;
}

/* Log Viewer Enhancements */
.log-line {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  padding: 2px 0 !important;
}

.log-line-number {
  color: rgba(156, 163, 175, 0.5) !important;
  min-width: 50px !important;
  text-align: right !important;
  padding-right: 16px !important;
  -webkit-user-select: none !important;
          user-select: none !important;
}

.log-timestamp {
  color: rgba(96, 165, 250, 0.8) !important;
}

.log-hostname {
  color: rgba(192, 132, 252, 0.8) !important;
}

.log-service {
  color: rgba(251, 146, 60, 0.8) !important;
}

/* Keyboard Shortcut Hints */
.kbd-shortcut {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Toast Notifications */
.toast-container {
  z-index: 10000 !important;
}

.toast-item {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  padding: 14px 18px !important;
  animation: toast-slide-in 0.3s ease !important;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%) !important;
    opacity: 0 !important;
  }
  to {
    transform: translateX(0) !important;
    opacity: 1 !important;
  }
}

.toast-success {
  border-left: 4px solid #22c55e !important;
}

.toast-error {
  border-left: 4px solid #ef4444 !important;
}

.toast-warning {
  border-left: 4px solid #eab308 !important;
}

.toast-info {
  border-left: 4px solid #3b82f6 !important;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Selection Color */
::selection {
  background: rgba(224, 30, 69, 0.3) !important;
  color: inherit !important;
}

/* Skeleton Loading */
.skeleton-item {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0 !important;
  }
  100% {
    background-position: -200% 0 !important;
  }
}

/* Context Menu */
.context-menu {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  padding: 6px !important;
  min-width: 180px !important;
}

.context-menu-item {
  padding: 8px 12px !important;
  border-radius: 6px !important;
  transition: background 0.15s ease !important;
  font-size: 13px !important;
}

.context-menu-item:hover {
  background: rgba(224, 30, 69, 0.1) !important;
}

.context-menu-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  margin: 6px 0 !important;
}

/* Drag and Drop */
.drag-handle {
  cursor: grab !important;
  color: rgba(255, 255, 255, 0.3) !important;
  transition: color 0.2s ease !important;
}

.drag-handle:hover {
  color: rgba(255, 255, 255, 0.6) !important;
}

.drag-handle:active {
  cursor: grabbing !important;
}

.drop-zone {
  border: 2px dashed rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  transition: all 0.3s ease !important;
}

.drop-zone.active {
  border-color: var(--accent-color) !important;
  background: rgba(224, 30, 69, 0.05) !important;
}

/* Badge Improvements */
.badge-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}

.badge-count {
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
}

/* Chip/Tag Improvements */
.chip-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  transition: all 0.2s ease !important;
}

.chip-item:hover {
  background: rgba(224, 30, 69, 0.1) !important;
  border-color: rgba(224, 30, 69, 0.3) !important;
}

.chip-remove {
  width: 14px !important;
  height: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  opacity: 0.6 !important;
  transition: all 0.15s ease !important;
}

.chip-remove:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.2) !important;
}

/* Count Badge */
.count-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  background: var(--accent-color) !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(224, 30, 69, 0.4) !important;
}

/* Loading Spinner */
.spinner {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  border-top-color: var(--accent-color) !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
  to {
    transform: rotate(360deg) !important;
  }
}

/* Resize Observer Indicator */
.resize-indicator {
  position: absolute !important;
  bottom: 4px !important;
  right: 4px !important;
  width: 12px !important;
  height: 12px !important;
  cursor: se-resize !important;
  opacity: 0.3 !important;
  transition: opacity 0.2s ease !important;
}

.resize-indicator:hover {
  opacity: 0.8 !important;
}

/* Link Card */
.link-card {
  background: var(--color-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

.link-card:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.link-card-icon {
  width: 40px !important;
  height: 40px !important;
  background: rgba(224, 30, 69, 0.1) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.link-card-title {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 4px !important;
}

.link-card-description {
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
}

/* ============================================
   ENHANCED MOBILE CONSOLE EXPERIENCE
   ============================================ */

/* -- Console cards: compact on mobile -------- */
@media (max-width: 767px) {
  .console-card {
    border-radius: 10px;
    border-radius: var(--console-radius-md);
  }

  .console-card:hover {
    transform: none; /* disable lift on touch */
  }

  .console-stat {
    gap: 12px;
    padding: 14px;
  }

  .console-stat__icon {
    width: 40px;
    height: 40px;
  }

  .console-stat__value {
    font-size: 22px;
  }

  .console-stat__label {
    font-size: 11px;
  }

  .console-stat__trend {
    font-size: 11px;
  }

  /* Console buttons: touch-friendly sizing */
  .console-btn {
    padding: 10px 16px;
    font-size: 13px;
    min-height: 44px;
  }

  .console-btn--icon {
    width: 44px;
    height: 44px;
  }

  /* Console inputs: bigger touch targets */
  .console-input {
    padding: 12px 14px;
    font-size: 16px; /* prevent iOS zoom */
    min-height: 44px;
  }

  /* Console tables: scrollable with visible hint */
  .console-table .ant-table-thead > tr > th {
    padding: 10px 12px;
    font-size: 10px;
    white-space: nowrap;
  }

  .console-table .ant-table-tbody > tr > td {
    padding: 10px 12px;
    font-size: 13px;
  }

  /* Console modals: tighter on mobile */
  .console-modal .ant-modal-header {
    padding: 14px 16px;
  }

  .console-modal .ant-modal-title {
    font-size: 16px;
  }

  .console-modal .ant-modal-body {
    padding: 16px;
  }

  .console-modal .ant-modal-footer {
    padding: 12px 16px;
  }

  /* Console selects: full width on mobile */
  .console-select {
    width: 100% !important;
  }

  /* Status indicators: slightly smaller */
  .console-status {
    font-size: 11px;
    padding: 3px 10px;
    gap: 5px;
  }

  .console-status::before {
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 479px) {
  .console-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }

  .console-stat__value {
    font-size: 20px;
  }

  .console-card {
    border-radius: 6px;
    border-radius: var(--console-radius-sm);
  }
}

/* -- Page header actions: horizontal scroll on mobile -- */
@media (max-width: 767px) {
  .page-header-actions {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }

  .page-header-actions::-webkit-scrollbar {
    display: none;
  }

  .page-header-actions .ant-btn {
    flex-shrink: 0;
  }
}

/* -- Ant Row/Col gutter tightening on mobile -- */
@media (max-width: 479px) {
  .ant-row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  .ant-row > .ant-col {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* -- Form layout: vertical stacking on mobile -- */
@media (max-width: 639px) {
  .ant-form-horizontal .ant-form-item {
    flex-direction: column;
  }

  .ant-form-horizontal .ant-form-item .ant-form-item-label {
    text-align: left;
    padding-bottom: 4px;
  }

  .ant-form-horizontal .ant-form-item .ant-form-item-control {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Space components: wrap on mobile */
  .ant-space-horizontal {
    flex-wrap: wrap;
  }
}

/* -- Sidebar transition smoothing -- */
@media (max-width: 991px) {
  .ant-layout-sider {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
  }

  .ant-layout-sider-collapsed {
    transform: translateX(-100%);
  }

  [dir="rtl"] .ant-layout-sider-collapsed {
    transform: translateX(100%);
  }
}

/* -- Footer mobile padding -- */
@media (max-width: 767px) {
  .ant-layout-footer {
    padding: 12px 16px !important;
    font-size: 12px;
  }
}

/* -- Timeline compact on mobile -- */
@media (max-width: 639px) {
  .ant-timeline-item {
    padding-bottom: 16px;
  }

  .ant-timeline-item-content {
    font-size: 13px;
  }
}

/* -- Badge and tag wrapping -- */
@media (max-width: 479px) {
  .ant-tag {
    font-size: 11px;
    padding: 1px 6px;
    margin-bottom: 4px;
  }

  .ant-badge-count {
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
  }
}

/* -- Collapse / Accordion mobile -- */
@media (max-width: 767px) {
  .ant-collapse-header {
    padding: 10px 12px !important;
    font-size: 13px;
  }

  .ant-collapse-content-box {
    padding: 12px !important;
  }
}

/* -- Description list mobile stacking -- */
@media (max-width: 639px) {
  .ant-descriptions-item-label,
  .ant-descriptions-item-content {
    padding: 8px 10px !important;
    font-size: 13px;
  }
}

/* ============================================
   MOBILE CONSOLE ENHANCEMENTS
   ============================================ */

/* Console stat cards: compact on mobile */
@media (max-width: 767px) {
  .console-stat {
    padding: 14px;
    gap: 12px;
  }

  .console-stat__value {
    font-size: 22px;
  }

  .console-stat__icon {
    width: 40px;
    height: 40px;
  }

  .console-card:hover,
  .console-stat:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .console-stat {
    padding: 12px;
    gap: 10px;
  }

  .console-stat__value {
    font-size: 20px;
  }

  .console-stat__label {
    font-size: 11px;
  }

  .console-table .ant-table-thead > tr > th,
  .console-table .ant-table-tbody > tr > td {
    padding: 10px 8px;
    font-size: 12px;
  }

  .console-table .ant-table-thead > tr > th {
    font-size: 10px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .live-pulse,
  .status-pulse,
  .skeleton-item {
    animation: none !important;
  }
}

/* Dark Mode Styles - Mineral Theme */
:root,
html {
  --primary-bg: var(--color-background, #040404);
  --secondary-bg: var(--color-elevated, #0E0E0E);
  --card-bg: var(--color-elevated, #0E0E0E);
  --text-primary: var(--color-text-primary, #D1D1D1);
  --text-secondary: var(--color-text-secondary, #B0B0B0);
  --border-color: var(--color-border, #2A2A2A);
  --hover-bg: var(--color-paper, #1F1F1F);
  --app-accent: var(--color-primary, #E01E45);
  --app-border: var(--color-border, #2A2A2A);
}

body {
  background-color: #040404 !important;
  background-color: var(--color-background, #040404) !important;
  color: #D1D1D1 !important;
  color: var(--color-text-primary, #D1D1D1) !important;
}

.ant-layout {
  background: #040404;
  background: var(--primary-bg);
}

.ant-card {
  background: #0E0E0E;
  background: var(--card-bg);
  border-color: #2A2A2A;
  border-color: var(--app-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ant-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  border-color: #3A3A3A;
}

.ant-card-head {
  color: #D1D1D1;
  color: var(--text-primary);
  border-bottom-color: #2A2A2A;
  border-bottom-color: var(--app-border);
  background: transparent;
}

.ant-card-head::after {
  display: none;
}

.ant-card-body {
  color: #D1D1D1;
  color: var(--text-primary);
}

.ant-menu {
  background: transparent;
  color: #D1D1D1;
  color: var(--text-primary);
  border-right: none;
}

.ant-menu-item {
  color: #B0B0B0;
  color: var(--text-secondary);
  transition: background 0.2s ease, color 0.2s ease;
}

.ant-menu-item:hover {
  background-color: rgba(224, 30, 69, 0.06);
  color: #D1D1D1;
  color: var(--text-primary);
}

.ant-menu-item-selected {
  background-color: rgba(224, 30, 69, 0.12);
  color: #D1D1D1;
  color: var(--text-primary);
}

.ant-input,
.ant-select-selector,
.ant-textarea,
.ant-input-number {
  background-color: #0E0E0E;
  border-color: #2A2A2A;
  border-color: var(--border-color);
  color: #D1D1D1;
  color: var(--text-primary);
  border-radius: 10px;
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.25s ease;
}

.ant-input:hover,
.ant-select:not(.ant-select-disabled):hover .ant-select-selector,
.ant-textarea:hover,
.ant-input-number:hover {
  border-color: rgba(224, 30, 69, 0.25);
}

.ant-input:focus,
.ant-input-focused,
.ant-select-focused .ant-select-selector,
.ant-textarea:focus,
.ant-input-number-focused {
  border-color: #E01E45;
  box-shadow: 0 0 0 3px rgba(224, 30, 69, 0.12), 0 0 16px rgba(224, 30, 69, 0.05);
}

.ant-input::placeholder,
.ant-input-number-input::placeholder,
.ant-select-selection-placeholder {
  color: rgba(176, 176, 176, 0.35);
}

.ant-input-affix-wrapper {
  background-color: #0E0E0E;
  border-color: #2A2A2A;
  border-color: var(--border-color);
  border-radius: 10px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ant-input-affix-wrapper:hover {
  border-color: rgba(224, 30, 69, 0.25);
}

.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused {
  border-color: #E01E45;
  box-shadow: 0 0 0 3px rgba(224, 30, 69, 0.12);
}

.ant-input-affix-wrapper .ant-input {
  background: transparent;
}

.ant-btn-default {
  background: transparent;
  border-color: #2A2A2A;
  border-color: var(--border-color);
  color: #D1D1D1;
  color: var(--text-primary);
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ant-btn-default:hover {
  background: #1F1F1F;
  background: var(--hover-bg);
  border-color: rgba(224, 30, 69, 0.25);
  color: #D1D1D1;
  color: var(--text-primary);
}

.ant-btn-primary {
  background: linear-gradient(135deg, #E01E45, #FF3D65);
  border: none;
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(224, 30, 69, 0.2);
}

.ant-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #FF3D65, #E01E45);
  box-shadow: 0 4px 16px rgba(224, 30, 69, 0.35);
  transform: translateY(-1px);
}

.ant-btn-primary:active {
  transform: translateY(0);
}

.ant-table {
  background: #0E0E0E;
  background: var(--card-bg);
  color: #D1D1D1;
  color: var(--text-primary);
  border-radius: 12px;
  overflow: hidden;
}

.ant-table-thead > tr > th {
  background: #0E0E0E;
  background: var(--secondary-bg);
  color: #D1D1D1;
  color: var(--text-primary);
  border-color: #2A2A2A;
  border-color: var(--border-color);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ant-table-tbody > tr > td {
  border-color: #2A2A2A;
  border-color: var(--border-color);
  color: #D1D1D1;
  color: var(--text-primary);
  transition: background-color 0.15s ease;
}

.ant-table-tbody > tr:hover > td {
  background: rgba(224, 30, 69, 0.03);
}

.ant-table-tbody > tr {
  transition: background-color 0.15s ease;
}

/* Card improvements */
.ant-card {
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dropdown popup dark styling */
.ant-select-dropdown {
  background: rgba(14, 14, 14, 0.96) !important;
  border: 1px solid rgba(42, 42, 42, 0.6);
  border-radius: 12px !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 4px !important;
}

.ant-select-item {
  border-radius: 8px !important;
  color: rgba(209, 209, 209, 0.75) !important;
  transition: all 0.15s ease;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background: rgba(224, 30, 69, 0.06) !important;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background: rgba(224, 30, 69, 0.12) !important;
  color: #D1D1D1 !important;
  font-weight: 500;
}

/* Modal improvements */
.ant-modal-mask {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Form item improvements */
.ant-form-item-label > label {
  color: rgba(209, 209, 209, 0.8);
  font-weight: 500;
}

/* Tooltip dark theme */
.ant-tooltip-inner {
  background: rgba(14, 14, 14, 0.95) !important;
  border: 1px solid rgba(42, 42, 42, 0.5);
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  color: #D1D1D1;
  font-size: 13px;
}

/* Checkbox dark theme */
.ant-checkbox-inner {
  background: #0E0E0E;
  border-color: rgba(42, 42, 42, 0.8);
  border-radius: 4px;
  transition: all 0.25s ease;
}

.ant-checkbox-checked .ant-checkbox-inner {
  background: #E01E45;
  border-color: #E01E45;
}

.ant-checkbox-wrapper:hover .ant-checkbox-inner {
  border-color: rgba(224, 30, 69, 0.4);
}

/* Switch dark theme */
.ant-switch {
  background: rgba(42, 42, 42, 0.6);
}

.ant-switch-checked {
  background: #E01E45 !important;
}

/* Utility classes */
.admin-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background-color: #0E0E0E;
  background-color: var(--color-elevated, #0E0E0E);
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
  padding: 5px 20px;
  z-index: 999;
  margin-top: 0%;
  border-top: 1px solid #2A2A2A;
  border-top: 1px solid var(--color-border, #2A2A2A);
  transition: background-color 0.2s ease;
  transition: background-color var(--duration-normal, 0.2s) ease;
  display: flex;
  align-items: center;
}

/* Loading Animation */
.spin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.spin .ant-spin-dot {
  font-size: 28px;
}

.spin .ant-spin-dot i {
  background-color: #E01E45;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.d-flex {
  display: flex;
}

.flex-grid .flex-grid-child {
  padding: 0 12px;
}

.align-center-v {
  display: flex;
  align-items: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.line-height-0 {
  line-height: 0;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.medium-text {
  font-weight: 500;
}

.status {
  display: inline !important;
  font-size: 13px;
  font-weight: 500;
  background-color: var(--color-border);
  color: var(--color-text-primary);
  padding: 4.5px 11.85px;
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  transition: all 0.2s ease;
  transition: all var(--duration-normal, 0.2s) ease;
}

.status.Success {
  background-color: rgba(0, 208, 132, 0.12);
  background-color: rgba(var(--color-success-rgb, 0, 208, 132), 0.12);
  color: var(--color-success);
}

.status.warning {
  background-color: rgba(239, 188, 42, 0.12);
  background-color: rgba(var(--color-warning-rgb, 239, 188, 42), 0.12);
  color: var(--color-warning);
}

.status.error {
  background-color: rgba(230, 57, 70, 0.12);
  background-color: rgba(var(--color-error-rgb, 230, 57, 70), 0.12);
  color: var(--color-error);
}

.modal-video-close-btn {
  cursor: pointer;
}

ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

/* spacing classes */

.m-0 {
  margin: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-25 {
  margin-bottom: 25px !important;
}

.mb-30 {
  margin-bottom: 30px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pl-0 {
  padding-left: 0 !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.pr-0 {
  padding-right: 0 !important;
}

/* default card style */

.ant-card {
  box-shadow: var(--shadow-sm);
  border-radius: 12px;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid #2A2A2A;
  border: 1px solid var(--color-border, #2A2A2A);
  background: #1F1F1F;
  background: var(--color-paper, #1F1F1F);
  transition: box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease;
  position: relative;
}

.ant-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #3A3A3A;
  border-color: var(--color-border-hover, #3A3A3A);
}

.ant-card-body {
  padding: 22px !important;
}

.ant-card-head {
  padding-left: 22px !important;
  padding-right: 22px !important;
  border-bottom: 1px solid #2A2A2A;
  border-bottom: 1px solid var(--color-border, #2A2A2A);
  position: relative;
  background: transparent;
}

.ant-card-head::after {
  display: none;
}

.ant-card-head-title span {
  display: inline-block;
  margin-left: 15px;
  font-size: 11px;
  font-weight: 500;
  color: #B0B0B0;
  color: var(--color-text-secondary, #B0B0B0);
  transition: color var(--duration-normal) ease;
}

.ant-card-head .ant-card-extra {
  display: flex;
  align-items: center;
}

.ant-card-head .ant-card-extra:empty {
  display: none;
}

.ant-card-head .ant-card-extra a {
  color: #B0B0B0;
  color: var(--color-text-secondary, #B0B0B0);
  transition: color var(--duration-normal) ease;
}

.ant-card-head .ant-card-extra a:hover {
  color: #E01E45;
  color: var(--color-primary, #E01E45);
}

.ant-card-extra .ant-dropdown-trigger {
  line-height: 0;
  order: 1;
  margin-left: 20px;
}

.ninjadash-unresizable {
  resize: none;
}

/* ninjaDash Delete Modal */

.ninjaDash-delete-modal .ant-modal-header {
  text-align: center;
  padding: 22px 24px;
}

.ninjaDash-delete-modal .ant-modal-header .ant-modal-title {
  font-size: 20px;
  color: #EF4444;
}

.ninjaDash-delete-modal .ant-modal-body {
  padding: 20px 24px;
}

.ninjaDash-delete-modal .ninjadash-delete-confirm {
  text-align: center;
}

.ninjaDash-delete-modal .ninjadash-delete-confirm__action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  min-height: 32px;
  border-radius: 3px;
  color: #fff;
  background-color: #00D084;
  background-color: var(--color-success, #00D084);
}

/* NinjaDash Export Modal */
.ninjadash_export-wrap .ninjadash-button-grp {
  margin: -5px;
}

.ninjadash_export-wrap .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  height: 50px !important;
}

.ninjadash_export-wrap .ant-select-single:not(.ant-select-customize-input) .ant-select-selection-item {
  line-height: 50px !important;
}

.ninjadash_export-wrap .ninjadash-button-grp button {
  min-height: 44px;
}

.ninjadash_export-wrap .ninjadash-button-grp .ant-btn {
  margin: 5px;
}

/* ant radio group */

.ant-radio-button-wrapper-checked {
  color: #fff;
}

/* chart growth upward */

.growth-downward p,
.growth-upward p {
  font-size: 14px;
  color: #B0B0B0;
  margin: 0;
}

.growth-downward h1 sub svg,
.growth-upward h1 sub svg {
  position: relative;
  top: 2px;
  font-size: 14px;
  font-weight: 600;
  left: 5px;
  bottom: 0;
}

/*
.growth-downward h1, .growth-upward h1 {
  font-size: 22px;
  margin: 6px 0 0;
} */

.growth-downward h1 sub {
  color: #EF4444;
}

.growth-upward h1 sub {
  color: #22C55E;
}

/* Chart */

.chart-label {
  display: flex;
}

.chart-label .chart-label__single {
  align-items: center;
}

.chart-label .chart-label__single:not(:last-child) {
  margin-right: 40px;
}

.chart-label .chart-label__single p {
  margin: 0;
  color: #B0B0B0;
}

/* revenue doughnut */

.revenue-doughnut {
  display: flex;
  justify-content: center;
}

.revenue-doughnut>div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.revenue-doughnut .rd-labels {
  width: 100%;
  margin-top: 30px;
}

.revenue-chat-percentage span {
  display: block;
}

.revenue-chat-percentage span:not(:last-child) {
  margin-bottom: 15px;
}

/* progressbars */

.ant-progress {
  display: inline-flex !important;
  align-items: center;
}

.ant-progress>div {
  display: flex;
  flex-direction: column;
}

.ant-progress .ant-progress-outer {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.revenue-chat-percentage span {
  display: block;
  font-size: 13px;
  color: #B0B0B0;
}

.revenue-chat-percentage span:not(:last-child) {
  margin-bottom: 20px;
}

.ant-progress-status-warning .ant-progress-bg {
  background: var(--color-warning);
}

/* progress bars */

.progress-primary .ant-progress-bg {
  background: var(--color-primary);
}

.progress-secondary .ant-progress-bg {
  background: #FF3D65;
  background: var(--color-primary-hover, #FF3D65);
}

.progress-success .ant-progress-bg {
  background: var(--color-success);
}

.progress-info .ant-progress-bg {
  background: var(--color-info);
}

.progress-warning .ant-progress-bg {
  background: var(--color-warning);
}

.progress-danger .ant-progress-bg {
  background: var(--color-error);
}

/* color classes */

.color-primary {
  color: #E01E45;
  color: var(--color-primary, #E01E45);
}

.color-secondary {
  color: #FF3D65;
  color: var(--color-primary-hover, #FF3D65);
}

.color-info {
  color: #1BA3F0;
  color: var(--color-info, #1BA3F0);
}

.color-warning {
  color: #EFBC2A;
  color: var(--color-warning, #EFBC2A);
}

.color-success {
  color: #00D084;
  color: var(--color-success, #00D084);
}

.color-danger {
  color: #E63946;
  color: var(--color-error, #E63946);
}

.color-dark {
  color: #0E0E0E;
  color: var(--color-elevated, #0E0E0E);
}

.color-error {
  color: #E63946;
  color: var(--color-error, #E63946);
}

.color-gray {
  color: #3A3A3A;
  color: var(--color-border-hover, #3A3A3A);
}

/* Button Styles */

.button-example .ant-btn {
  margin: 4px;
}

.button-example .ant-btn-group .ant-btn {
  margin: 0;
}

.ant-btn {
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  transition: all var(--duration-fast) ease;
  font-weight: 500;
}

.ant-btn:hover {
  opacity: 0.92;
}

.ant-btn:active {
  transform: scale(0.98);
}

.ant-btn.ant-btn-white {
  color: #3A3A3A;
  border-color: #D1D1D1;
}

.ant-btn.ant-btn-white svg {
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ant-btn.ant-btn-white:hover {
  color: #E01E45;
  background-color: #fff;
  border-color: #E01E45;
}

.ant-btn.ant-btn-white:hover svg {
  color: #E01E45;
}

.ant-btn-white:focus {
  background-color: transparent !important;
}

.ant-btn.ant-btn-dashed {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #2A2A2A !important;
  border-color: var(--color-border, #2A2A2A) !important;
  background: #0E0E0E !important;
  background: var(--color-elevated, #0E0E0E) !important;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
}

.ant-btn.ant-btn-dashed:hover,
.ant-btn.ant-btn-dashed:focus {
  color: var(--color-primary) !important;
  border-color: rgba(224, 30, 69, 0.55) !important;
  border-color: rgba(var(--color-primary-rgb, 224, 30, 69), 0.55) !important;
  background: rgba(224, 30, 69, 0.06) !important;
  background: rgba(var(--color-primary-rgb, 224, 30, 69), 0.06) !important;
}

.ant-btn-primary[disabled] {
  color: #fff;
  background: rgba(224, 30, 69, 0.376);
}

.ant-btn-light[disabled] {
  background: #fff;
}

.ant-btn-round.ant-btn-sm {
  height: 38px;
}

.ant-btn-white[disabled] {
  background-color: transparent;
  opacity: 0.6;
}

.ant-btn-white[disabled]:hover {
  color: #3A3A3A !important;
}

.ant-btn-primary[disabled]:hover {
  color: #fff !important;
  background: rgba(224, 30, 69, 0.376) !important;
}

.btn-icon {
  padding: 0 13px;
}

.btn-inc,
.btn-dec {
  height: 38px;
  width: 38px;
  font-size: 20px;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 0 none;
}

.btn-inc:hover,
.btn-dec:hover {
  background: rgba(224, 30, 69, 0.063) !important;
  border: 0 none !important;
}

.btn-inc:hover i,
.btn-inc:hover svg,
.btn-dec:hover i,
.btn-dec:hover svg {
  color: #E01E45;
}

/* input styles */

.ant-form-item-label>label {
  font-weight: 500;
}

.ant-picker-input>input::placeholder {
  color: #B0B0B0 !important;
}

.ant-input-affix-wrapper,
.ant-input {
  border-radius: 6px;
}

.ant-input-affix-wrapper .ant-input-prefix {
  margin-right: 8px;
}

.ant-input-affix-wrapper-lg .ant-input-lg {
  font-size: 15px;
}

/* Calendar Styles */

.ant-picker-calendar-header .ant-select-selector {
  height: 32px !important;
}

.ant-picker-calendar-header .ant-select-selection-search-input {
  height: 30px !important;
}

.ant-select-single .ant-select-selector .ant-select-selection-item {
  line-height: 30px !important;
}

/* pagination */

.ant-pagination .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  height: 32px !important;
}

.ant-pagination-item-active {
  background-color: #E01E45 !important;
}

.ant-pagination-item-active a {
  color: #fff !important;
}

.ant-pagination .ant-pagination-options .ant-select-selection-item {
  font-size: 13px;
  line-height: 30px !important;
}

.ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper {
  height: 30px;
  line-height: 30px;
}

.ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper input {
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.ant-pagination .ant-pagination-prev,
.ant-pagination .ant-pagination-next,
.ant-pagination .ant-pagination-jump-prev,
.ant-pagination .ant-pagination-jump-next,
.ant-pagination .ant-pagination-item,
.ant-pagination .ant-pagination-options .ant-select-selector {
  border: 1px solid #2A2A2A !important;
  border: 1px solid var(--color-border, #2A2A2A) !important;
  background-color: #0E0E0E;
  background-color: var(--color-elevated, #0E0E0E);
}

.ant-pagination .ant-pagination-jump-prev .ant-pagination-item-ellipsis,
.ant-pagination .ant-pagination-jump-next .ant-pagination-item-ellipsis {
  color: #B0B0B0 !important;
  color: var(--color-text-secondary, #B0B0B0) !important;
  line-height: 2.6;
}

.ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link,
.ant-pagination .ant-pagination-jump-next .ant-pagination-item-link {
  display: block;
}

.ant-pagination-prev,
.ant-pagination-next {
  line-height: 28px !important;
}

.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border: 0 none !important;
}

.ant-pagination .ant-pagination-item a {
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
}

.ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis,
.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis {
  font-family: 'Inter', system-ui, sans-serif !important;
}

.ant-pagination .ant-select-single .ant-select-selector .ant-select-selection-item {
  line-height: 30px !important;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
}

.ant-pagination .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input {
  height: 100% !important;
}

.ant-pagination-item,
.ant-pagination-options,
.ant-pagination-prev,
.ant-pagination-jump-prev,
.ant-pagination-jump-next,
.ant-pagination-next {
  margin: 4px !important;
}

.ant-table-pagination {
  margin-top: 30px !important;
}

.ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
  display: none;
}

.ant-table table tr th.ant-table-selection-column,
.ant-table table tr td.ant-table-selection-column {
  padding: 0 16px;
}

/* Wizard Modal */
.submission-successModal {
  text-align: center;
}

.submission-successModal .icon-success {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid #22C55E;
}

.submission-successModal p {
  margin-bottom: 0;
}

.submission-successModal .icon-success svg {
  color: #22C55E;
}

.submission-successModal .submission-action {
  margin: 30px -5px -5px -5px;
}

.submission-successModal .submission-action button {
  margin: 5px;
  height: 38px;
}

/* Select */

.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  border-color: #D1D1D1;
  border-color: var(--color-border, #D1D1D1);
  border-radius: 6px !important;
}

/* Tree Select */

.ant-tree-select.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  height: 42px !important;
  line-height: 40px;
}

.ant-tree-select.ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input {
  height: 100% !important;
}

.ant-tree-select.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
  line-height: 40px !important;
}

/* radio style */

.ant-radio-checked .ant-radio-inner {
  border-width: 4px !important;
}

.ant-radio-inner::after {
  content: none !important;
}

/* Statistics */

.ant-statistic .ant-statistic-title {
  color: #B0B0B0;
}

.ant-statistic .ant-statistic-content span {
  font-size: 20px;
}

/* Steps */

.steps-action.justify-content-center {
  justify-content: center !important;
}

.ant-steps .ant-steps-item:not(.ant-steps-item-active)>.ant-steps-item-container[role="button"]:hover .ant-steps-icon svg {
  color: #E01E45;
}

/* rate */

.ant-rate-star.ant-rate-star-zero span svg {
  color: #B0B0B0;
}

.ant-rate-star:not(:last-child) {
  margin-right: 2px !important;
}

/* result */

.ant-result-icon {
  margin-bottom: 20px !important;
}

.ant-result-title {
  font-weight: 500;
  margin-bottom: 10px;
}

.ant-result-extra {
  height: 34px;
  padding: 4px 10.72px;
}

.ant-result-content .ant-typography strong {
  font-weight: 500;
}

.ant-result-content .ant-typography:last-child {
  margin-bottom: 0;
}

/* form select */

.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  height: 38px !important;
}

.ant-select-single .ant-select-selector .ant-select-selection-item,
.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
  line-height: 35px !important;
}

.ant-select-multiple .ant-select-selector {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.ninjadash-fullwidth-select {
  width: 100%;
}

/* calendar style */

.events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}

.notes-month {
  text-align: center;
  font-size: 28px;
}

.notes-month section {
  font-size: 28px;
}

/* Breadcrumb demo */

.demo {
  margin: 16px;
}

.demo-nav {
  height: 30px;
  line-height: 30px;
  margin-bottom: 16px;
  background: #0E0E0E;
  background: var(--color-elevated, #0E0E0E);
}

.demo-nav a {
  line-height: 30px;
  padding: 0 8px;
}

.app-list {
  margin-top: 16px;
}

/* Modal */

.ant-modal .ant-modal-content {
  border-radius: 10px;
}

.ant-modal .ant-modal-header {
  border-radius: 10px 10px 0 0;
}

.ant-modal-body p:last-child {
  margin-bottom: 0;
}

.project-modal {
  padding: 5px !important;
}

.project-modal .projects-members {
  margin-top: -12px;
}

.project-modal .projects-members img {
  margin: 6px;
}

.project-modal .ant-form-item-control-input {
  margin-top: 10px;
  min-height: auto;
}

.project-modal .ant-select-selector {
  border-color: #2A2A2A;
  border-color: var(--color-border, #2A2A2A);
}

.project-modal .ant-picker {
  width: 100%;
}

.project-modal-footer {
  padding: 10px !important;
  text-align: left !important;
}

.ninjadash-addTask-modal {
  max-width: 390px;
}

.ninjadash-addTask-modal .ant-modal-header {
  border-bottom: 0 none;
  padding-bottom: 0 !important;
}

.ninjadash-addTask-modal .ant-modal-header .ant-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
}

.ninjadash-addTask-modal .ninjadash-addTask-modal-inner .ant-form-item {
  margin-bottom: 15px;
}

.ninjadash-addTask-modal .ant-modal-header .ant-modal-close-x svg {
  color: #B0B0B0;
}

.ninjadash-addTask-modal .ant-form-item-control-input {
  min-height: 36px;
}

.ninjadash-addTask-modal input::placeholder,
.ninjadash-addTask-modal textarea::placeholder {
  color: #B0B0B0;
}

.ninjadash-addTask-modal input,
.ninjadash-addTask-modal textarea {
  padding: 6px 20px;
  border-radius: 5px;
}

.ninjadash-addTask-modal textarea {
  resize: none;
  min-height: 125px;
}

.ninjadash-addTask-modal .ninjadash-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin: -6px;
}

.ninjadash-addTask-modal .ninjadash-modal-actions button {
  font-size: 14px;
  margin: 6px;
  height: 38px;
  border-radius: 5px;
}

/* slider */

.ant-slider-handle {
  margin-top: -6px !important;
}

.ant-slider .ant-slider-rail,
.ant-slider-track,
.ant-slider .ant-slider-step {
  height: 3px;
}

/* tags */

.ant-tag {
  font-weight: 600;
  padding: 0 9.5px;
}

/* tabs */

.ant-tabs-tab span {
  display: flex;
  align-items: center;
}

/* popover */

.ant-popover {
  position: fixed !important;
  z-index: 99998 !important;
}

.ant-popover .ant-btn-sm {
  font-size: 13px;
}

.ant-popover .ant-popover-inner {
  padding: 15px;
  box-shadow: var(--shadow-lg);
  border-radius: 6px;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-border);
  background: var(--color-paper);
}

.ant-popover-inner .ant-popover-title {
  padding: 5px 10px 10px;
}

.ant-popover-inner .ant-popover-inner-content a {
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
}

/* Drawer */

.ant-drawer {
  z-index: 1000;
}

/* Select Dropdwon */

.ant-select-dropdown {
  padding: 18px 0;
  box-shadow: var(--shadow-lg);
  border-radius: 6px;
  border-radius: var(--radius-md, 6px);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
}

.ant-select-item {
  min-height: 20px !important;
  padding: 4px 12px !important;
}

.ant-select-item-group {
  color: #8B8B8B;
  color: var(--color-text-secondary, #8B8B8B);
}

.ant-select-item.ant-select-item-option-grouped {
  padding-left: 25px !important;
}

.ant-select-dropdown .ant-select-item.ant-select-item-option-active {
  background: rgba(224, 30, 69, 0.020);
}

.ant-select-dropdown .ant-select-item.ant-select-item-option-selected .ant-select-item-option-content {
  padding-left: 10px;
}

.ant-select-dropdown .ant-select-item.ant-select-item-option-selected {
  color: #E01E45;
  background: rgba(224, 30, 69, 0.024);
}

.ant-select-dropdown .ant-select-item.ant-select-item-option-selected .ant-select-item-option-content {
  color: #E01E45;
  font-weight: 500;
}

.ant-select-dropdown .ant-select-item .ant-select-item-option-content {
  transition: 0.3s;
  color: #d1d1d1;
  color: var(--color-text-primary, #d1d1d1);
}

/* mail props dropdown */

.mail-props {
  padding: 10px 25px;
  border: 0 none;
  background: #1F1F1F;
  background: var(--color-paper, #1F1F1F);
  margin-bottom: 0;
}

.mail-props li {
  display: flex;
  margin-bottom: 12px;
}

.mail-props li span:first-child {
  margin-right: 50px;
  min-width: 40px;
}

.mail-props li span:last-child {
  color: #d1d1d1;
  color: var(--color-text-primary, #d1d1d1);
}

.mail-props li:last-child {
  margin-bottom: 0;
}

.mail-props li span {
  color: #B0B0B0;
}

/* Basic Dropdwon */

.ant-dropdown {
  box-shadow: none;
}

.ant-dropdown.wide-dropdwon {
  min-width: 140px !important;
}

.ant-dropdown.wide-dropdwon.kanbanCard-more {
  min-width: 220px !important;
  box-shadow: 0 17px 20px #8B8B8B20;
}

.ant-dropdown.wide-dropdwon.kanbanCard-more a {
  padding: 10px 24px;
}

.ant-dropdown-menu {
  min-width: 200px;
  border-radius: 0 0 5px 5px;
  box-shadow: none;
  border: none;
}

.ant-dropdown-menu li {
  color: #d1d1d1;
  color: var(--color-text-primary, #d1d1d1);
  padding: 5px 25px;
}

.ant-dropdown-menu li:hover {
  background-color: rgba(224, 30, 69, 0.020);
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__title {
  background: #0E0E0E;
  background: var(--color-elevated, #0E0E0E);
  width: 100%;
  margin-bottom: 12px;
  border-radius: 6px;
  border-radius: var(--radius-md, 6px);
  font-size: 14px;
  font-weight: 500;
  min-height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text-primary);
}

.ninjadash-top-dropdown {
  width: 340px;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__nav {
  height: 260px;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__nav.notification-list {
  padding: 0 10px;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__nav li {
  width: 100%;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__nav li a {
  padding: 13px 10px;
  position: relative;
  width: 100%;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__nav li:last-child {
  margin: 0;
}

.ninjadash-top-dropdown a.btn-seeAll {
  position: relative;
  width: calc(100% + 30px);
  left: -15px;
  right: -15px;
  height: calc(100% + 15px);
  bottom: -15px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #E01E45;
  color: var(--color-primary, #E01E45);
  padding: 15px 0;
  border-radius: 0 0 6px 6px;
  justify-content: center;
  background: #1F1F1F;
  background: var(--color-paper, #1F1F1F);
  transition: 0.3s;
}

.ninjadash-top-dropdown a.btn-seeAll:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 -15px 20px #8B8B8B08;
  z-index: 1;
  content: "";
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__nav li a.btn-seeAll:hover:after {
  box-shadow: 0 0;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__nav li a:hover {
  background: #0E0E0E;
  background: var(--color-elevated, #0E0E0E);
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__nav li a:hover:after {
  opacity: 1;
  visibility: visible;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__nav li a:hover figcaption h1 {
  color: #E01E45;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__nav li a:after {
  position: absolute;
  left: -15px;
  right: -15px;
  top: 0;
  width: calc(100% + 30px);
  height: 100%;
  box-shadow: 0 15px 50px #8B8B8B20;
  z-index: 1;
  content: "";
  opacity: 0;
  visibility: hidden;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 0;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content .notification-icon {
  width: 39.2px;
  height: 32px;
  margin-right: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content .notification-icon.bg-primary {
  background: rgba(224, 30, 69, 0.082);
  color: #E01E45;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content .notification-icon.bg-secondary {
  background: rgba(224, 30, 69, 0.15);
  color: #E01E45;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content .notification-icon svg {
  width: 18px;
  height: 18px;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content .notification-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ninjadash-top-dropdown .notification-text h1 {
  font-size: 14px;
  font-weight: 400;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
  margin-bottom: 4px;
}

.ninjadash-top-dropdown .notification-text h1 span {
  color: #E01E45;
  font-weight: 500;
  padding-left: 0;
}

.ninjadash-top-dropdown .notification-text p {
  font-size: 12px;
  color: #B0B0B0;
  margin-bottom: 0;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content img {
  max-width: 40px;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content figcaption {
  margin: -4px 15px 0;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content figcaption .ant-badge-count {
  font-size: 8px;
  min-width: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content figcaption p.ant-scroll-number-only-unit.current {
  height: 15px;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content figcaption h1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content figcaption h1 span {
  font-size: 12px;
  font-weight: 400;
}

.ninjadash-top-dropdown .ninjadash-top-dropdown__content figcaption p {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.add-file-dropdown a {
  font-size: 14px;
  font-weight: 400;
}

.add-file-dropdown a svg {
  width: 14px;
}

.folder-dropdown {
  min-width: 200px !important;
}

/* Tooltip Styles */

.ant-tooltip .ant-tooltip-inner {
  min-height: 40px;
  padding: 6px 20px;
  font-size: 14px;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
  background-color: #0E0E0E;
  background-color: var(--color-elevated, #0E0E0E);
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  display: flex;
  align-items: center;
  border: 1px solid #2A2A2A;
  border: 1px solid var(--color-border, #2A2A2A);
  box-shadow: var(--shadow-md);
}

.ant-tooltip .ant-tooltip-arrow:after {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  background: #0E0E0E;
  background: var(--color-elevated, #0E0E0E);
  content: "";
}

.ant-tooltip .ant-tooltip-arrow .ant-tooltip-arrow-content {
  width: 14px;
  height: 14px;
  top: 3px;
  background: #0E0E0E;
  background: var(--color-elevated, #0E0E0E);
  z-index: 98;
  --antd-arrow-background-color: var(--color-elevated, #0E0E0E);
}

.ant-tooltip .ant-tooltip-arrow .ant-tooltip-arrow-content:before {
  position: static;
}

.ant-tooltip-placement-bottom .ant-tooltip-arrow .ant-tooltip-arrow-content {
  border: 1px solid #2A2A2A;
  border: 1px solid var(--color-border, #2A2A2A);
  box-shadow: 0 0;
}

.ant-tooltip-placement-bottom .ant-tooltip-arrow {
  top: -4.071068px;
}

.ant-slider-tooltip.ant-tooltip-placement-top .ant-tooltip-arrow {
  transform: translateY(80%) translateX(-50%);
}

/* Badge Styles */

.ant-badge.badge-success .ant-badge-count {
  background: #00D084;
  background: var(--color-success, #00D084);
}

.badge {
  font-size: 11px;
  font-weight: 500;
  padding: 0 6.5px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.badge .ant-badge-count {
  box-shadow: 0 0;
}

.badge.badge-primary {
  background: rgba(224, 30, 69, 0.082);
  color: #E01E45;
}

/* Cascade Styles */

.custom-cascade-render .ant-cascader-picker {
  width: 100%;
}

.ant-cascader-picker input::placeholder {
  color: #B0B0B0;
}

/* Comment Styles */

.ant-comment-actions li {
  margin-bottom: 0 !important;
}

/* Radio Vertical Button */

.ant-radio-vertical .ant-radio-wrapper {
  display: block;
}

.ant-radio-vertical .ant-radio-wrapper:not(:last-child) {
  margin-bottom: 14px;
}

/* Select Tree */

.ant-select-tree-list .ant-select-tree-node-content-wrapper:hover {
  background-color: rgba(224, 30, 69, 0.08) !important;
  background-color: rgba(var(--color-primary-rgb, 224, 30, 69), 0.08) !important;
}

.ant-select-tree-list .ant-select-arrow svg {
  font-size: 10px;
}

.ant-tree-select.ant-select-multiple .ant-select-selection-item {
  border: 0 none;
  border-radius: 5px;
  border-radius: var(--radius-sm, 5px);
  background: #0E0E0E;
  background: var(--color-elevated, #0E0E0E);
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
  font-weight: 500;
}

/* Ant Switch */

.ant-switch:after {
  width: 14px !important;
  height: 14px !important;
}

.ant-switch-small:after {
  width: 10px !important;
  height: 10px !important;
}

/* Time Picker — cap width so narrow columns don’t overflow */

.ant-picker {
  min-width: 0;
  max-width: 100%;
  width: min(250px, 100%);
}

/* Input Affix */

.ant-input-affix-wrapper>input.ant-input {
  padding-left: 5px;
}

.ant-input-affix-wrapper .ant-input-prefix svg {
  color: #D1D1D1;
}

.ant-input-affix-wrapper {
  padding: 8px 20px;
}

/* Space Item */

.ant-space-item .ant-btn span {
  font-size: 14px;
}

/* Pop confirm */

.pop-confirm .ant-btn {
  max-width: 90px;
  padding: 0px 35.5px;
  height: 44px;
}

.pop-confirm-top {
  margin-bottom: 10px;
}

.pop-confirm-bottom {
  margin-top: 10px;
}

.pop-confirm-top .ant-btn:not(:last-child),
.pop-confirm-bottom .ant-btn:not(:last-child) {
  margin-right: 10px;
}

.pop-confirm-left .ant-btn:not(:last-child),
.pop-confirm-right .ant-btn:not(:last-child) {
  margin-bottom: 10px;
}

/* Ant Upload */

.ant-upload .ant-btn {
  font-size: 14px;
  border-radius: 5px;
}

.ant-upload.ant-upload-select-picture-card {
  border: 1px solid #2A2A2A !important;
  border: 1px solid var(--color-border, #2A2A2A) !important;
  border-style: solid !important;
  border-radius: 10px !important;
  border-radius: var(--radius-lg, 10px) !important;
  background-color: #0E0E0E !important;
  background-color: var(--color-elevated, #0E0E0E) !important;
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.ant-upload.ant-upload-select-picture-card:hover {
  border-color: #E01E45 !important;
  border-color: var(--color-primary, #E01E45) !important;
  box-shadow: var(--shadow-primary-sm);
}

.ant-upload.ant-upload-select-picture-card .anticon {
  margin-bottom: 8px;
}

.ant-upload .anticon svg {
  color: #B0B0B0;
}

.ant-upload-list {
  margin-top: 10px !important;
}

.ninjadash-upload-basic .ant-upload.ant-upload-select {
  width: 100%;
  border: 1px solid #2A2A2A;
  border: 1px solid var(--color-border, #2A2A2A);
  border-radius: 10px;
  border-radius: var(--radius-lg, 10px);
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.ninjadash-upload-basic .ant-upload.ant-upload-select:hover {
  border-color: #E01E45;
  border-color: var(--color-primary, #E01E45);
  box-shadow: var(--shadow-primary-sm);
}

.ninjadash-upload-basic .ant-upload.ant-upload-select .ant-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ninjadash-upload-basic .ninjadash-upload-text {
  font-size: 14px;
  color: #B0B0B0;
  padding-left: 15px;
}

html[dir="rtl"] .ninjadash-upload-basic .ninjadash-upload-text {
  padding-left: 0px;
  padding-right: 15px;
}

.ninjadash-upload-basic .ninjadash-upload-browse {
  font-size: 14px;
  color: #B0B0B0;
  color: var(--color-text-secondary, #B0B0B0);
  display: inline-block;
  padding: 14px 23px;
  border-left: 1px solid #2A2A2A;
  border-left: 1px solid var(--color-border, #2A2A2A);
  border-radius: 0 10px 10px 0;
  transition: color var(--duration-normal) ease, background var(--duration-normal) ease;
}

.ninjadash-upload-basic .ninjadash-upload-browse:hover {
  color: #E01E45;
  background: rgba(224, 30, 69, 0.04);
}

html[dir="rtl"] .ninjadash-upload-basic .ninjadash-upload-browse {
  border-left: 0 none;
  border-right: 1px solid #2A2A2A;
  border-right: 1px solid var(--color-border, #2A2A2A);
}

.ant-modal-wrap-rtl .ninjadash-event-details-modal .ant-modal-close {
  left: 10px;
}

.ant-card.ninjadash-upload-form .ant-card-body {
  padding-bottom: 15px !important;
}

/* Ant Picker */

.ant-picker {
  border-color: #2A2A2A;
  border-color: var(--color-border, #2A2A2A);
}

/* Ant Dropdown */

.ant-dropdown {
  box-shadow: var(--shadow-lg);
  background: #1F1F1F;
  background: var(--color-paper, #1F1F1F);
  border-radius: 6px;
  border-radius: var(--radius-md, 6px);
  border: 1px solid #2A2A2A;
  border: 1px solid var(--color-border, #2A2A2A);
}

.ant-dropdown a {
  display: flex;
  align-items: center;
  padding: 8px 24px;
  font-weight: 400;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
}

.ant-dropdown a i,
.ant-dropdown a svg,
.ant-dropdown a img {
  margin-right: 8px;
  width: 14px;
  height: 14px;
}

.ant-dropdown div {
  box-shadow: 0 0;
  border-radius: 5px;
}

/* Picker Under Input */

.ant-form-item-control-input .ant-picker {
  padding: 0 12px 0 12px;
  min-height: 38px;
  border-color: #2A2A2A;
  border-color: var(--color-border, #2A2A2A);
}

/* Leaflet COntainer */

.leaflet-container {
  z-index: 0;
}

/* Table Bordered*/
.table-bordered .ant-table-thead>tr>th {
  background: #0E0E0E;
  background: var(--color-elevated, #0E0E0E);
  border-top: 1px solid #2A2A2A;
  border-top: 1px solid var(--color-border, #2A2A2A);
}

.table-bordered .ant-table-tbody>tr>td {
  border-color: #2A2A2A !important;
  border-color: var(--color-border, #2A2A2A) !important;
}

.table-bordered .ant-table-thead tr th,
.table-bordered .ant-table-tbody tr td {
  padding: 16px 25px;
}

.table-bordered .ant-table-thead tr th:last-child,
.table-bordered .ant-table-tbody tr td:last-child {
  text-align: right;
}

/* Table Responsive */

.table-responsive .ant-table-content {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.table-responsive .ant-table-content .ant-table-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* Rich TextEditor  */

.RichTextEditor__root___2QXK- {
  border: 0 none !important;
}

.RichTextEditor__root___2QXK- .EditorToolbar__root___3_Aqz {
  margin: 0;
  border-color: #2A2A2A;
  border-color: var(--color-border, #2A2A2A);
}

.RichTextEditor__root___2QXK- .ButtonWrap__root___1EO_R button {
  padding: 0;
  border: 0 none;
  background: #1F1F1F;
  background: var(--color-paper, #1F1F1F);
  margin-right: 8px;
}

.RichTextEditor__root___2QXK- .Dropdown__root___3ALmx .Dropdown__value___34Py9 {
  border: 0 none;
}

.RichTextEditor__root___2QXK- .Dropdown__root___3ALmx select {
  border-right-width: 0px;
  direction: ltr;
}

.RichTextEditor__editor___1QqIU .DraftEditor-editorContainer {
  border: 0 none;
}

/* ChatBox Dropdwon */

.atbd-chatbox__messageControl {
  min-width: 210px;
}

.atbd-chatbox__messageControl ul {
  margin: 0;
  padding: 10px 0;
}

.atbd-chatbox__messageControl ul li a {
  padding: 4px 24px;
}

.atbd-chatbox__emoji {
  margin: -4.48px 0;
  padding: 0 10px;
}

.atbd-chatbox__emoji ul {
  display: flex;
  align-items: center;
}

.atbd-chatbox__emoji ul li {
  display: inline-block;
}

.atbd-chatbox__emoji ul li a {
  display: block;
  font-size: 20px;
  padding: 4px 7px;
  background: #1F1F1F;
  background: var(--color-paper, #1F1F1F);
}

.atbd-chatbox__emoji ul li a:hover {
  background-color: transparent;
}

.atbd-chatbox__emoji ul li a svg {
  margin: 0;
}

.rdrMonths {
  flex-wrap: wrap;
}

.ant-space {
  flex-wrap: wrap;
}

.ant-menu .ant-menu-submenu .ant-menu-submenu-title {
  display: flex;
  align-items: center;
}

.ant-menu-submenu.ant-menu-submenu-inline .ant-menu-submenu-title,
.ant-menu-item {
  display: inline-flex;
}

.ant-menu-submenu-popup {
  z-index: 105;
}

.ant-menu-submenu-popup .ant-menu-sub {
  padding: 8px 0;
}

.ant-menu-submenu-popup .ant-menu-submenu.ant-menu-submenu-inline .ant-menu-submenu-title,
.ant-menu-submenu-popup .ant-menu-item {
  display: block;
}

.ant-menu-submenu-popup .ant-menu-item {
  margin-bottom: 0 !important;
}

.ant-menu-sub.ant-menu-vertical {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ant-menu-sub.ant-menu-vertical .ant-menu-item a {
  color: #b0b0b0;
  color: var(--color-text-secondary, #b0b0b0);
}

/* Ninjadash Header More */
.ninjadash-header-more .ninjadash-nav-actions__searchbar {
  display: none;
}

/* page heading */

.ant-page-header.header-boxed {
  padding: 26px 180px 26px 180px !important;
}

.ant-page-header-heading {
  align-items: center;
}

.ant-page-header-heading-title {
  text-transform: capitalize;
}

.ant-page-header-heading-sub-title {
  position: relative;
  top: 2px;
}

/* Swiper Sldier */

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

/* Antd drag & drop */

.row-dragging {
  /* background: #fafafa; */
  /* border: 1px solid #ccc; */
  box-shadow: 0 15px 50px #8B8B8B20;
  display: flex;
}

.row-dragging tr {
  box-shadow: 0 15px 50px #8B8B8B20;
}

.row-dragging td {
  padding: 16px;
  color: #000;
  position: relative;
  z-index: 9999;
  opacity: 0.5;
  vertical-align: middle;
}

.row-dragging td .ant-checkbox-checked .ant-checkbox-inner {
  background-color: #00D084;
  background-color: var(--color-success, #00D084);
  border-color: #00D084;
  border-color: var(--color-success, #00D084);
}

.row-dragging td .todos-action,
.row-dragging td .table-actions {
  display: none;
}

.row-dragging td .user-info figcaption {
  display: none;
}

.row-dragging td .feather-move,
.row-dragging td .drag_email,
.row-dragging td .drag_company,
.row-dragging td .drag_designation,
.row-dragging td .drag_join-date,
.row-dragging td .active {
  display: inline-block;
  margin-top: 10px;
}

.row-dragging .drag-visible {
  visibility: visible;
}

/* Ninjadash Event Details Modal */
.ninjadash-event-details-modal .ant-modal-content {
  border-radius: 8px;
}

.ninjadash-event-details-modal .ant-modal-close {
  top: 12px;
  right: 10px;
}

.ninjadash-event-details-modal .ant-modal-close-x svg {
  width: 14px;
  height: 14px;
  color: #ffffff75;
}

.ninjadash-event-details-modal .ant-modal-close-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  line-height: 1;
  background-color: transparent;
}

.ninjadash-event-details-modal .ant-modal-close-x:hover {
  background-color: #ffffff15;
}

.ninjadash-event-details-modal .ant-modal-close-x:hover svg {
  color: #ffffff;
}

.ninjadash-event-details-modal.ninjadash-event-details-modal-primary .ant-modal-header {
  background-color: #E01E45;
}

.ninjadash-event-details-modal.ninjadash-event-details-modal-secondary .ant-modal-header {
  background-color: #E01E45;
}

.ninjadash-event-details-modal.ninjadash-event-details-modal-success .ant-modal-header {
  background-color: #00D084;
  background-color: var(--color-success, #00D084);
}

.ninjadash-event-details-modal.ninjadash-event-details-modal-info .ant-modal-header {
  background-color: #1BA3F0;
  background-color: var(--color-info, #1BA3F0);
}

.ninjadash-event-details-modal.ninjadash-event-details-modal-warning .ant-modal-header {
  background-color: #EFBC2A;
  background-color: var(--color-warning, #EFBC2A);
}

.ninjadash-event-details-modal.ninjadash-event-details-modal-danger .ant-modal-header {
  background-color: #E63946;
  background-color: var(--color-error, #E63946);
}

.ninjadash-event-details-modal.ninjadash-event-details-modal-dark .ant-modal-header {
  background-color: #0E0E0E;
}

.ninjadash-event-details-modal .ant-modal-header {
  padding: 19px 24px;
  border-radius: 8px 8px 0 0;
}

.ninjadash-event-details-modal .ant-modal-header .ant-modal-title {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

/* File Export Import Modal */
.ninjadash-export-wrap .ant-modal {
  width: 390px !important;
}

.ninjadash-export-wrap .ant-modal .ant-modal-header {
  border-bottom: 0 none;
  padding: 18px 30px 0 30px;
}

.ninjadash-export-wrap .ant-modal .ant-modal-body {
  padding: 25px 30px 30px 30px;
}

.ninjadash-export-wrap .ant-modal .ninjadash-button-grp {
  text-align: right;
  margin: 20px -8px -8px -8px;
}

.ninjadash-export-wrap .ant-modal .ninjadash-button-grp button {
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  height: 40px;
  padding: 0 16px;
  margin: 8px;
}

.ninjadash-export-wrap .ant-modal .ninjadash-button-grp button.ant-btn-white {
  color: #8B8B8B !important;
}

.ninjadash-export-wrap .ant-form-item-control-input {
  min-height: 36px;
}

.ninjadash-export-wrap .ant-form-item-control-input input {
  font-size: 14px;
  font-weight: 400;
  padding: 6px 20px;
  border-radius: 5px;
  color: #B0B0B0;
}

.ninjadash-export-wrap .ant-select-single {
  width: 100% !important;
}

.ninjadash-export-wrap .ant-form .ant-form-item {
  margin-bottom: 15px;
}

.ninjadash-export-wrap .ant-select-single .ant-select-selector {
  padding: 0 20px;
  border-color: #2A2A2A !important;
  border-color: var(--color-border, #2A2A2A) !important;
}

.ninjadash-create-file .ninjadash-button-grp {
  text-align: right;
}

.ninjadash-create-file .ant-modal {
  width: 390px !important;
}

.ninjadash-create-file .ant-modal .ant-form-item {
  margin-bottom: 20px;
}

.ninjadash-create-file .ant-modal-header {
  border-bottom: 0 none;
  padding-bottom: 6px;
}

.ninjadash-create-file .ninjadash-button-grp button {
  height: 40px;
  border-radius: 5px;
  margin: 5px;
}

.ninjadash-create-file .ant-form-item-control-input {
  border-radius: 5px;
}

.ninjadash-create-file .ant-form-item-control-input input {
  border: 1px solid #2A2A2A;
  border: 1px solid var(--color-border, #2A2A2A);
}

/* Task Modal */
.ninjadash-task-details .ant-modal-content .ant-modal-close {
  top: 10px;
}

.ninjadash-task-details .ant-modal-header {
  border-bottom: 0 none;
  padding: 30px 30px 0;
}

.ninjadash-task-details .ant-modal {
  width: 600px !important;
}

.ninjadash-task-details .ant-modal-header .ant-modal-title h4 {
  font-size: 20px;
  font-weight: 500;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
  margin-bottom: 4px;
}

.ninjadash-task-details .ant-modal-header .ant-modal-title .sub-text {
  font-size: 14px;
  font-weight: 400;
  color: #8B8B8B;
}

.ninjadash-task-details .ninjadash-task-details-modal .ninjadash-task-details__label {
  font-size: 16px;
  display: block;
  margin-bottom: 8px;
}

.ninjadash-task-details .ninjadash-task-details-modal .ninjadash-task-details-modal__description textarea {
  padding: 10px 20px;
  min-height: 88px;
  width: 100%;
  border: 0 none;
  border-radius: 4px;
  border-radius: var(--radius-xs, 4px);
  background-color: #0E0E0E;
  background-color: var(--color-elevated, #0E0E0E);
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
  resize: none;
}

.ninjadash-task-details .ninjadash-task-details-modal .ninjadash-task-details-modal__description textarea:focus {
  outline: none;
}

.ninjadash-task-details .ninjadash-task-details-modal .ninjadash-task-details-modal__description textarea::placeholder {
  color: #8b8b8b;
  color: var(--color-text-disabled, #8b8b8b);
  font-size: 15px;
}

.ninjadash-task-details .ant-modal-body {
  padding: 14px 30px 30px 30px;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-block {
  margin-top: 26px;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-block .addChecklist-wrap {
  position: relative;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-block .addChecklist-form {
  position: absolute;
  width: 240px;
  padding: 18px;
  left: 0;
  top: 50px;
  box-shadow: var(--shadow-lg);
  background-color: #1F1F1F;
  background-color: var(--color-paper, #1F1F1F);
  border: 1px solid #2A2A2A;
  border: 1px solid var(--color-border, #2A2A2A);
  border-radius: 6px;
  border-radius: var(--radius-md, 6px);
  z-index: 222;
}

html[dir="rtl"] .ninjadash-task-details .ant-modal-body .ninjadash-checklist-block .addChecklist-form {
  left: auto;
  right: 0;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-block .addChecklist-form .add-checklist {
  padding: 10px;
  border-radius: 4px;
  border-radius: var(--radius-xs, 4px);
  background-color: #0E0E0E;
  background-color: var(--color-elevated, #0E0E0E);
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
  width: 100%;
  height: 38px;
  border: 1px solid #2A2A2A;
  border: 1px solid var(--color-border, #2A2A2A);
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-block .addChecklist-form .addChecklist-form-action {
  margin-top: 15px;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-block .addChecklist-form .addChecklist-form-action a {
  position: relative;
  top: 3px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-block .addChecklist-form .addChecklist-form-action a svg {
  color: #9299bb;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-block .addChecklist-form .addChecklist-form-action .btn-add {
  margin-right: 15px;
}

html[dir="rtl"] .ninjadash-task-details .ant-modal-body .ninjadash-checklist-block .addChecklist-form .addChecklist-form-action .btn-add {
  margin-left: 15px;
  margin-right: 0;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-block button {
  height: 38px;
  padding: 0px 18.37px;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-row {
  margin-top: 26px;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-row .ninjadash-checklist-item:not(:last-child) {
  margin-bottom: 30px;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-row .ninjadash-checklist-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-row .ninjadash-checklist-item__top button {
  padding: 0px 16.32px;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
  background-color: #0E0E0E;
  background-color: var(--color-elevated, #0E0E0E);
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-row .ninjadash-checklist-item__title {
  font-size: 16px;
  font-weight: 500;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
  margin-bottom: 0;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-row .ninjadash-checklist__progress .ant-progress-inner .ant-progress-bg {
  height: 5px !important;
  background-color: #00D084;
  background-color: var(--color-success, #00D084);
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-row .ninjadash-checklist__progress .ant-progress .ant-progress-text {
  font-size: 12px;
  font-weight: 500;
  order: -1;
  margin: 0 10px 0 0;
}

html[dir="rtl"] .ninjadash-task-details .ant-modal-body .ninjadash-checklist-row .ninjadash-checklist__progress .ant-progress .ant-progress-text {
  margin: 0 0 0 10px;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-tasks {
  margin: 5px 0 5px 0;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-tasks .ant-checkbox-wrapper .ant-checkbox-inner {
  width: 18px;
  height: 18px;
  border-color: #B0B0B0;
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-tasks .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner {
  background-color: #00D084;
  background-color: var(--color-success, #00D084);
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-tasks .ant-checkbox-wrapper .ant-checkbox-checked:after {
  border-color: #00D084;
  border-color: var(--color-success, #00D084);
}

.ninjadash-task-details .ant-modal-body .ninjadash-checklist-item .ninjadash-checklist-tasks-wrap button {
  padding: 0px 35px;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
  background-color: #0E0E0E;
  background-color: var(--color-elevated, #0E0E0E);
}

.ninjadash-task-details .ant-modal-body {
  max-height: 800px;
  overflow-y: auto;
}

@media (max-width: 767px) {
  .ant-page-header {
    padding: 26px 15px 26px 15px;
  }
}

.page-header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: -6px -4px;
}

.page-header-actions button {
  font-size: 12px;
  font-weight: 500;
  height: 34px;
  padding: 0 12.32px;
  box-shadow: 0 3px 5px #8B8B8B05;
  margin: 6px 4px;
}

.page-header-actions button.ant-btn-white:focus {
  background-color: #fff !important;
}

.page-header-actions button+button {
  margin-left: 8px;
}

.page-header-actions button.ant-btn-white svg {
  width: 12px;
  height: 12px;
  margin-right: 2px;
  color: #E01E45;
}

/* Layout Css */

.ant-menu-dark .ant-menu-item a {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65) !important;
}

.ant-menu-dark .ant-menu-item a:hover {
  color: #ffffff;
}

.ant-menu-dark .ant-menu-submenu span {
  color: rgba(255, 255, 255, 0.65) !important;
}

.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: rgba(255, 255, 255, 0.05);
}

.ant-menu-inline-collapsed-tooltip a {
  color: #000 !important;
}

.ant-menu.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::before {
  background: transparent;
}

/* Chart Label */

.chart-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: #b0b0b0;
  color: var(--color-text-secondary, #b0b0b0);
}

.chart-label .label-dot {
  margin-right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.chart-label .label-dot.dot-success {
  background: #00D084;
  background: var(--color-success, #00D084);
}

.chart-label .label-dot.dot-info {
  background: #E01E45;
  background: var(--color-primary, #E01E45);
}

.chart-label .label-dot.dot-warning {
  background: #EFBC2A;
  background: var(--color-warning, #EFBC2A);
}

/* NOtification CSS */

.ant-notification {
  z-index: 1050 !important;
}

.rdrInputRange {
  padding-left: 10px !important;
}

/* Overlay Dark */
.overlay-dark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #10122130;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}

.overlay-dark.show {
  z-index: 998;
  opacity: 1;
  visibility: visible;
}

/* Responsive CSS */

@media only screen and (max-width: 1599px) {
  .ant-page-header.header-boxed {
    padding: 26px 130px 26px 130px !important;
  }
}

@media only screen and (max-width: 1500px) {
  .full-width-table .revenue-table {
    min-height: 100%;
  }

  .pop-confirm .ant-btn {
    padding: 0 20px;
    max-width: 60px;
  }

  .pop-confirm.pop-confirm-right {
    margin-left: 300px !important;
  }

  .pop-confirm.pop-confirm-bottom,
  .pop-confirm.pop-confirm-top {
    margin-left: 80px !important;
  }
}

@media only screen and (max-width: 1399px) {
  .ant-page-header.header-boxed {
    padding: 26px 50px 26px 50px !important;
  }
}

@media only screen and (max-width: 1199px) {
  .ant-page-header {
    padding: 0 15px;
  }
}

@media only screen and (max-width: 991px) {
  .ant-page-header.header-boxed {
    padding: 26px 30px 26px 30px !important;
  }

  .rdrMonths .rdrMonth {
    width: 100%;
    margin-bottom: 30px;
  }

  .rdrDateRangePickerWrapper.PreviewArea {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .rdrCalendarWrapper.rdrDateRangeWrapper {
    margin-top: 20px;
  }

  .ant-menu-inline-collapsed-tooltip {
    display: none;
  }
}

@media only screen and (max-width: 800px) {
  .ant-page-header-heading-left {
    max-width: 320px;
  }
}

@media only screen and (max-width: 767px) {
  .ant-page-header {
    padding: 26px 15px 26px 15px;
  }

  .ant-page-header-heading {
    flex-flow: column;
    align-items: center;
    justify-content: center !important;
  }

  .ant-page-header-heading-left {
    max-width: 100%;
  }

  .ant-page-header-heading .ant-page-header-heading-title {
    white-space: normal;
    text-align: center;
  }

  .ant-page-header-heading-extra {
    white-space: normal !important;
    margin: 12px 0 4px !important;
  }

  .ant-page-header-heading-extra .page-header-actions {
    white-space: normal !important;
    text-align: center;
  }

  .ant-card-body {
    padding: 20px !important;
  }

  .ant-card-head {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .ant-pagination .ant-pagination-item,
  .ant-pagination .ant-pagination-item.ant-pagination-prev,
  .ant-pagination .ant-pagination-item.ant-pagination-next,
  .ant-pagination .ant-pagination-jump-prev {
    margin-right: 5px;
  }

  .ant-pagination li.ant-pagination-item,
  .ant-pagination li.ant-pagination-prev,
  .ant-pagination li.ant-pagination-next,
  .ant-pagination li.ant-pagination-jump-prev,
  .ant-pagination li.ant-pagination-jump-next {
    font-size: 13px;
    height: 25px;
    min-width: 25px;
    line-height: 22px;
  }

  .ant-pagination li.ant-pagination-prev .anticon,
  .ant-pagination li.ant-pagination-next .anticon {
    vertical-align: 0.15em;
  }

  .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis,
  .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis {
    line-height: 2;
    font-family: 'Inter', system-ui, sans-serif;
  }

  .ant-table-pagination {
    float: none !important;
    text-align: center;
  }

  .ant-table-pagination li.ant-pagination-total-text {
    display: block;
    margin-bottom: 8px;
  }

  .ant-table-pagination li {
    margin-right: 8px !important;
  }

  .ant-pagination .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    height: 25px !important;
  }

  .ant-pagination .ant-select-single .ant-select-selector .ant-select-selection-item {
    line-height: 23px !important;
  }

  .rdrDefinedRangesWrapper {
    border-right: 0 none;
  }

  .project-modal .ant-picker {
    margin-bottom: 30px;
  }

  .project-modal {
    padding: 0 !important;
  }
}

@media only screen and (max-width: 575px) {
  .mt-sm-10 {
    margin-top: 10px;
  }

  .ant-page-header-heading-left {
    margin-top: 0;
  }

  .btn-inc,
  .btn-dec {
    height: 30px;
    width: 30px;
  }

  .ant-page-header {
    padding: 26px 20px 16px;
  }

  .ant-layout-header {
    height: auto;
  }

  .ant-card-head {
    line-height: 1;
  }

  .ant-card-head-title {
    white-space: normal !important;
  }

  .pop-confirm .ant-btn {
    max-width: 60px;
    padding: 0 20px;
  }

  .pop-confirm.pop-confirm-right {
    margin-left: 320px !important;
  }

  .pop-confirm.pop-confirm-bottom {
    margin-left: 95px !important;
  }

  /* Card Heading */
  .ant-card-head-wrapper {
    flex-flow: column;
    align-items: center;
  }

  .ant-card-head-wrapper .ant-card-extra {
    padding: 0 0 16px !important;
    float: none;
    margin: 0;
    flex-flow: column;
  }

  .ant-card-head-wrapper .ant-card-extra .ant-dropdown-trigger+.card-nav {
    margin-bottom: 8px;
  }

  .ant-card-head-wrapper .ant-card-extra .ant-dropdown-trigger {
    margin: 0 !important;
  }

  .card-nav ul li.active:before {
    display: none;
  }

  .ant-card-head-title>div {
    display: flex;
    flex-flow: column;
    align-items: center;
  }

  .ant-card-head-title>div span {
    margin: 8px 0 0;
  }

  .ant-picker-range-wrapper {
    min-width: auto !important;
  }

  .ant-picker-panel-container .ant-picker-panels,
  .ant-picker-datetime-panel {
    flex-direction: column;
  }
}

.bmzxig .ant-table tr th:first-child,
.bmzxig .ant-table tr td:first-child {
  padding-right: 15px;
}

/* Emprt */

.ant-empty .ant-empty-footer button {
  padding: 0px 15.58px !important;
}

/* Add Event Modal */
.addEvent-modal .ant-modal-header {
  padding: 20px 25px;
}

.addEvent-modal .ant-modal-header .ant-modal-close-x svg {
  color: #3A3A3A;
}

.addEvent-modal .ant-modal-header .ant-modal-title {
  font-size: 15px;
  font-weight: 500;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
}

.addEvent-modal .ant-modal-body {
  padding: 23px 25px;
}

/* Event Dropdown */

.event-dropdown {
  min-width: auto !important;
  max-width: 450px;
  padding: 0 !important;
  margin: 6px 0 0 !important;
  box-shadow: 0 10px 40px #8B8B8B20 !important;
}

.event-dropdown div {
  border-radius: 8px;
}

.event-dropdown .ant-card {
  width: 100% !important;
  margin-bottom: 0 !important;
}

.placement-confirm .ant-btn.ant-btn-white:hover {
  border-color: #E01E45;
}

@media only screen and (max-width: 479px) {
  .placement-confirm {
    display: flex;
    flex-wrap: wrap;
    margin: -5px -10px 0 -5px;
  }

  .placement-confirm .pop-confirm {
    flex: 0 0 50%;
  }

  .pop-confirm .ant-btn {
    display: block;
    padding: 0 20px;
    max-width: 80px;
    min-width: 80px;
    margin: 10px;
  }

  .pop-confirm.pop-confirm-right {
    margin-left: 0px !important;
  }

  .pop-confirm.pop-confirm-top {
    margin-left: 0px !important;
  }

  .pop-confirm.pop-confirm-bottom {
    margin-left: 0px !important;
    margin-top: 0px !important;
  }
}

@media only screen and (max-width: 400px) {
  /* Avoid forcing full-width selects in toolbars; shrink-to-fit within column */
  .ant-select {
    max-width: 100%;
    min-width: 0;
  }

  .rdrDefinedRangesWrapper {
    width: 100% !important;
  }

  .rdrDateRangePickerWrapper {
    flex-wrap: wrap;
  }

  .ninjadash-top-dropdown {
    width: 280px;
    min-width: 180px;
  }

  .ninjadash-top-dropdown .ninjadash-top-dropdown__title {
    min-height: 40px;
  }

  .ninjadash-top-dropdown .ninjadash-top-dropdown__nav li:not(:last-child) {
    margin-bottom: 10px;
  }

  .ninjadash-top-dropdown .ninjadash-top-dropdown__nav li a {
    padding: 10px 0px;
  }

  .ninjadash-top-dropdown .ninjadash-top-dropdown__content img {
    margin-right: 15px;
  }

  .ninjadash-top-dropdown .ninjadash-top-dropdown__content figcaption {
    margin-left: 0;
  }

  .ninjadash-top-dropdown .ninjadash-top-dropdown__content figcaption .ninjadash-top-dropdownText {
    min-width: 155px;
  }

  .ant-drawer-content-wrapper {
    width: 260px !important;
  }

  .rdrCalendarWrapper.rdrDateRangeWrapper {
    margin-top: 0;
  }
}

@media only screen and (max-width: 379px) {
  .ant-card-head-wrapper .ant-card-extra .ant-radio-button-wrapper {
    height: 32px !important;
    line-height: 30px !important;
  }

  .ant-notification-notice {
    width: 275px;
  }
}

@media (max-width: 575px) {
  .ant-card-body {
    padding: 15px !important;
  }
}

@media (max-width: 991px) {
  .mail-sideabr {
    box-shadow: 0 0 10px #00000020;
  }

  .ant-card-head-title span {
    margin-left: 10px;
  }
}

/* Invoice Print Style */
@media print {
  .invoice-area .ant-page-header {
    display: none;
  }

  .customizer-trigger {
    display: none;
  }
}

/* .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{
  color: #fff !important;
} */

/* custom label */

/* card spin loader */

.ant-card-body .sd-spin div,
.ant-card-body .spin div {
  position: relative;
}

.ant-card-body .sd-spin,
.ant-card-body .spin {
  height: 200px;
}

.ant-card-body {
  position: relative;
}

.ant-card-body .sd-spin .ant-spin,
.ant-card-body .spin .ant-spin {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-height: 200px;
  z-index: 1;
}

.ant-card-body .sd-spin,
.ant-card-body .spin {
  position: relative;
  min-height: 200px;
}

.ant-card-body .sd-spin::before,
.ant-card-body .spin::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 50% 50%, rgba(224, 30, 69, 0.03) 0%, transparent 70%);
  animation: pulse 2s ease-in-out infinite;
  z-index: 0;
}

.starActive svg {
  color: red;
}

/* vectormap zoom in / zoom out */

.jvectormap-zoomin,
.jvectormap-zoomout {
  width: 27px;
  height: 27px;
  background: none;
  color: #D1D1D1;
  color: var(--color-text-primary, #D1D1D1);
  border: 1px solid #2A2A2A;
  border: 1px solid var(--color-border, #2A2A2A);
  padding: 0;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  left: auto;
  right: 0;
  top: auto;
  background-color: #1F1F1F;
  background-color: var(--color-paper, #1F1F1F);
}

.jvectormap-zoomin {
  border-radius: 6px 6px 0 0;
  bottom: 36px;
}

.jvectormap-zoomout {
  border-radius: 0 0 6px 6px;
  bottom: 10px;
}

.jvectormap-tip {
  padding: 7px 12px;
  border: 0 none;
  font-size: 12px;
  background: #0E0E0E;
}

.btn-rtl {
  width: 60px;
  height: 60px;
  border: 1px solid #fff;
  background: #4347d9;
  color: #fff;
  position: fixed;
  right: 0;
  top: 50%;
  margin-top: -30px;
  z-index: 1060;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* masonry-grid start from here */

.my-masonry-grid {
  /* Not needed if autoprefixing */
  /* Not needed if autoprefixing */
  display: flex;
  margin-left: -10px;
  /* gutter size offset */
  width: auto;
}

.my-masonry-grid_column {
  padding-left: 10px;
  /* gutter size */
  background-clip: padding-box;
}

/* Style your items */

.my-masonry-grid_column>div {
  /* change div to reference your elements you put in <Masonry> */
  background: grey;
  margin-bottom: 30px;
}

.common-ul {
  padding: 5px 0;
  padding-left: 10px;
}

.display {
  display: none;
}

li.active>.display {
  display: block;
}

/* rtl section from here */
html[dir="rtl"] .ant-card-head-title span {
  margin-right: 15px;
}

html[dir="rtl"] span[aria-label="arrow-right"] svg,
html[dir="rtl"] span[aria-label="arrow-left"] svg {
  transform: rotateY(180deg);
}

html[dir="rtl"] .ant-menu.ant-menu-vertical {
  text-align: right !important;
}

html[dir="rtl"] .ant-menu.ant-menu-vertical .ant-menu-submenu-placement-rightTop {
  left: -170px !important;
}

html[dir="rtl"] .ant-menu.ant-menu-vertical .ant-menu-vertical-left {
  text-align: right;
}

html[dir="rtl"] .ant-modal-confirm .ant-modal-confirm-btns .ant-btn+.ant-btn {
  margin-left: 0;
  margin-right: 8px;
}

html[dir="rtl"] .ant-menu.ant-menu-vertical .ant-menu-submenu-arrow {
  right: auto;
  left: 16px;
  transform: rotateY(180deg);
}

html[dir="rtl"] .ant-menu-vertical .ant-menu-submenu-title {
  padding-right: 15px !important;
}

html[dir="rtl"] .project-modal-footer {
  text-align: right !important;
}

html[dir="rtl"] .ant-card-extra .ant-dropdown-trigger {
  margin-right: 20px !important;
  margin-left: 0 !important;
}

/* Top Menu */

.ninjadash-topmenu .ninjadash-blog-details .ninjadash-share-links {
  margin-left: 1000px !important;
}

/* Auth0 style */

.auth0-lock.auth0-lock .auth0-lock-header-logo {
  height: 32px !important;
  margin: 0 0 3px !important;
}

.auth0-lock.auth0-lock .auth0-lock-name {
  font-size: 16px !important;
}

/* ============================================
   UTILITY CLASSES - Common Cyber Patterns
   ============================================ */

/* Glow text - refined accent text effect */
.glow-text {
  color: #f87171;
  text-shadow:
    0 0 8px rgba(224, 30, 69, 0.18),
    0 0 20px rgba(224, 30, 69, 0.08);
}

.glow-text.success {
  color: #4ade80;
  text-shadow:
    0 0 8px rgba(0, 200, 100, 0.18),
    0 0 20px rgba(0, 200, 100, 0.08);
}

.glow-text.warning {
  color: #fbbf24;
  text-shadow:
    0 0 8px rgba(255, 184, 0, 0.18),
    0 0 20px rgba(255, 184, 0, 0.08);
}

.glow-text.error {
  color: #fb7185;
  text-shadow:
    0 0 8px rgba(255, 51, 102, 0.18),
    0 0 20px rgba(255, 51, 102, 0.08);
}

/* Glass panel - reusable glassmorphism panel */
.glass-panel {
  background: linear-gradient(135deg, rgba(4, 4, 4, 0.85) 0%, rgba(14, 14, 14, 0.85) 100%);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(224, 30, 69, 0.15);
  border: 1px solid rgba(var(--color-primary-rgb, 224, 30, 69), 0.15);
  border-radius: 12px;
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
}

.glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 30, 69, 0.25), transparent);
  background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb, 224, 30, 69), 0.25), transparent);
  pointer-events: none;
}

/* Neon border - glowing border effect */
.neon-border {
  border: 1px solid rgba(224, 30, 69, 0.4);
  box-shadow:
    0 0 5px rgba(224, 30, 69, 0.2),
    0 0 10px rgba(224, 30, 69, 0.1),
    inset 0 0 5px rgba(224, 30, 69, 0.05);
  transition: all 0.3s ease;
}

.neon-border:hover {
  border-color: rgba(224, 30, 69, 0.7);
  box-shadow:
    0 0 10px rgba(224, 30, 69, 0.4),
    0 0 20px rgba(224, 30, 69, 0.2),
    0 0 40px rgba(224, 30, 69, 0.1),
    inset 0 0 10px rgba(224, 30, 69, 0.08);
}

.neon-border.success {
  border-color: rgba(0, 255, 136, 0.4);
  box-shadow:
    0 0 5px rgba(0, 255, 136, 0.2),
    0 0 10px rgba(0, 255, 136, 0.1);
}

.neon-border.warning {
  border-color: rgba(255, 184, 0, 0.4);
  box-shadow:
    0 0 5px rgba(255, 184, 0, 0.2),
    0 0 10px rgba(255, 184, 0, 0.1);
}

.neon-border.error {
  border-color: rgba(255, 51, 102, 0.4);
  box-shadow:
    0 0 5px rgba(255, 51, 102, 0.2),
    0 0 10px rgba(255, 51, 102, 0.1);
}

/* ============================================
   IMPROVED RESPONSIVE BREAKPOINTS
   ============================================ */
/* Mobile-first responsive spacing and layout */
@media (max-width: 480px) {
  /* Fluid padding; heading sizes come from theme/global.css (clamp) — avoid !important fights */
  .ant-card-body {
    padding: clamp(12px, 3.8vw, 16px) clamp(12px, 3.2vw, 14px) !important;
  }

  .ant-card-head {
    padding-left: clamp(12px, 3.2vw, 14px) !important;
    padding-right: clamp(12px, 3.2vw, 14px) !important;
  }

  .cyber-stat-card {
    padding: 16px;
  }

  .cyber-stat-card .stat-value {
    font-size: 1.75rem;
  }

  .cyber-stat-card .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .ant-table {
    font-size: 12px !important;
  }

  .glass-panel,
  .cyber-glass {
    border-radius: 8px !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .ant-card-body {
    padding: clamp(16px, 2.8vw, 20px) clamp(14px, 2.5vw, 18px) !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ant-card-body {
    padding: clamp(18px, 2.2vw, 22px) clamp(16px, 2vw, 20px) !important;
  }
}

/* Larger screens get more spacious layouts */
@media (min-width: 1440px) {
  .ant-card-body {
    padding: clamp(22px, 1.6vw, 30px) clamp(20px, 1.4vw, 28px) !important;
  }

  .cyber-stat-card {
    padding: 28px;
  }

  .cyber-stat-card .stat-value {
    font-size: 3rem;
  }
}

@media (min-width: 1920px) {
  .ant-card-body {
    padding: clamp(26px, 1.4vw, 36px) clamp(24px, 1.2vw, 32px) !important;
  }

  .cyber-stat-card {
    padding: 32px;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
    line-height: 1.5;
  }

  a, a:visited {
    color: #000 !important;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555 !important;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  /* Hide non-essential UI for print */
  .ant-layout-sider,
  .ant-layout-header,
  .admin-footer,
  .ant-menu,
  .ant-btn,
  .ant-pagination,
  .ant-tabs-nav,
  .ant-modal-close,
  nav,
  .no-print {
    display: none !important;
  }

  .ant-layout-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background-image: none !important;
  }

  .ant-card {
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
    margin-bottom: 16pt;
    border-radius: 0 !important;
  }

  .ant-card-head {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #ccc !important;
  }

  .ant-table {
    border-collapse: collapse;
    width: 100% !important;
  }

  .ant-table-thead > tr > th {
    background: #f0f0f0 !important;
    border: 1px solid #ccc !important;
    padding: 8pt !important;
    font-weight: bold;
  }

  .ant-table-tbody > tr > td {
    border: 1px solid #ccc !important;
    padding: 6pt !important;
  }

  .ant-table-tbody > tr:nth-child(even) {
    background: #f9f9f9 !important;
  }

  /* Ensure charts and stats are printable */
  .cyber-stat-card {
    border: 1px solid #ccc !important;
    padding: 12pt;
    page-break-inside: avoid;
  }

  .cyber-stat-card .stat-value {
    font-size: 18pt;
    color: #000 !important;
  }

  .cyber-stat-card .stat-label {
    color: #333 !important;
    font-size: 9pt;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  p, table, figure {
    orphans: 3;
    widows: 3;
  }

  @page {
    margin: 1.5cm;
    size: A4;
  }
}

/* ============================================
   CONSOLE UI ENHANCEMENTS
   Enhanced modern cybersecurity dashboard aesthetics
   ============================================ */

/* Cyber gradient backgrounds */
.cyber-gradient-bg {
  background: linear-gradient(
    135deg,
    var(--color-background) 0%,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-elevated)) 50%,
    var(--color-background) 100%
  );
}

/* Enhanced stat cards with glow effect */
.cyber-stat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    var(--color-paper) 0%,
    var(--color-elevated) 100%
  );
  border: 1px solid var(--color-border);
  border-radius: 12px;
  border-radius: var(--radius-lg, 12px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cyber-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-primary) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cyber-stat-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(224, 30, 69, 0.1);
  border-color: rgba(224, 30, 69, 0.3);
}

.cyber-stat-card:hover::before {
  opacity: 1;
}

.cyber-stat-card .stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  border-radius: var(--radius-md, 10px);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 15%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 5%, transparent) 100%
  );
  transition: all 0.3s ease;
}

.cyber-stat-card:hover .stat-icon {
  transform: scale(1.05) rotate(3deg);
  box-shadow: 0 0 24px rgba(224, 30, 69, 0.25);
}

.cyber-stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin: 8px 0;
}

.cyber-stat-card .stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Enhanced chart containers */
.cyber-chart-container {
  position: relative;
  padding: 16px;
  background: linear-gradient(
    165deg,
    var(--color-elevated) 0%,
    color-mix(in srgb, var(--color-primary) 2%, var(--color-background)) 100%
  );
  border: 1px solid var(--color-border);
  border-radius: 12px;
  border-radius: var(--radius-lg, 12px);
}

.cyber-chart-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-primary),
    transparent
  );
  opacity: 0.3;
}

/* Data table enhancements */
.cyber-data-table .ant-table-thead > tr > th {
  background: linear-gradient(
    180deg,
    var(--color-elevated) 0%,
    color-mix(in srgb, var(--color-primary) 3%, var(--color-elevated)) 100%
  );
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}

.cyber-data-table .ant-table-tbody > tr {
  transition: all 0.2s ease;
}

.cyber-data-table .ant-table-tbody > tr:hover {
  background: linear-gradient(
    90deg,
    rgba(224, 30, 69, 0.06) 0%,
    transparent 100%
  ) !important;
}

.cyber-data-table .ant-table-tbody > tr > td {
  border-bottom: 1px solid rgba(46, 47, 54, 0.5);
}

/* Enhanced empty states */
.cyber-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.cyber-empty-state__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 12%, var(--color-elevated)) 0%,
    var(--color-elevated) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent),
    0 12px 32px rgba(0, 0, 0, 0.3);
}

.cyber-empty-state__icon svg {
  font-size: 36px;
  color: var(--color-primary);
}

.cyber-empty-state__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.cyber-empty-state__description {
  font-size: 14px;
  color: var(--color-text-secondary);
  max-width: 320px;
  line-height: 1.6;
}

/* Activity timeline */
.cyber-timeline {
  position: relative;
  padding-left: 24px;
}

.cyber-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--color-primary) 0%,
    transparent 100%
  );
}

.cyber-timeline__item {
  position: relative;
  padding-bottom: 24px;
}

.cyber-timeline__item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 16px rgba(224, 30, 69, 0.4);
}

.cyber-timeline__item:last-child {
  padding-bottom: 0;
}

/* Metric badges with glow */
.cyber-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border-radius: var(--radius-xl, 20px);
  font-size: 13px;
  font-weight: 600;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}

.cyber-metric:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 16px rgba(224, 30, 69, 0.15);
}

.cyber-metric--success {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-elevated));
  border-color: rgba(0, 208, 132, 0.3);
  color: var(--color-success);
}

.cyber-metric--warning {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-elevated));
  border-color: rgba(239, 188, 42, 0.3);
  color: var(--color-warning);
}

.cyber-metric--error {
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-elevated));
  border-color: rgba(230, 57, 70, 0.3);
  color: var(--color-error);
}

/* Search bar enhancement */
.cyber-search {
  position: relative;
}

.cyber-search .ant-input-affix-wrapper {
  background: var(--color-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  border-radius: var(--radius-lg, 12px) !important;
  padding: 12px 16px !important;
  transition: all 0.25s ease;
}

.cyber-search .ant-input-affix-wrapper:hover {
  border-color: rgba(224, 30, 69, 0.3) !important;
}

.cyber-search .ant-input-affix-wrapper:focus,
.cyber-search .ant-input-affix-wrapper-focused {
  border-color: var(--color-primary) !important;
  box-shadow:
    0 0 0 3px rgba(224, 30, 69, 0.12),
    0 0 24px rgba(224, 30, 69, 0.08) !important;
}

/* Floating action panel */
.cyber-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, #FF3D65 100%);
  color: #fff;
  border: none;
  box-shadow:
    0 4px 16px rgba(224, 30, 69, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 100;
}

.cyber-fab:hover {
  transform: scale(1.08) rotate(90deg);
  box-shadow:
    0 8px 32px rgba(224, 30, 69, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.cyber-fab:active {
  transform: scale(0.95);
}

/* Notification dot */
.cyber-dot {
  position: relative;
  display: inline-block;
}

.cyber-dot::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-paper);
  animation: pulse-dot 2s ease-in-out infinite;
}

.cyber-dot--success::after {
  background: var(--color-success);
}

.cyber-dot--warning::after {
  background: var(--color-warning);
}

.cyber-dot--error::after {
  background: var(--color-error);
}

@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* Section headers with accent line */
.cyber-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.cyber-section-header__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.cyber-section-header__line {
  flex: 1 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--color-border),
    transparent
  );
}

/* Loading skeleton enhancement */
.cyber-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
}

.cyber-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Responsive utilities */
@media (max-width: 768px) {
  .cyber-stat-card .stat-value {
    font-size: 1.5rem;
  }

  .cyber-stat-card .stat-icon {
    width: 44px;
    height: 44px;
  }

  .cyber-fab {
    width: 48px;
    height: 48px;
    bottom: 16px;
    right: 16px;
  }
}

/* ============================================
   ENHANCED MOBILE EXPERIENCE
   ============================================ */

/* --- Touch-friendly targets (44px minimum per WCAG 2.5.5) --- */
@media (pointer: coarse) {
  .ant-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .ant-btn-sm {
    min-height: 36px;
    min-width: 36px;
  }

  .ant-btn-icon-only {
    min-height: 44px;
    min-width: 44px;
  }

  .ant-menu-item,
  .ant-menu-submenu-title {
    min-height: 44px;
    line-height: 44px;
  }

  .ant-tabs-tab {
    padding: 12px 16px !important;
    min-height: 44px;
  }

  .ant-checkbox-wrapper,
  .ant-radio-wrapper {
    padding: 8px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .ant-select-selector {
    min-height: 44px !important;
  }

  .ant-pagination-item,
  .ant-pagination-prev,
  .ant-pagination-next {
    min-width: 36px !important;
    min-height: 36px !important;
    line-height: 34px !important;
  }

  .ant-switch {
    min-width: 52px;
    min-height: 28px;
  }
}

/* --- Mobile card improvements --- */
@media (max-width: 767px) {
  /* Tighter card spacing on mobile */
  .ant-card {
    margin-bottom: 12px !important;
  }

  .ant-card .ant-card-head {
    padding: 12px 16px !important;
    min-height: auto !important;
  }

  .ant-card .ant-card-head-title {
    padding: 4px 0 !important;
    font-size: 14px !important;
  }

  .ant-card .ant-card-extra {
    padding: 4px 0 !important;
  }

  /* Stack card head title + extra vertically on narrow screens */
  .ant-card .ant-card-head-wrapper {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Better row gutters on mobile */
  .ant-row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  .ant-row > .ant-col {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Full-width buttons in mobile card actions */
  .ant-card-actions > li > span {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Extra small screens (< 380px) --- */
@media (max-width: 379px) {
  .ant-card-body {
    padding: 12px !important;
  }

  .ant-card .ant-card-head {
    padding: 10px 12px !important;
  }

  /* Prevent long text from overflowing card headers */
  .ant-card-head-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- Mobile table scroll indicator --- */
@media (max-width: 767px) {
  .ant-table-wrapper {
    position: relative;
  }

  /* Fade hint on right edge to indicate horizontal scroll */
  .ant-table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(
      to right,
      transparent,
      rgba(4, 4, 4, 0.6)
    );
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
    border-radius: 0 8px 8px 0;
  }

  /* Sticky first column for tables */
  .ant-table-thead > tr > th:first-child,
  .ant-table-tbody > tr > td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 3;
    background: inherit;
  }

  /* Smaller table font */
  .ant-table {
    font-size: 13px;
  }
}

/* --- Mobile form improvements --- */
@media (max-width: 767px) {
  .ant-form-item {
    margin-bottom: 16px;
  }

  .ant-form-item-label {
    padding-bottom: 4px !important;
  }

  .ant-form-item-label > label {
    font-size: 13px;
  }

  /* Full-width inputs */
  .ant-input,
  .ant-input-number,
  .ant-picker,
  .ant-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Larger input height for touch */
  .ant-input,
  .ant-input-number-input {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  .ant-input-affix-wrapper {
    min-height: 44px;
  }

  .ant-input-affix-wrapper .ant-input {
    min-height: auto;
  }

  /* Stack form actions vertically */
  .ant-form-item .ant-form-item-control .ant-btn + .ant-btn {
    margin-top: 8px;
    margin-left: 0;
  }

  /* Better textarea sizing */
  textarea.ant-input {
    min-height: 100px;
    font-size: 16px; /* Prevents iOS zoom */
  }
}

/* --- Mobile dropdown/popover improvements --- */
@media (max-width: 767px) {
  .ant-dropdown {
    max-width: calc(100vw - 16px) !important;
  }

  .ant-popover {
    max-width: calc(100vw - 24px) !important;
  }

  .ant-popover-inner {
    padding: 12px !important;
  }

  /* Better tooltip positioning */
  .ant-tooltip {
    max-width: calc(100vw - 32px) !important;
  }
}

/* --- Mobile notification improvements --- */
@media (max-width: 480px) {
  .ant-notification {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    margin-right: 8px !important;
  }

  .ant-notification-notice {
    padding: 12px 16px !important;
    width: 100% !important;
  }

  .ant-message {
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
  }

  .ant-message-notice-content {
    max-width: calc(100vw - 32px);
    font-size: 14px;
    padding: 10px 16px;
  }
}

/* --- Mobile drawer improvements --- */
@media (max-width: 479px) {
  .ant-drawer-content-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .ant-drawer-header {
    padding: 12px 16px !important;
  }

  .ant-drawer-body {
    padding: 16px !important;
  }

  .ant-drawer-footer {
    padding: 12px 16px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* --- Smooth scrolling for touch devices --- */
@media (hover: none) and (pointer: coarse) {
  .ant-table-body,
  .ant-table-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Active state feedback for interactive elements */
  .ant-btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  .ant-card:active {
    transform: scale(0.995);
    transition: transform 0.1s ease;
  }

  /* Disable hover effects on touch - they cause sticky states */
  .ant-card:hover {
    transform: none !important;
  }

  .ant-table-tbody > tr:hover > td {
    transition: none;
  }

  /* Prevent text selection on interactive elements during touch */
  .ant-btn,
  .ant-menu-item,
  .ant-tabs-tab,
  .ant-pagination-item {
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }
}

/* --- Scroll lock when sidebar open --- */
body.console-sidebar-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  /* Preserve scroll position */
  top: 0;
  top: var(--scroll-y, 0);
}

/* --- Mobile breadcrumb improvements --- */
@media (max-width: 767px) {
  .ant-breadcrumb {
    font-size: 12px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }

  .ant-breadcrumb::-webkit-scrollbar {
    display: none;
  }
}

/* --- Mobile-friendly tag/badge sizing --- */
@media (max-width: 767px) {
  .ant-tag {
    font-size: 11px;
    padding: 2px 6px;
    margin: 2px;
    line-height: 1.5;
  }

  .ant-badge-count {
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
  }
}

/* --- Improve Ant Design steps for mobile --- */
@media (max-width: 575px) {
  .ant-steps-horizontal:not(.ant-steps-label-vertical) {
    flex-direction: column !important;
  }

  .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item {
    padding-left: 0 !important;
    margin-bottom: 12px;
  }

  .ant-steps-item-tail {
    display: none !important;
  }
}

/* --- Mobile collapse/accordion --- */
@media (max-width: 767px) {
  .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    padding: 12px 16px !important;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .ant-collapse-content > .ant-collapse-content-box {
    padding: 12px 16px !important;
  }
}
/* Shared layout rhythm (console + loading fallbacks; landing sections can reuse) */
:root {
  --app-content-max-width: 1320px;
  --app-page-pad-x: clamp(16px, 3vw, 28px);
  --app-page-pad-y-start: clamp(16px, 2.5vw, 24px);
  --app-page-pad-y-end: clamp(20px, 3vw, 32px);
  --app-stack-gap: clamp(16px, 2.5vw, 28px);
  /* Fallback before ThemeProvider injects tokens */
  --color-sidebar: #070709;
  --gradient-page-overlay: none;
  --sidebar-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  /* Avoid horizontal drift from 100vw vs scrollbar on some layouts */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--color-background);
  background-image: none;
  background-image: var(--gradient-page-overlay);
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  color: var(--color-text-primary);
  transition: background-color var(--duration-normal) ease, color var(--duration-normal) ease;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  min-height: 100dvh;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* ============================================
   TYPOGRAPHY SCALE
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: 0;
}

h1 { font-size: clamp(1.75rem, 3vw, 2rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.375rem, 2.5vw, 1.625rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }
h4 { font-size: clamp(1rem, 1.5vw, 1.25rem); }
h5 { font-size: clamp(0.9375rem, 1.2vw, 1.125rem); }
h6 { font-size: clamp(0.875rem, 1vw, 1rem); }

p {
  line-height: 1.6;
  letter-spacing: -0.005em;
  /* Inherit body primary; use .text-secondary or Ant Typography.secondary for muted copy */
  color: inherit;
}

small, .text-sm {
  font-size: 0.8125rem;
  letter-spacing: 0em;
}

strong, b {
  font-weight: 600;
}

code, pre, .mono {
  font-family: 'JetBrains Mono', monospace;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: -0.02em;
  font-size: 0.875em;
}

code:not(pre code) {
  padding: 2px 6px;
  border-radius: 4px;
  border-radius: var(--radius-xs, 4px);
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  font-size: 0.85em;
}

pre {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
}

/* Improved link defaults */
a {
  transition: color var(--duration-fast) ease;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

.ant-layout {
  background: transparent !important;
}

@media (max-width: 991px), (hover: none), (pointer: coarse) {
  body {
    background-attachment: scroll;
  }
}

.ant-layout-header {
  position: relative;
  background: var(--color-paper) !important;
  border-bottom: 1px solid var(--color-border);
  -webkit-backdrop-filter: saturate(1.15) blur(14px);
  backdrop-filter: saturate(1.15) blur(14px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.08);
}

.ant-layout-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  background: var(--gradient-header-line, linear-gradient(90deg, transparent, var(--color-primary), transparent));
  opacity: 0.38;
  pointer-events: none;
}

.ant-layout-sider {
  background: #070709 !important;
  background: var(--color-sidebar, #0a0a0a) !important;
  border-right: 1px solid var(--color-border);
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  transition: width var(--sidebar-transition),
              min-width var(--sidebar-transition),
              max-width var(--sidebar-transition);
}

.ant-card {
  background: var(--color-paper) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  box-shadow: var(--shadow-sm), var(--shadow-card-inner, inset 0 1px 0 rgba(255, 255, 255, 0.045)) !important;
  transition: border-color var(--duration-normal) ease,
    box-shadow var(--duration-normal) ease,
    transform var(--duration-normal) ease;
  transition: border-color var(--duration-normal) var(--ease-out-smooth, ease),
    box-shadow var(--duration-normal) var(--ease-out-smooth, ease),
    transform var(--duration-normal) var(--ease-out-smooth, ease);
}

.ant-card:hover {
  border-color: var(--color-border-hover) !important;
  box-shadow: var(--shadow-md), var(--shadow-primary-sm), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  box-shadow: var(--shadow-md), var(--shadow-primary-sm), var(--shadow-card-inner, inset 0 1px 0 rgba(255, 255, 255, 0.045)) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .ant-card:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ant-card:hover {
    transform: none;
  }
}

.ant-card-head {
  border-bottom: 1px solid var(--color-border) !important;
  background: transparent !important;
}

.ant-btn-primary {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary-hover) 22%, var(--color-primary)) 0%,
    var(--color-primary) 48%,
    color-mix(in srgb, var(--color-primary) 88%, #000) 100%
  ) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, var(--shadow-primary-sm) !important;
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, filter var(--duration-fast) ease !important;
}

.ant-btn-primary:hover {
  opacity: 0.96;
  filter: brightness(1.04);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, var(--shadow-primary-md) !important;
}

/* Ant Design defaults use dashed borders for secondary actions and file drops; solid reads cleaner */
.ant-btn.ant-btn-dashed {
  border-style: solid !important;
}

.ant-upload.ant-upload-drag {
  border-style: solid !important;
  border-width: 1px !important;
}

.ant-upload.ant-upload-select-picture-card {
  border-style: solid !important;
}

/* Consistent empty state styling */
.ant-empty-description {
  color: var(--color-text-disabled) !important;
}

/* Consistent popconfirm styling */
.ant-popconfirm .ant-popconfirm-message-title {
  color: var(--color-text-primary);
}

/* Drawer dark consistency */
.ant-drawer .ant-drawer-content {
  background: var(--color-paper);
}

.ant-drawer .ant-drawer-header {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
}

.ant-drawer .ant-drawer-title {
  color: var(--color-text-primary);
}

/* Unified toast/notification variants (success/warning/error/info) */
.ant-message .ant-message-notice-content {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
}

.ant-message .ant-message-notice-content .ant-message-custom-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-weight: 500;
}

.ant-message .ant-message-notice-content .ant-message-custom-content > .anticon {
  color: inherit;
}

.ant-message .ant-message-notice.ant-message-notice-success .ant-message-notice-content,
.ant-message .ant-message-notice-content:has(.ant-message-success) {
  background: rgba(0, 208, 132, 0.14);
  background: rgba(var(--color-success-rgb, 0, 208, 132), 0.14);
  border-color: rgba(0, 208, 132, 0.34);
  border-color: rgba(var(--color-success-rgb, 0, 208, 132), 0.34);
  color: color-mix(in srgb, #00D084 68%, var(--color-text-primary));
  color: color-mix(in srgb, var(--color-success, #00D084) 68%, var(--color-text-primary));
}

.ant-message .ant-message-notice.ant-message-notice-warning .ant-message-notice-content,
.ant-message .ant-message-notice-content:has(.ant-message-warning) {
  background: rgba(239, 188, 42, 0.16);
  background: rgba(var(--color-warning-rgb, 239, 188, 42), 0.16);
  border-color: rgba(239, 188, 42, 0.4);
  border-color: rgba(var(--color-warning-rgb, 239, 188, 42), 0.4);
  color: color-mix(in srgb, #EFBC2A 72%, var(--color-text-primary));
  color: color-mix(in srgb, var(--color-warning, #EFBC2A) 72%, var(--color-text-primary));
}

.ant-message .ant-message-notice.ant-message-notice-error .ant-message-notice-content,
.ant-message .ant-message-notice-content:has(.ant-message-error) {
  background: rgba(230, 57, 70, 0.14);
  background: rgba(var(--color-error-rgb, 230, 57, 70), 0.14);
  border-color: rgba(230, 57, 70, 0.34);
  border-color: rgba(var(--color-error-rgb, 230, 57, 70), 0.34);
  color: color-mix(in srgb, #E63946 70%, var(--color-text-primary));
  color: color-mix(in srgb, var(--color-error, #E63946) 70%, var(--color-text-primary));
}

.ant-message .ant-message-notice.ant-message-notice-info .ant-message-notice-content,
.ant-message .ant-message-notice-content:has(.ant-message-info) {
  background: rgba(27, 163, 240, 0.14);
  background: rgba(var(--color-info-rgb, 27, 163, 240), 0.14);
  border-color: rgba(27, 163, 240, 0.34);
  border-color: rgba(var(--color-info-rgb, 27, 163, 240), 0.34);
  color: color-mix(in srgb, #1BA3F0 70%, var(--color-text-primary));
  color: color-mix(in srgb, var(--color-info, #1BA3F0) 70%, var(--color-text-primary));
}

.ant-notification .ant-notification-notice {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
}

.ant-notification .ant-notification-notice .ant-notification-notice-message {
  color: inherit;
  font-weight: 600;
}

.ant-notification .ant-notification-notice .ant-notification-notice-description {
  color: color-mix(in srgb, currentColor 65%, var(--color-text-secondary));
}

.ant-notification .ant-notification-notice .ant-notification-notice-close {
  color: var(--color-text-secondary);
}

.ant-notification .ant-notification-notice .ant-notification-notice-close:hover {
  color: var(--color-text-primary);
}

.ant-notification .ant-notification-notice.ant-notification-notice-success {
  background: rgba(0, 208, 132, 0.14);
  background: rgba(var(--color-success-rgb, 0, 208, 132), 0.14);
  border-color: rgba(0, 208, 132, 0.34);
  border-color: rgba(var(--color-success-rgb, 0, 208, 132), 0.34);
  color: color-mix(in srgb, #00D084 68%, var(--color-text-primary));
  color: color-mix(in srgb, var(--color-success, #00D084) 68%, var(--color-text-primary));
}

.ant-notification .ant-notification-notice.ant-notification-notice-warning {
  background: rgba(239, 188, 42, 0.16);
  background: rgba(var(--color-warning-rgb, 239, 188, 42), 0.16);
  border-color: rgba(239, 188, 42, 0.4);
  border-color: rgba(var(--color-warning-rgb, 239, 188, 42), 0.4);
  color: color-mix(in srgb, #EFBC2A 72%, var(--color-text-primary));
  color: color-mix(in srgb, var(--color-warning, #EFBC2A) 72%, var(--color-text-primary));
}

.ant-notification .ant-notification-notice.ant-notification-notice-error {
  background: rgba(230, 57, 70, 0.14);
  background: rgba(var(--color-error-rgb, 230, 57, 70), 0.14);
  border-color: rgba(230, 57, 70, 0.34);
  border-color: rgba(var(--color-error-rgb, 230, 57, 70), 0.34);
  color: color-mix(in srgb, #E63946 70%, var(--color-text-primary));
  color: color-mix(in srgb, var(--color-error, #E63946) 70%, var(--color-text-primary));
}

.ant-notification .ant-notification-notice.ant-notification-notice-info {
  background: rgba(27, 163, 240, 0.14);
  background: rgba(var(--color-info-rgb, 27, 163, 240), 0.14);
  border-color: rgba(27, 163, 240, 0.34);
  border-color: rgba(var(--color-info-rgb, 27, 163, 240), 0.34);
  color: color-mix(in srgb, #1BA3F0 70%, var(--color-text-primary));
  color: color-mix(in srgb, var(--color-info, #1BA3F0) 70%, var(--color-text-primary));
}

/* Popover dark consistency */
.ant-popover .ant-popover-inner {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.ant-popover .ant-popover-title {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-border);
}

.ant-popover .ant-popover-arrow::before,
.ant-popover .ant-popover-arrow::after {
  background: var(--color-paper);
}

/* Collapse/accordion dark consistency */
.ant-collapse {
  background: var(--color-paper);
  border-color: var(--color-border);
}

.ant-collapse > .ant-collapse-item {
  border-bottom-color: var(--color-border);
}

.ant-collapse > .ant-collapse-item > .ant-collapse-header {
  color: var(--color-text-primary);
}

.ant-collapse .ant-collapse-content {
  background: var(--color-elevated);
  border-top-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* Timeline dark consistency */
.ant-timeline .ant-timeline-item-content {
  color: var(--color-text-secondary);
}

.ant-timeline .ant-timeline-item-tail {
  border-inline-start-color: var(--color-border);
}

/* ============================================
   APP PAGE SHELL (consistent spacing)
   ============================================ */
.app-page-inner {
  width: 100%;
  max-width: 1320px;
  max-width: var(--app-content-max-width);
  margin: 0 auto;
  padding-top: clamp(16px, 2.5vw, 24px);
  padding-top: var(--app-page-pad-y-start);
  padding-bottom: clamp(20px, 3vw, 32px);
  padding-bottom: var(--app-page-pad-y-end);
  padding-left: max(clamp(16px, 3vw, 28px), env(safe-area-inset-left, 0px));
  padding-left: max(var(--app-page-pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 3vw, 28px), env(safe-area-inset-right, 0px));
  padding-right: max(var(--app-page-pad-x), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  /* Allow flex ancestors to shrink so rows/cards don’t force horizontal scroll */
  min-width: 0;
}

/* Knowledge base: wider reading column; matches transparent KB chrome */
.app-page-inner:has(.kb-page-root) {
  max-width: min(1680px, 100%);
}

/* Nested Ant Layout column (beside sider): must shrink within viewport */
.layout .ant-layout > .ant-layout {
  min-width: 0;
  max-width: 100%;
}

/* Grid columns and card bodies: charts/tables can shrink or scroll inside */
.app-page-inner .ant-col {
  min-width: 0;
}

.app-page-inner .ant-card .ant-card-body {
  min-width: 0;
}

/* Selects, pickers, and numbers should never exceed the content column */
.app-page-inner .ant-select,
.app-page-inner .ant-picker,
.app-page-inner .ant-input-number,
.app-page-inner .ant-cascader-picker {
  max-width: 100%;
}

.app-page-inner .ant-select .ant-select-selector {
  max-width: 100%;
}

.app-page-inner .ant-input-affix-wrapper,
.app-page-inner .ant-input-search {
  max-width: 100%;
}

/* Horizontal Space rows: allow wrapping when many controls (toolbar patterns) */
.app-page-inner .ant-space.ant-space-horizontal {
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 8px;
  row-gap: var(--space-2, 8px);
}

/* Tabs: keep nav within the content column */
.app-page-inner .ant-tabs .ant-tabs-nav-wrap,
.app-page-inner .ant-tabs .ant-tabs-nav {
  min-width: 0;
  max-width: 100%;
}

/* Segmented controls (security consoles, filters): scroll when many options */
.app-page-inner .ant-segmented {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Radio button groups: stay in column on small screens (desktop keeps single-row chrome) */
@media (max-width: 575px) {
  .app-page-inner .ant-radio-group.ant-radio-group-outline,
  .app-page-inner .ant-radio-group.ant-radio-group-solid {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    row-gap: 8px;
  }
}

/* Descriptions / long values */
.app-page-inner .ant-descriptions-item-content,
.app-page-inner .ant-descriptions-item-label {
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Alerts & messages in main content */
.app-page-inner .ant-alert-message,
.app-page-inner .ant-alert-description {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Top navigation strip: scroll when many items instead of overlapping the brand/actions */
.app-shell-header__topnav-scroll {
  flex: 1 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (max-width: 991px) {
  :root {
    --app-page-pad-x: clamp(14px, 4vw, 22px);
    --app-page-pad-y-start: clamp(12px, 2.5vw, 20px);
    --app-page-pad-y-end: clamp(16px, 3vw, 28px);
  }
}

@media (max-width: 480px) {
  :root {
    --app-page-pad-x: clamp(12px, 4.5vw, 18px);
    --app-page-pad-y-start: 12px;
    --app-page-pad-y-end: 16px;
  }
}

@media (max-width: 359px) {
  :root {
    --app-page-pad-x: 10px;
    --app-page-pad-y-start: 10px;
    --app-page-pad-y-end: 12px;
    --app-stack-gap: 12px;
  }
}

@media (min-width: 1536px) {
  :root {
    --app-content-max-width: 1420px;
  }
}

/* Tables, pagination, media: avoid layout overflow across console pages */
.app-page-inner .ant-table-wrapper {
  min-width: 0;
}

.app-page-inner .ant-table {
  font-size: clamp(0.75rem, 0.35vw + 0.68rem, 0.875rem);
}

.app-page-inner .ant-pagination {
  flex-wrap: wrap;
  row-gap: 8px;
  row-gap: var(--space-2, 8px);
  justify-content: flex-end;
}

@media (max-width: 575px) {
  .app-page-inner .ant-pagination {
    justify-content: center;
  }
}

/* Portaled to body — not under .app-page-inner */
.ant-modal-root .ant-modal-wrap {
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}

@media (max-width: 576px) {
  .ant-modal-root .ant-modal {
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }
}

/* Full-screen modals on very small phones */
@media (max-width: 479px) {
  .ant-modal-root .ant-modal-wrap {
    padding: 0;
  }
  .ant-modal-root .ant-modal {
    max-width: 100vw !important;
    margin: 0 !important;
    top: 0;
    padding: 0;
  }
}

.app-page-inner img,
.app-page-inner video,
.app-page-inner canvas {
  max-width: 100%;
  height: auto;
}

.app-page-inner .ant-form-item {
  max-width: 100%;
}

/* Card title row: title + extra (tabs, actions) wrap instead of clipping on narrow widths */
.app-page-inner .ant-card-head-wrapper {
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 8px;
  row-gap: var(--space-2, 8px);
}

.app-page-inner .ant-card .ant-card-extra {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  gap: var(--space-2, 8px);
}

/* Horizontal steppers: scroll on small screens instead of squashing labels */
@media (max-width: 575px) {
  .app-page-inner .ant-steps.ant-steps-horizontal {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    padding-bottom: var(--space-2, 8px);
    margin-bottom: calc(-1 * 8px);
    margin-bottom: calc(-1 * var(--space-2, 8px));
    scrollbar-width: thin;
  }

  .app-page-inner .ant-steps.ant-steps-horizontal .ant-steps-item {
    flex: 0 0 auto;
    min-width: 72px;
  }
}

/* Drawers: respect viewport + safe area on phones */
@media (max-width: 480px) {
  .ant-drawer-content-wrapper {
    max-width: 100vw !important;
  }
}

/* Statistic blocks in dense grids */
.app-page-inner .ant-statistic .ant-statistic-content {
  min-width: 0;
  word-break: break-word;
}

/* App chrome */
.app-shell-header {
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  box-sizing: border-box;
  box-shadow: 0 1px 0 #2A2A2A, 0 2px 12px rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 0 var(--color-border, #2A2A2A), 0 2px 12px rgba(0, 0, 0, 0.18);
  overflow: visible;
}

.app-shell-header__actions {
  flex-shrink: 0;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.app-shell-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 4px 16px 4px 4px;
  box-sizing: border-box;
}

.app-shell-header__logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 4px 2px;
  border-radius: 5px;
  border-radius: var(--radius-sm, 5px);
}

.app-shell-header__brand-row {
  flex-shrink: 0;
}

.app-shell-header__logo {
  height: 32px;
  width: auto;
  max-width: none;
  display: block;
}

/* Theme-aware logo switching */
[data-theme="dark"] .logo-light-mode {
  display: none;
}
[data-theme="light"] .logo-dark-mode {
  display: none;
}
[data-theme="dark"] .logo-dark-mode,
[data-theme="light"] .logo-light-mode {
  display: block;
}

.app-shell-header__menu-btn.ant-btn {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 480px) {
  .app-shell-header__logo {
    height: 28px;
  }
}

.app-shell-header__menu-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px !important;
  min-height: 44px;
  padding: 0 8px !important;
  flex-shrink: 0;
}

.app-shell-header__menu-btn img {
  display: block;
  opacity: 0.92;
}

/* Legacy layout + MainLayout mobile overlay: visible dimmer when open */
.ninjadash-shade.show {
  background: rgb(0 0 0 / 0.48);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .ninjadash-shade.show {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Mobile nav: dim content behind drawer; sits under header (999) and sider (987) */
.app-shell-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 986;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  background: rgb(0 0 0 / 0.48);
  -webkit-tap-highlight-color: transparent;
  animation: app-shell-backdrop-in 0.2s ease forwards;
}

@keyframes app-shell-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell-nav-backdrop {
    animation: none;
  }
}

.demo-banner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  max-width: min(960px, 100%);
  padding: 6px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: #5c4a00;
  background: #fff9e6;
  border: 1px solid #f0d78c;
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.04));
}

.demo-banner--inline {
  /* Must not shrink to zero inside the header actions row (AuthInfo is flex-shrink: 0). */
  flex-shrink: 0;
  flex-wrap: nowrap;
  max-width: min(520px, 42vw);
  padding: 4px 10px;
  font-size: 12px;
  gap: 6px 14px;
}

.demo-banner--inline .demo-banner__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-banner--inline .demo-banner__detail {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.demo-banner--inline .demo-banner__dismiss {
  margin-left: 0;
  min-width: 28px;
  min-height: 28px;
}

@media (max-width: 640px) {
  .demo-banner--inline {
    max-width: 100%;
    flex-wrap: nowrap;
    padding: 4px 8px;
    font-size: 11px;
    gap: 4px;
  }

  .demo-banner--inline .demo-banner__detail {
    display: none;
  }

  .demo-banner--inline .demo-banner__dismiss {
    min-width: 32px;
    min-height: 32px;
    font-size: 16px;
  }

  .demo-banner--inline .demo-banner__icon {
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .demo-banner--inline {
    padding: 3px 6px;
    gap: 3px;
    font-size: 10px;
    border-radius: 5px;
    border-radius: var(--radius-sm, 5px);
  }
}

.demo-banner {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-paper));
  border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
}

.demo-banner__icon {
  color: #d4a017;
  color: var(--color-warning, #d4a017);
  font-size: 15px;
  flex-shrink: 0;
}

.demo-banner__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.demo-banner__detail {
  font-size: 12px;
  color: #7a6520;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-secondary);
}

.demo-banner__dismiss {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: none;
  border-radius: 5px;
  border-radius: var(--radius-sm, 5px);
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.demo-banner__dismiss:hover {
  opacity: 1;
  background: rgb(0 0 0 / 0.06);
  background: rgb(255 255 255 / 0.08);
}


/* Wide tables: scroll inside content column without page-level horizontal drift */
.app-page-inner .ant-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.app-page-inner .ant-table {
  min-width: 0;
}

@media (max-width: 767px) {
  .app-page-inner .ant-card .ant-card-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .app-page-inner .ant-card .ant-card-extra {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 575px) {
  .app-page-inner .ant-card .ant-card-body {
    padding: 16px;
  }

  .app-page-inner .ant-card-small .ant-card-body {
    padding: 12px;
  }

  .app-page-inner .ant-page-header-heading {
    align-items: flex-start;
  }
}

/* ============================================
   ROUTE-LEVEL LOADING (Suspense fallbacks)
   ============================================ */
.app-route-suspense-fallback {
  width: 100%;
  max-width: 1320px;
  max-width: var(--app-content-max-width);
  margin: 0 auto;
  padding-top: clamp(16px, 2.5vw, 24px);
  padding-top: var(--app-page-pad-y-start);
  padding-bottom: clamp(20px, 3vw, 32px);
  padding-bottom: var(--app-page-pad-y-end);
  padding-left: max(clamp(16px, 3vw, 28px), env(safe-area-inset-left, 0px));
  padding-left: max(var(--app-page-pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 3vw, 28px), env(safe-area-inset-right, 0px));
  padding-right: max(var(--app-page-pad-x), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  animation: fadeSlideIn 0.2s ease forwards;
}

.app-route-suspense-fallback .ant-skeleton {
  width: 100%;
}

/* ============================================
   THEME UTILITY CLASSES
   ============================================ */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-disabled { color: var(--color-text-disabled); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }
.text-accent { color: var(--color-primary); }
.bg-background { background-color: var(--color-background); }
.bg-paper { background-color: var(--color-paper); }
.bg-elevated { background-color: var(--color-elevated); }
.bg-surface { background-color: var(--color-surface); }
.border-base { border-color: var(--color-border); }
.border-hover { border-color: var(--color-border-hover); }

/* Frosted overlay surfaces (modals, drawers, toolbars) */
.theme-glass-surface {
  background: color-mix(in srgb, var(--color-paper) 94%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, var(--color-primary));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow-md), var(--shadow-card-inner, inset 0 1px 0 rgba(255, 255, 255, 0.05));
}

/* Page header band — optional wrapper for emphasis */
.theme-page-hero-band {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-elevated)) 0%,
    color-mix(in srgb, var(--color-info) 5%, var(--color-paper)) 100%
  );
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow-sm), var(--shadow-card-inner, inset 0 1px 0 rgba(255, 255, 255, 0.04));
}

/* Truncation helpers */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gap utilities */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ============================================
   SMOOTH PAGE TRANSITIONS
   ============================================ */
.page-enter {
  opacity: 0;
  transform: translateY(8px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-exit {
  opacity: 1;
  transform: translateY(0);
}

.page-exit-active {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}

.fade-slide-in {
  animation: fadeSlideIn 0.35s ease forwards;
}

@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered children animation */
.stagger-children > * {
  opacity: 0;
  animation: fadeSlideIn 0.35s ease forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.04s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.08s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.12s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.16s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.24s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.28s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.32s; }

/* Breadcrumbs (page headers) — align with theme tokens */
.ant-breadcrumb {
  font-size: 13px;
  letter-spacing: 0.01em;
}

.ant-breadcrumb a {
  color: var(--color-text-secondary) !important;
  transition: color 0.2s ease;
  font-weight: 500;
}

.ant-breadcrumb a:hover {
  color: var(--color-primary) !important;
}

.ant-breadcrumb li:last-child .ant-breadcrumb-link {
  color: #6B6B6B;
  color: var(--color-text-disabled, #6B6B6B);
  font-weight: 400;
}

.ant-breadcrumb .ant-breadcrumb-separator {
  color: #6B6B6B;
  color: var(--color-text-disabled, #6B6B6B);
  opacity: 0.6;
}

/* Layout-level URL path breadcrumb (above page content) */
.app-path-breadcrumb {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2a2a2a;
  border-bottom: 1px solid var(--color-border, #2a2a2a);
  animation: fadeSlideIn 0.25s ease forwards;
  min-width: 0;
}

.app-path-breadcrumb .ant-breadcrumb {
  margin: 0;
}

.app-path-breadcrumb .ant-breadcrumb ol {
  flex-wrap: wrap;
  row-gap: 6px;
  min-width: 0;
}

@media (max-width: 991px) {
  .app-path-breadcrumb {
    margin: 0 0 12px;
    padding-bottom: 10px;
  }

  .app-path-breadcrumb .ant-breadcrumb {
    font-size: 13px;
  }

  .app-path-breadcrumb .ant-breadcrumb ol {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
    gap: 0;
  }

  .app-path-breadcrumb .ant-breadcrumb ol::-webkit-scrollbar {
    height: 4px;
  }

  .app-path-breadcrumb .ant-breadcrumb li {
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .app-path-breadcrumb {
    margin: 0 0 10px;
    padding-bottom: 8px;
  }

  .app-path-breadcrumb .ant-breadcrumb {
    font-size: 12px;
  }
}

.app-path-breadcrumb--landing {
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  margin: 0;
  padding: 10px max(24px, env(safe-area-inset-right, 0px)) 10px max(24px, env(safe-area-inset-left, 0px));
  max-width: 1320px;
  max-width: var(--app-content-max-width, 1320px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.app-path-breadcrumb--landing .ant-breadcrumb a {
  color: rgb(255 255 255 / 0.72);
}

.app-path-breadcrumb--landing .ant-breadcrumb a:hover {
  color: #E01E45;
  color: var(--color-primary, #E01E45);
}

.app-path-breadcrumb--landing .ant-breadcrumb li:last-child .ant-breadcrumb-link {
  color: rgb(255 255 255 / 0.45);
}

.app-path-breadcrumb--auth {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  justify-content: center;
  display: flex;
}

.app-path-breadcrumb--auth .ant-breadcrumb {
  font-size: 13px;
}

.app-path-breadcrumb--auth .ant-breadcrumb a {
  color: rgb(255 255 255 / 0.72);
}

.app-path-breadcrumb--auth .ant-breadcrumb a:hover {
  color: #E01E45;
  color: var(--color-primary, #E01E45);
}

.app-path-breadcrumb--auth .ant-breadcrumb li:last-child .ant-breadcrumb-link {
  color: rgb(255 255 255 / 0.45);
}

/* ============================================
   FOCUS-VISIBLE - Accessibility (skip universal * to avoid doubling Ant Design focus rings)
   ============================================ */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.15) !important;
  transition: outline-offset 0.12s ease, box-shadow 0.12s ease;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none !important;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
}

/* ============================================
   SELECTION COLOR STYLING
   ============================================ */
::selection {
  background: color-mix(in srgb, #E01E45 32%, transparent);
  background: color-mix(in srgb, var(--color-primary, #E01E45) 32%, transparent);
  color: var(--color-text-primary);
  text-shadow: none;
}

::-moz-selection {
  background: color-mix(in srgb, #E01E45 32%, transparent);
  background: color-mix(in srgb, var(--color-primary, #E01E45) 32%, transparent);
  color: var(--color-text-primary);
  text-shadow: none;
}

/* ============================================
   DROPDOWN & POPOVER IMPROVEMENTS
   ============================================ */
.ant-popover {
  animation: dropdownSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ant-popover-inner {
  border-radius: 12px !important;
  border-radius: var(--radius-lg, 12px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
              0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid #2A2A2A !important;
  border: 1px solid var(--color-border, #2A2A2A) !important;
  overflow: hidden;
}

.ant-dropdown {
  animation: dropdownSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ant-dropdown-menu {
  border-radius: 12px !important;
  border-radius: var(--radius-lg, 12px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
              0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid #2A2A2A !important;
  border: 1px solid var(--color-border, #2A2A2A) !important;
  padding: 6px !important;
  background: var(--color-paper) !important;
}

.ant-dropdown-menu-item {
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  margin: 2px 0 !important;
}

.ant-dropdown-menu-item:hover {
  background: rgba(224, 30, 69, 0.08) !important;
  background: rgba(var(--color-primary-rgb, 224, 30, 69), 0.08) !important;
}

/* Notification dropdown: "See all" link */
.ninjadash-top-dropdown .btn-seeAll {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #E01E45;
  color: var(--color-primary, #E01E45);
  border-top: 1px solid #2A2A2A;
  border-top: 1px solid var(--color-border, #2A2A2A);
  margin-top: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.ninjadash-top-dropdown .btn-seeAll:hover {
  background: rgba(224, 30, 69, 0.06);
  background: rgba(var(--color-primary-rgb, 224, 30, 69), 0.06);
  color: #E01E45;
  color: var(--color-primary, #E01E45);
}

/* Header notifications/support popovers: fix overflow and shape consistency */
.ninjadash-ui-popover--activity {
  max-width: calc(100vw - 24px);
}

.ninjadash-ui-popover--activity .ant-popover-inner-content {
  overflow: hidden;
}

.ninjadash-ui-popover--activity .ninjadash-top-dropdown {
  width: min(360px, calc(100vw - 24px));
  max-width: 100%;
}

.ninjadash-ui-popover--activity .ninjadash-top-dropdown__title {
  align-items: center;
  gap: 8px;
}

.ninjadash-ui-popover--activity .ninjadash-top-dropdown__title .title-text {
  min-width: 0;
}

.ninjadash-ui-popover--activity .ninjadash-top-dropdown__state {
  margin: 12px 10px;
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px dashed #2A2A2A;
  border: 1px dashed var(--color-border, #2A2A2A);
  color: #B0B0B0;
  color: var(--color-text-secondary, #B0B0B0);
  font-size: 12px;
  text-align: center;
}

.ninjadash-ui-popover--activity .ninjadash-top-dropdown__item {
  min-width: 0;
}

.ninjadash-ui-popover--activity .notification-item__content,
.ninjadash-ui-popover--activity .support-message-item__content {
  min-width: 0;
  width: 100%;
}

.ninjadash-ui-popover--activity .notification-item__title,
.ninjadash-ui-popover--activity .notification-item__description,
.ninjadash-ui-popover--activity .support-message-item__sender,
.ninjadash-ui-popover--activity .support-message-item__preview {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Notification dropdown title */
.ninjadash-top-dropdown__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid #2A2A2A;
  border-bottom: 1px solid var(--color-border, #2A2A2A);
  font-size: 15px;
  font-weight: 600;
}

/* Notification list items */
.ninjadash-top-dropdown__nav.notification-list li {
  border-radius: 8px;
  transition: background 0.2s ease;
  margin: 2px 4px;
}

.ninjadash-top-dropdown__nav.notification-list li:hover {
  background: rgba(224, 30, 69, 0.05);
  background: rgba(var(--color-primary-rgb, 224, 30, 69), 0.05);
}

.ninjadash-top-dropdown__nav.notification-list li a {
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
}

/* ============================================
   MOBILE RESPONSIVENESS IMPROVEMENTS
   ============================================ */
@media (max-width: 767px) {
  .ninjadash-nav-actions__notification,
  .ninjadash-nav-actions__message,
  .ninjadash-nav-actions__settings {
    margin: 0 1px !important;
  }

  .ninjadash-nav-actions__notification > span,
  .ninjadash-nav-actions__notification > a,
  .ninjadash-nav-actions__notification > div,
  .ninjadash-nav-actions__message > span,
  .ninjadash-nav-actions__message > a,
  .ninjadash-nav-actions__message > div {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
  }

  .ant-layout-sider {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

@media (max-width: 480px) {
  .ninjadash-nav-actions__nav-author a.ant-dropdown-trigger {
    padding: 4px 8px 4px 4px !important;
    gap: 6px !important;
  }

  .ninjadash-nav-actions__nav-author .ninjadash-nav-actions__author--name {
    display: none !important;
  }
}

/* ============================================
   SEARCH BAR POLISH
   ============================================ */
.ninjadash-searchbar .ant-input {
  background: #1A1A1A !important;
  background: var(--color-elevated, #1A1A1A) !important;
  border: 1px solid #2A2A2A !important;
  border: 1px solid var(--color-border, #2A2A2A) !important;
  border-radius: 8px !important;
  color: var(--color-text-primary) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  height: 36px;
  padding: 4px 12px !important;
}

.ninjadash-searchbar .ant-input:focus,
.ninjadash-searchbar .ant-input:hover {
  border-color: rgba(224, 30, 69, 0.45) !important;
  border-color: rgba(var(--color-primary-rgb, 224, 30, 69), 0.45) !important;
  box-shadow: 0 0 0 3px rgba(224, 30, 69, 0.1) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 224, 30, 69), 0.1) !important;
  background: #1A1A1A !important;
  background: var(--color-elevated, #1A1A1A) !important;
}

.ninjadash-searchbar .ant-input::placeholder {
  color: #6B6B6B !important;
  color: var(--color-text-disabled, #6B6B6B) !important;
  font-size: 13px;
}

/* ============================================
   BADGE ACCENT COLOR
   ============================================ */
.ant-badge-dot {
  background: #E01E45 !important;
  background: var(--color-primary, #E01E45) !important;
  box-shadow: 0 0 0 2px #0E0E0E,
              0 0 6px rgba(224, 30, 69, 0.5) !important;
  box-shadow: 0 0 0 2px var(--color-paper, #0E0E0E),
              0 0 6px rgba(var(--color-primary-rgb, 224, 30, 69), 0.5) !important;
}

.ant-badge-count {
  box-shadow: 0 0 0 2px #0E0E0E !important;
  box-shadow: 0 0 0 2px var(--color-paper, #0E0E0E) !important;
}

.badge-success .ant-badge-count {
  background: #E01E45 !important;
  background: var(--color-primary, #E01E45) !important;
  box-shadow: 0 0 0 2px #0E0E0E,
              0 0 8px rgba(224, 30, 69, 0.3) !important;
  box-shadow: 0 0 0 2px var(--color-paper, #0E0E0E),
              0 0 8px rgba(var(--color-primary-rgb, 224, 30, 69), 0.3) !important;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   CUSTOM SCROLLBARS (Firefox)
   ============================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* ============================================
   SMOOTH SCROLL (respects reduced motion)
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================================
   IMAGE DEFAULTS
   ============================================ */
img, picture, video, canvas, svg {
  max-width: 100%;
  display: block;
}

/* Reset for inline images/svgs that should remain inline */
span > svg,
button > svg,
a > svg,
span > img,
button > img,
a > img,
.ant-menu-item svg,
.ant-menu-submenu-title svg,
.ant-btn svg,
.ant-badge img,
.ant-avatar img {
  display: inline-block;
  max-width: none;
}

/* ============================================
   TABLE IMPROVEMENTS
   ============================================ */
.ant-table-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ant-table-thead > tr > th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.ant-table-tbody > tr {
  transition: background-color var(--duration-fast) ease;
}

/* ============================================
   FORM IMPROVEMENTS
   ============================================ */
.ant-form-item-label > label {
  font-weight: 500;
  color: var(--color-text-primary);
}

.ant-form-item-explain-error {
  font-size: 12px;
  margin-top: 4px;
}

/* Consistent checkbox and radio sizing */
.ant-checkbox-wrapper,
.ant-radio-wrapper {
  color: var(--color-text-primary);
}

/* ============================================
   PAGINATION DARK MODE FIX
   ============================================ */
.ant-pagination .ant-pagination-item {
  background: var(--color-elevated) !important;
  border-color: var(--color-border) !important;
}

.ant-pagination .ant-pagination-item a {
  color: var(--color-text-primary) !important;
}

.ant-pagination .ant-pagination-item-active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.ant-pagination .ant-pagination-item-active a {
  color: #fff !important;
}

.ant-pagination .ant-pagination-prev,
.ant-pagination .ant-pagination-next,
.ant-pagination .ant-pagination-jump-prev,
.ant-pagination .ant-pagination-jump-next {
  background: var(--color-elevated) !important;
  border: 1px solid var(--color-border) !important;
}

.ant-pagination .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination .ant-pagination-next .ant-pagination-item-link {
  color: var(--color-text-secondary) !important;
  background: transparent !important;
  border: none !important;
}

.ant-pagination .ant-pagination-options .ant-select-selector {
  background: var(--color-elevated) !important;
  border-color: var(--color-border) !important;
}

.ant-pagination .ant-pagination-options .ant-select-selection-item {
  color: var(--color-text-primary) !important;
}

/* ============================================
   CONSOLE MOBILE EXPERIENCE ENHANCEMENTS
   Touch-friendly targets, better density, scroll
   containment, and responsive layout fixes.
   ============================================ */

/* -- Touch target minimums (44px per WCAG, 48px ideal) -- */
@media (pointer: coarse) {
  .app-page-inner .ant-btn {
    min-height: 40px;
  }

  .app-page-inner .ant-btn-sm {
    min-height: 36px;
  }

  .app-page-inner .ant-select-selector {
    min-height: 40px !important;
  }

  .app-page-inner .ant-input {
    min-height: 40px;
  }

  .app-page-inner .ant-segmented-item {
    min-height: 36px;
  }

  .app-page-inner .ant-tabs-tab {
    padding: 10px 14px !important;
  }

  .app-page-inner .ant-switch {
    min-width: 48px;
  }

  .app-page-inner .ant-checkbox-wrapper,
  .app-page-inner .ant-radio-wrapper {
    padding: 4px 0;
  }
}

/* -- Stat cards: tighter on mobile -- */
@media (max-width: 767px) {
  .app-page-inner .ant-statistic-title {
    font-size: 12px;
    margin-bottom: 2px;
  }

  .app-page-inner .ant-statistic-content {
    font-size: 20px;
  }

  .app-page-inner .ant-statistic-content-prefix {
    font-size: 16px;
    -webkit-margin-end: 4px;
            margin-inline-end: 4px;
  }

  .app-page-inner .ant-statistic-content-suffix {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .app-page-inner .ant-statistic-title {
    font-size: 11px;
  }

  .app-page-inner .ant-statistic-content {
    font-size: 18px;
  }
}

/* -- Alerts: compact on phones -- */
@media (max-width: 575px) {
  .app-page-inner .ant-alert {
    padding: 8px 12px;
    font-size: 13px;
  }

  .app-page-inner .ant-alert-icon {
    font-size: 16px;
    -webkit-margin-end: 8px;
            margin-inline-end: 8px;
  }

  .app-page-inner .ant-alert-message {
    font-size: 13px;
  }

  .app-page-inner .ant-alert-description {
    font-size: 12px;
  }
}

/* -- Tabs: scrollable on mobile instead of wrapping badly -- */
@media (max-width: 767px) {
  .app-page-inner .ant-tabs > .ant-tabs-nav {
    margin-bottom: 12px;
  }

  .app-page-inner .ant-tabs-tab {
    font-size: 13px;
    padding: 8px 12px !important;
  }

  .app-page-inner .ant-tabs-nav-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .app-page-inner .ant-tabs-nav-wrap::-webkit-scrollbar {
    display: none;
  }

  .app-page-inner .ant-tabs-nav-list {
    flex-wrap: nowrap;
  }
}

/* -- Space vertical gaps: tighter on phones -- */
@media (max-width: 575px) {
  .app-page-inner .ant-space-vertical {
    gap: 12px !important;
  }

  .app-page-inner .ant-space-vertical.ant-space-lg {
    gap: 16px !important;
  }
}

/* -- Tags: readable on small screens -- */
@media (max-width: 480px) {
  .app-page-inner .ant-tag {
    font-size: 11px;
    padding: 2px 6px;
    line-height: 1.4;
  }
}

/* -- Table mobile: sticky first column hint + compact cells -- */
@media (max-width: 767px) {
  .app-page-inner .ant-table-thead > tr > th,
  .app-page-inner .ant-table-tbody > tr > td {
    padding: 8px 10px !important;
    font-size: 12px;
  }

  .app-page-inner .ant-table-thead > tr > th {
    font-size: 11px;
  }

  .app-page-inner .ant-table-wrapper .ant-table-pagination {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
  }

  .app-page-inner .ant-table-wrapper .ant-pagination-total-text {
    width: 100%;
    text-align: center;
    font-size: 12px;
  }

  .app-page-inner .ant-table-wrapper .ant-pagination-options {
    display: none;
  }
}

/* -- Modals: full-width on phones with safe area -- */
@media (max-width: 575px) {
  .ant-modal-root .ant-modal {
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    top: 8px !important;
  }

  .ant-modal-root .ant-modal .ant-modal-body {
    padding: 16px !important;
    max-height: calc(80dvh - 100px);
    overflow-y: auto;
  }

  .ant-modal-root .ant-modal .ant-modal-header {
    padding: 14px 16px !important;
  }

  .ant-modal-root .ant-modal .ant-modal-footer {
    padding: 10px 16px !important;
  }

  .ant-modal-root .ant-modal .ant-modal-title {
    font-size: 15px;
  }
}

/* -- Drawer: bottom sheet style on phones -- */
@media (max-width: 575px) {
  .ant-drawer-right .ant-drawer-content-wrapper {
    max-width: 100vw !important;
    width: 100vw !important;
  }
}

/* -- Progress bars: compact on small screens -- */
@media (max-width: 575px) {
  .app-page-inner .ant-progress-text {
    font-size: 11px;
  }
}

/* -- Form items: stacked labels on mobile -- */
@media (max-width: 575px) {
  .app-page-inner .ant-form-item {
    margin-bottom: 16px;
  }

  .app-page-inner .ant-form-item-label {
    padding-bottom: 4px !important;
  }

  .app-page-inner .ant-form-horizontal .ant-form-item-label {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: start !important;
  }

  .app-page-inner .ant-form-horizontal .ant-form-item-control {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* -- Tooltip: avoid clipping near edges -- */
@media (max-width: 767px) {
  .ant-tooltip {
    max-width: calc(100vw - 32px);
  }

  .ant-tooltip-inner {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* -- Notification dropdowns: safer on mobile -- */
@media (max-width: 480px) {
  .ninjadash-top-dropdown {
    width: calc(100vw - 24px) !important;
    max-width: 360px;
  }

  .ninjadash-ui-popover--activity {
    max-width: calc(100vw - 16px);
  }

  .ninjadash-ui-popover--activity .ninjadash-top-dropdown {
    width: calc(100vw - 16px);
  }

  .ninjadash-top-dropdown__title {
    padding: 12px 14px 10px !important;
    font-size: 14px !important;
  }

  .ninjadash-top-dropdown__nav.notification-list li a {
    padding: 8px 10px !important;
  }
}

/* -- Empty states: less vertical padding on phones -- */
@media (max-width: 575px) {
  .app-page-inner .ant-empty {
    margin: 24px 0;
  }

  .app-page-inner .ant-empty-image {
    height: 48px;
  }
}

/* -- Scroll containment: prevent body scroll when sidebar open -- */
body.console-sidebar-open {
  overflow: hidden;
  touch-action: none;
}

/* -- Row gutter normalization on phones -- */
@media (max-width: 480px) {
  .app-page-inner > .ant-row,
  .app-page-inner .ant-card-body > .ant-row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  .app-page-inner > .ant-row > .ant-col,
  .app-page-inner .ant-card-body > .ant-row > .ant-col {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* -- Card hover: disable lift on touch (avoids sticky hover on tap) -- */
@media (hover: none) {
  .ant-card:hover {
    transform: none !important;
  }
}

/* -- Page headers: stack title + extra on mobile -- */
@media (max-width: 575px) {
  .app-page-inner .ant-page-header {
    padding: 12px 0;
  }

  .app-page-inner .ant-page-header-heading {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .app-page-inner .ant-page-header-heading-extra {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }

  .app-page-inner .ant-page-header-heading-title {
    font-size: 16px;
  }

  .app-page-inner .ant-page-header-heading-sub-title {
    font-size: 12px;
  }
}

/* -- Action/toolbar rows: stack on mobile -- */
@media (max-width: 575px) {
  .app-page-inner .ant-space.ant-space-horizontal {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .app-page-inner .ant-space.ant-space-horizontal > .ant-space-item {
    width: 100%;
  }

  .app-page-inner .ant-space.ant-space-horizontal > .ant-space-item .ant-input-search,
  .app-page-inner .ant-space.ant-space-horizontal > .ant-space-item .ant-select {
    width: 100% !important;
  }
}

/* -- Table mobile scroll indicator shadow -- */
@media (max-width: 767px) {
  .app-page-inner .ant-table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(0,0,0,0.15), transparent);
    opacity: 0.6;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    z-index: 1;
  }

  .app-page-inner .ant-table-wrapper {
    position: relative;
  }
}

/* -- Descriptions list: vertical layout on phones -- */
@media (max-width: 575px) {
  .app-page-inner .ant-descriptions .ant-descriptions-row {
    display: flex;
    flex-direction: column;
  }

  .app-page-inner .ant-descriptions .ant-descriptions-item {
    padding-bottom: 8px;
  }

  .app-page-inner .ant-descriptions .ant-descriptions-item-label {
    font-size: 11px;
  }

  .app-page-inner .ant-descriptions .ant-descriptions-item-content {
    font-size: 13px;
  }
}

/* -- Timeline: compact on mobile -- */
@media (max-width: 575px) {
  .app-page-inner .ant-timeline .ant-timeline-item-content {
    font-size: 13px;
  }

  .app-page-inner .ant-timeline .ant-timeline-item {
    padding-bottom: 16px;
  }
}

/* -- Breadcrumb bar: less margin on small phones -- */
@media (max-width: 380px) {
  .app-path-breadcrumb {
    margin: 0 0 8px;
    padding-bottom: 6px;
  }

  .app-path-breadcrumb .ant-breadcrumb {
    font-size: 11px;
  }
}

/* -- Ultra-narrow phones (≤359px): tighter everything -- */
@media (max-width: 359px) {
  .app-page-inner .ant-btn {
    padding-inline: 8px;
    font-size: 12px;
  }

  .app-page-inner .ant-card .ant-card-body {
    padding: 10px;
  }

  .app-page-inner .ant-card .ant-card-head {
    padding: 8px 10px;
  }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
}

/* ============================================
   MOBILE CONSOLE IMPROVEMENTS
   ============================================ */

/* Touch-friendly targets on touch devices */
@media (hover: none) and (pointer: coarse) {
  .app-page-inner .ant-btn {
    min-height: 40px;
    min-width: 40px;
  }

  .app-page-inner .ant-select-selector,
  .app-page-inner .ant-input,
  .app-page-inner .ant-input-affix-wrapper,
  .app-page-inner .ant-picker {
    min-height: 40px !important;
  }
}

/* Tables: better mobile scroll and tighter cells */
@media (max-width: 767px) {
  .app-page-inner .ant-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-page-inner .ant-table-thead > tr > th,
  .app-page-inner .ant-table-tbody > tr > td {
    padding: 10px 8px !important;
    font-size: 13px;
  }

  /* Stack filter bars on phones */
  .app-page-inner .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .app-page-inner .filter-bar > .ant-select,
  .app-page-inner .filter-bar > .ant-input,
  .app-page-inner .filter-bar > .ant-picker,
  .app-page-inner .filter-bar > .ant-input-search {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Modal body scroll on phones */
  .ant-modal-body {
    max-height: calc(100dvh - 160px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Very small phones: ultra-compact tables and tabs */
@media (max-width: 480px) {
  .app-page-inner .ant-table-thead > tr > th,
  .app-page-inner .ant-table-tbody > tr > td {
    padding: 8px 6px !important;
    font-size: 12px;
  }

  .app-page-inner .ant-card-extra .ant-btn {
    padding: 4px 8px;
    font-size: 12px;
  }

  /* Tabs: scrollable on small phones */
  .app-page-inner .ant-tabs-nav-list {
    flex-wrap: nowrap;
  }

  .app-page-inner .ant-tabs-nav-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .app-page-inner .ant-tabs-tab {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

/* ============================================
   ENHANCED MOBILE EXPERIENCE
   ============================================ */

/* --- Mobile-friendly tabs with horizontal scroll --- */
@media (max-width: 767px) {
  .app-page-inner .ant-tabs-nav {
    margin-bottom: 12px !important;
  }

  .app-page-inner .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .app-page-inner .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap::-webkit-scrollbar {
    display: none;
  }
}

/* --- Better Ant Descriptions on mobile --- */
@media (max-width: 575px) {
  .ant-descriptions .ant-descriptions-row {
    display: flex;
    flex-direction: column;
  }

  .ant-descriptions .ant-descriptions-item {
    padding-bottom: 12px !important;
  }

  .ant-descriptions .ant-descriptions-item-label {
    font-size: 12px;
    color: var(--color-text-secondary);
  }

  .ant-descriptions .ant-descriptions-item-content {
    font-size: 14px;
  }
}

/* --- Mobile timeline improvements --- */
@media (max-width: 575px) {
  .ant-timeline .ant-timeline-item-content {
    max-width: calc(100vw - 80px);
    word-break: break-word;
  }

  .cyber-timeline__item {
    padding-left: 24px;
    padding-bottom: 16px;
  }
}

/* --- Bottom safe area for fixed/sticky footers on iOS --- */
@media (max-width: 767px) {
  .app-page-inner {
    padding-bottom: max(clamp(20px, 3vw, 32px), env(safe-area-inset-bottom, 0px));
    padding-bottom: max(var(--app-page-pad-y-end), env(safe-area-inset-bottom, 0px));
  }
}

/* --- Prevent content overflow on mobile --- */
@media (max-width: 767px) {
  .app-page-inner pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
  }

  .app-page-inner .ant-typography {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Ensure long URLs and code snippets wrap */
  .app-page-inner code:not(pre code) {
    word-break: break-all;
  }
}

/* --- Mobile-optimized stat cards --- */
@media (max-width: 575px) {
  .app-page-inner .ant-statistic-title {
    font-size: 12px;
    margin-bottom: 4px !important;
  }

  .app-page-inner .ant-statistic-content {
    font-size: 20px !important;
  }

  .app-page-inner .ant-statistic-content-prefix,
  .app-page-inner .ant-statistic-content-suffix {
    font-size: 14px !important;
  }
}

/* --- Improved scroll momentum on mobile --- */
@media (pointer: coarse) {
  .ant-layout-content,
  .app-page-inner {
    -webkit-overflow-scrolling: touch;
  }

  /* Overscroll behavior to prevent pull-to-refresh interfering with app scrolling */
  .ant-layout-content {
    overscroll-behavior-y: contain;
  }
}

/* --- Focus ring adjustments for mobile --- */
@media (pointer: coarse) {
  /* Hide focus rings on touch devices (using :focus-visible for keyboard users only) */
  .ant-btn:focus:not(:focus-visible),
  .ant-input:focus:not(:focus-visible),
  .ant-select-focused:not(.ant-select-focus-visible) .ant-select-selector {
    box-shadow: none !important;
    outline: none !important;
  }
}