/**
 * Error Boundary Styles
 * Consistent error UI across the application
 */

.error-boundary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: var(--space-8);
  background: var(--bg-surface);
}

.error-boundary-content {
  max-width: 500px;
  text-align: center;
  animation: fadeIn var(--duration-300) var(--ease-out);
}

.error-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
  color: var(--color-error-500);
  animation: bounce var(--duration-500) var(--ease-out);
}

.error-title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.error-message {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}

/* Error Details (Development) */
.error-details {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  text-align: left;
}

.error-details summary {
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  user-select: none;
  transition: color var(--duration-200) var(--ease-out);
}

.error-details summary:hover {
  color: var(--text-primary);
}

.error-details[open] summary {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}

.error-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.error-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.error-field strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.error-field code {
  padding: var(--space-1) var(--space-2);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  word-break: break-all;
}

.error-stack,
.component-stack {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-neutral-900);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-neutral-100);
  overflow-x: auto;
  white-space: pre;
}

/* Error Actions */
.error-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.error-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: all var(--duration-200) var(--ease-out);
  user-select: none;
}

.error-button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.error-button-primary {
  background: var(--interactive-primary);
  color: white;
}

.error-button-primary:hover {
  background: var(--interactive-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.error-button-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.error-button-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
}

.error-button-secondary:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-secondary);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Dark mode adjustments */
[data-theme='dark'] .error-stack,
[data-theme='dark'] .component-stack {
  background: var(--color-neutral-800);
  color: var(--color-neutral-200);
}

/* Responsive */
@media (max-width: 480px) {
  .error-boundary {
    padding: var(--space-4);
  }

  .error-boundary-content {
    max-width: 100%;
  }

  .error-actions {
    flex-direction: column;
    width: 100%;
  }

  .error-button {
    width: 100%;
  }
}

/* Print styles */
@media print {
  .error-boundary {
    background: white;
    color: black;
  }

  .error-button {
    display: none;
  }
}
/* Rich thinking bubble styling with animated dots */
.thinking-bubble {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.thinking-bubble .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-400); /* theme pink */
  /* Subtle glow: significantly reduced from previous */
  box-shadow: 0 0 2px rgba(255, 107, 157, 0.15);
  opacity: 0.85;
  animation: thinkingPulse 1.1s infinite ease-in-out;
}

.thinking-bubble .dot:nth-child(2) {
  animation-delay: 0.15s;
}

.thinking-bubble .dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes thinkingPulse {
  0%,
  80%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  40% {
    /* Reduced motion amplitude for a softer effect */
    transform: translateY(-1px) scale(1.03);
    opacity: 0.95;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .thinking-bubble .dot {
    animation: none;
    opacity: 0.8;
  }
}

/* Fallback monospace dots for screen readers or no-CSS environments */
.thinking-dots-fallback {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  font-size: 14px;
  color: var(--color-accent-400);
}
/*
 * Main CSS imports
 * Consolidates all modular CSS files
 */

/* MingCute Icons */

@font-face {
  font-family: 'MingCute';
  src:  url('/assets/MingCute-NCVp-vUS.eot?bysiq1');
  src:  url('/assets/MingCute-NCVp-vUS.eot?bysiq1#iefix') format('embedded-opentype'),
    url('/assets/MingCute-rFcD0Cew.ttf?bysiq1') format('truetype'),
    url('/assets/MingCute-CGIxwd9-.woff?bysiq1') format('woff'),
    url('/assets/MingCute-rXfE8xYi.svg?bysiq1#MingCute') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="mgc_"], [class*=" mgc_"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'MingCute' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mgc_ABS_fill:before {
  content: "\e900";
  color: #09244b;
}

.mgc_ABS_line:before {
  content: "\e901";
  color: #09244b;
}

.mgc_ad_circle_fill:before {
  content: "\e902";
  color: #09244b;
}

.mgc_ad_circle_line:before {
  content: "\e903";
  color: #09244b;
}

.mgc_ad_circle_off_fill:before {
  content: "\e904";
  color: #09244b;
}

.mgc_ad_circle_off_line:before {
  content: "\e905";
  color: #09244b;
}

.mgc_ad_rectangle_fill:before {
  content: "\e906";
  color: #09244b;
}

.mgc_ad_rectangle_line:before {
  content: "\e907";
  color: #09244b;
}

.mgc_ad_rectangle_off_fill:before {
  content: "\e908";
  color: #09244b;
}

.mgc_ad_rectangle_off_line:before {
  content: "\e909";
  color: #09244b;
}

.mgc_add_circle_fill:before {
  content: "\e90a";
  color: #09244b;
}

.mgc_add_circle_line:before {
  content: "\e90b";
  color: #09244b;
}

.mgc_add_fill:before {
  content: "\e90c";
  color: #09244b;
}

.mgc_add_line:before {
  content: "\e90d";
  color: #09244b;
}

.mgc_add_square_fill:before {
  content: "\e90e";
  color: #09244b;
}

.mgc_add_square_line:before {
  content: "\e90f";
  color: #09244b;
}

.mgc_aerial_lift_fill:before {
  content: "\e910";
  color: #09244b;
}

.mgc_aerial_lift_line:before {
  content: "\e911";
  color: #09244b;
}

.mgc_ai_fill:before {
  content: "\e912";
  color: #09244b;
}

.mgc_ai_line:before {
  content: "\e913";
  color: #09244b;
}

.mgc_aiming_2_fill:before {
  content: "\e914";
  color: #09244b;
}

.mgc_aiming_2_line:before {
  content: "\e915";
  color: #09244b;
}

.mgc_aiming_fill:before {
  content: "\e916";
  color: #09244b;
}

.mgc_aiming_line:before {
  content: "\e917";
  color: #09244b;
}

.mgc_air_balloon_fill:before {
  content: "\e918";
  color: #09244b;
}

.mgc_air_balloon_line:before {
  content: "\e919";
  color: #09244b;
}

.mgc_air_condition_fill:before {
  content: "\e91a";
  color: #09244b;
}

.mgc_air_condition_line:before {
  content: "\e91b";
  color: #09244b;
}

.mgc_air_condition_open_fill:before {
  content: "\e91c";
  color: #09244b;
}

.mgc_air_condition_open_line:before {
  content: "\e91d";
  color: #09244b;
}

.mgc_airbnb_fill:before {
  content: "\e91e";
  color: #09244b;
}

.mgc_airbnb_line:before {
  content: "\e91f";
  color: #09244b;
}

.mgc_airdrop_fill:before {
  content: "\e920";
  color: #09244b;
}

.mgc_airdrop_line:before {
  content: "\e921";
  color: #09244b;
}

.mgc_airplane_fill:before {
  content: "\e922";
  color: #09244b;
}

.mgc_airplane_line:before {
  content: "\e923";
  color: #09244b;
}

.mgc_airplay_fill:before {
  content: "\e924";
  color: #09244b;
}

.mgc_airplay_line:before {
  content: "\e925";
  color: #09244b;
}

.mgc_airpods_2_fill:before {
  content: "\e926";
  color: #09244b;
}

.mgc_airpods_2_line:before {
  content: "\e927";
  color: #09244b;
}

.mgc_airpods_fill:before {
  content: "\e928";
  color: #09244b;
}

.mgc_airpods_line:before {
  content: "\e929";
  color: #09244b;
}

.mgc_alarm_1_fill:before {
  content: "\e92a";
  color: #09244b;
}

.mgc_alarm_1_line:before {
  content: "\e92b";
  color: #09244b;
}

.mgc_alarm_2_fill:before {
  content: "\e92c";
  color: #09244b;
}

.mgc_alarm_2_line:before {
  content: "\e92d";
  color: #09244b;
}

.mgc_album_2_fill:before {
  content: "\e92e";
  color: #09244b;
}

.mgc_album_2_line:before {
  content: "\e92f";
  color: #09244b;
}

.mgc_album_fill:before {
  content: "\e930";
  color: #09244b;
}

.mgc_album_line:before {
  content: "\e931";
  color: #09244b;
}

.mgc_alert_diamond_fill:before {
  content: "\e932";
  color: #09244b;
}

.mgc_alert_diamond_line:before {
  content: "\e933";
  color: #09244b;
}

.mgc_alert_fill:before {
  content: "\e934";
  color: #09244b;
}

.mgc_alert_line:before {
  content: "\e935";
  color: #09244b;
}

.mgc_alert_octagon_fill:before {
  content: "\e936";
  color: #09244b;
}

.mgc_alert_octagon_line:before {
  content: "\e937";
  color: #09244b;
}

.mgc_align_arrow_down_fill:before {
  content: "\e938";
  color: #09244b;
}

.mgc_align_arrow_down_line:before {
  content: "\e939";
  color: #09244b;
}

.mgc_align_arrow_left_fill:before {
  content: "\e93a";
  color: #09244b;
}

.mgc_align_arrow_left_line:before {
  content: "\e93b";
  color: #09244b;
}

.mgc_align_arrow_right_fill:before {
  content: "\e93c";
  color: #09244b;
}

.mgc_align_arrow_right_line:before {
  content: "\e93d";
  color: #09244b;
}

.mgc_align_arrow_up_fill:before {
  content: "\e93e";
  color: #09244b;
}

.mgc_align_arrow_up_line:before {
  content: "\e93f";
  color: #09244b;
}

.mgc_align_bottom_fill:before {
  content: "\e940";
  color: #09244b;
}

.mgc_align_bottom_line:before {
  content: "\e941";
  color: #09244b;
}

.mgc_align_center_fill:before {
  content: "\e942";
  color: #09244b;
}

.mgc_align_center_line:before {
  content: "\e943";
  color: #09244b;
}

.mgc_align_horizontal_center_fill:before {
  content: "\e944";
  color: #09244b;
}

.mgc_align_horizontal_center_line:before {
  content: "\e945";
  color: #09244b;
}

.mgc_align_justify_fill:before {
  content: "\e946";
  color: #09244b;
}

.mgc_align_justify_line:before {
  content: "\e947";
  color: #09244b;
}

.mgc_align_left_2_fill:before {
  content: "\e948";
  color: #09244b;
}

.mgc_align_left_2_line:before {
  content: "\e949";
  color: #09244b;
}

.mgc_align_left_fill:before {
  content: "\e94a";
  color: #09244b;
}

.mgc_align_left_line:before {
  content: "\e94b";
  color: #09244b;
}

.mgc_align_right_2_fill:before {
  content: "\e94c";
  color: #09244b;
}

.mgc_align_right_2_line:before {
  content: "\e94d";
  color: #09244b;
}

.mgc_align_right_fill:before {
  content: "\e94e";
  color: #09244b;
}

.mgc_align_right_line:before {
  content: "\e94f";
  color: #09244b;
}

.mgc_align_top_fill:before {
  content: "\e950";
  color: #09244b;
}

.mgc_align_top_line:before {
  content: "\e951";
  color: #09244b;
}

.mgc_align_vertical_center_fill:before {
  content: "\e952";
  color: #09244b;
}

.mgc_align_vertical_center_line:before {
  content: "\e953";
  color: #09244b;
}

.mgc_alipay_fill:before {
  content: "\e954";
  color: #09244b;
}

.mgc_alipay_line:before {
  content: "\e955";
  color: #09244b;
}

.mgc_american_football_fill:before {
  content: "\e956";
  color: #09244b;
}

.mgc_american_football_line:before {
  content: "\e957";
  color: #09244b;
}

.mgc_anchor_fill:before {
  content: "\e958";
  color: #09244b;
}

.mgc_anchor_line:before {
  content: "\e959";
  color: #09244b;
}

.mgc_and_fill:before {
  content: "\e95a";
  color: #09244b;
}

.mgc_and_line:before {
  content: "\e95b";
  color: #09244b;
}

.mgc_android_2_fill:before {
  content: "\e95c";
  color: #09244b;
}

.mgc_android_2_line:before {
  content: "\e95d";
  color: #09244b;
}

.mgc_android_fill:before {
  content: "\e95e";
  color: #09244b;
}

.mgc_android_line:before {
  content: "\e95f";
  color: #09244b;
}

.mgc_angel_fill:before {
  content: "\e960";
  color: #09244b;
}

.mgc_angel_line:before {
  content: "\e961";
  color: #09244b;
}

.mgc_angry_fill:before {
  content: "\e962";
  color: #09244b;
}

.mgc_angry_line:before {
  content: "\e963";
  color: #09244b;
}

.mgc_anniversary_fill:before {
  content: "\e964";
  color: #09244b;
}

.mgc_anniversary_line:before {
  content: "\e965";
  color: #09244b;
}

.mgc_announcement_fill:before {
  content: "\e966";
  color: #09244b;
}

.mgc_announcement_line:before {
  content: "\e967";
  color: #09244b;
}

.mgc_anticlockwise_alt_fill:before {
  content: "\e968";
  color: #09244b;
}

.mgc_anticlockwise_alt_line:before {
  content: "\e969";
  color: #09244b;
}

.mgc_anticlockwise_fill:before {
  content: "\e96a";
  color: #09244b;
}

.mgc_anticlockwise_line:before {
  content: "\e96b";
  color: #09244b;
}

.mgc_apple_fill:before {
  content: "\e96c";
  color: #09244b;
}

.mgc_apple_intelligence_fill:before {
  content: "\e96d";
  color: #09244b;
}

.mgc_apple_intelligence_frame_fill:before {
  content: "\e96e";
  color: #09244b;
}

.mgc_apple_intelligence_frame_line:before {
  content: "\e96f";
  color: #09244b;
}

.mgc_apple_intelligence_line:before {
  content: "\e970";
  color: #09244b;
}

.mgc_apple_line:before {
  content: "\e971";
  color: #09244b;
}

.mgc_appstore_fill:before {
  content: "\e972";
  color: #09244b;
}

.mgc_appstore_line:before {
  content: "\e973";
  color: #09244b;
}

.mgc_Aquarius_fill:before {
  content: "\e974";
  color: #09244b;
}

.mgc_Aquarius_line:before {
  content: "\e975";
  color: #09244b;
}

.mgc_arc_browser_fill:before {
  content: "\e976";
  color: #09244b;
}

.mgc_arc_browser_line:before {
  content: "\e977";
  color: #09244b;
}

.mgc_archive_fill:before {
  content: "\e978";
  color: #09244b;
}

.mgc_archive_line:before {
  content: "\e979";
  color: #09244b;
}

.mgc_Aries_fill:before {
  content: "\e97a";
  color: #09244b;
}

.mgc_Aries_line:before {
  content: "\e97b";
  color: #09244b;
}

.mgc_arrow_down_circle_fill:before {
  content: "\e97c";
  color: #09244b;
}

.mgc_arrow_down_circle_line:before {
  content: "\e97d";
  color: #09244b;
}

.mgc_arrow_down_fill:before {
  content: "\e97e";
  color: #09244b;
}

.mgc_arrow_down_line:before {
  content: "\e97f";
  color: #09244b;
}

.mgc_arrow_left_circle_fill:before {
  content: "\e980";
  color: #09244b;
}

.mgc_arrow_left_circle_line:before {
  content: "\e981";
  color: #09244b;
}

.mgc_arrow_left_down_circle_fill:before {
  content: "\e982";
  color: #09244b;
}

.mgc_arrow_left_down_circle_line:before {
  content: "\e983";
  color: #09244b;
}

.mgc_arrow_left_down_fill:before {
  content: "\e984";
  color: #09244b;
}

.mgc_arrow_left_down_line:before {
  content: "\e985";
  color: #09244b;
}

.mgc_arrow_left_fill:before {
  content: "\e986";
  color: #09244b;
}

.mgc_arrow_left_line:before {
  content: "\e987";
  color: #09244b;
}

.mgc_arrow_left_up_circle_fill:before {
  content: "\e988";
  color: #09244b;
}

.mgc_arrow_left_up_circle_line:before {
  content: "\e989";
  color: #09244b;
}

.mgc_arrow_left_up_fill:before {
  content: "\e98a";
  color: #09244b;
}

.mgc_arrow_left_up_line:before {
  content: "\e98b";
  color: #09244b;
}

.mgc_arrow_right_circle_fill:before {
  content: "\e98c";
  color: #09244b;
}

.mgc_arrow_right_circle_line:before {
  content: "\e98d";
  color: #09244b;
}

.mgc_arrow_right_down_circle_fill:before {
  content: "\e98e";
  color: #09244b;
}

.mgc_arrow_right_down_circle_line:before {
  content: "\e98f";
  color: #09244b;
}

.mgc_arrow_right_down_fill:before {
  content: "\e990";
  color: #09244b;
}

.mgc_arrow_right_down_line:before {
  content: "\e991";
  color: #09244b;
}

.mgc_arrow_right_fill:before {
  content: "\e992";
  color: #09244b;
}

.mgc_arrow_right_line:before {
  content: "\e993";
  color: #09244b;
}

.mgc_arrow_right_up_circle_fill:before {
  content: "\e994";
  color: #09244b;
}

.mgc_arrow_right_up_circle_line:before {
  content: "\e995";
  color: #09244b;
}

.mgc_arrow_right_up_fill:before {
  content: "\e996";
  color: #09244b;
}

.mgc_arrow_right_up_line:before {
  content: "\e997";
  color: #09244b;
}

.mgc_arrow_to_down_fill:before {
  content: "\e998";
  color: #09244b;
}

.mgc_arrow_to_down_line:before {
  content: "\e999";
  color: #09244b;
}

.mgc_arrow_to_left_fill:before {
  content: "\e99a";
  color: #09244b;
}

.mgc_arrow_to_left_line:before {
  content: "\e99b";
  color: #09244b;
}

.mgc_arrow_to_right_fill:before {
  content: "\e99c";
  color: #09244b;
}

.mgc_arrow_to_right_line:before {
  content: "\e99d";
  color: #09244b;
}

.mgc_arrow_to_up_fill:before {
  content: "\e99e";
  color: #09244b;
}

.mgc_arrow_to_up_line:before {
  content: "\e99f";
  color: #09244b;
}

.mgc_arrow_up_circle_fill:before {
  content: "\e9a0";
  color: #09244b;
}

.mgc_arrow_up_circle_line:before {
  content: "\e9a1";
  color: #09244b;
}

.mgc_arrow_up_fill:before {
  content: "\e9a2";
  color: #09244b;
}

.mgc_arrow_up_line:before {
  content: "\e9a3";
  color: #09244b;
}

.mgc_arrows_down_fill:before {
  content: "\e9a4";
  color: #09244b;
}

.mgc_arrows_down_line:before {
  content: "\e9a5";
  color: #09244b;
}

.mgc_arrows_left_fill:before {
  content: "\e9a6";
  color: #09244b;
}

.mgc_arrows_left_line:before {
  content: "\e9a7";
  color: #09244b;
}

.mgc_arrows_right_fill:before {
  content: "\e9a8";
  color: #09244b;
}

.mgc_arrows_right_line:before {
  content: "\e9a9";
  color: #09244b;
}

.mgc_arrows_up_fill:before {
  content: "\e9aa";
  color: #09244b;
}

.mgc_arrows_up_line:before {
  content: "\e9ab";
  color: #09244b;
}

.mgc_artboard_fill:before {
  content: "\e9ac";
  color: #09244b;
}

.mgc_artboard_line:before {
  content: "\e9ad";
  color: #09244b;
}

.mgc_aspect_ratio_fill:before {
  content: "\e9ae";
  color: #09244b;
}

.mgc_aspect_ratio_line:before {
  content: "\e9af";
  color: #09244b;
}

.mgc_asterisk_2_fill:before {
  content: "\e9b0";
  color: #09244b;
}

.mgc_asterisk_2_line:before {
  content: "\e9b1";
  color: #09244b;
}

.mgc_asterisk_fill:before {
  content: "\e9b2";
  color: #09244b;
}

.mgc_asterisk_line:before {
  content: "\e9b3";
  color: #09244b;
}

.mgc_at_fill:before {
  content: "\e9b4";
  color: #09244b;
}

.mgc_at_line:before {
  content: "\e9b5";
  color: #09244b;
}

.mgc_attachment_2_fill:before {
  content: "\e9b6";
  color: #09244b;
}

.mgc_attachment_2_line:before {
  content: "\e9b7";
  color: #09244b;
}

.mgc_attachment_fill:before {
  content: "\e9b8";
  color: #09244b;
}

.mgc_attachment_line:before {
  content: "\e9b9";
  color: #09244b;
}

.mgc_auction_fill:before {
  content: "\e9ba";
  color: #09244b;
}

.mgc_auction_line:before {
  content: "\e9bb";
  color: #09244b;
}

.mgc_audio_tape_fill:before {
  content: "\e9bc";
  color: #09244b;
}

.mgc_audio_tape_line:before {
  content: "\e9bd";
  color: #09244b;
}

.mgc_auto_hold_fill:before {
  content: "\e9be";
  color: #09244b;
}

.mgc_auto_hold_line:before {
  content: "\e9bf";
  color: #09244b;
}

.mgc_avalanche_AVAX_fill:before {
  content: "\e9c0";
  color: #09244b;
}

.mgc_avalanche_AVAX_line:before {
  content: "\e9c1";
  color: #09244b;
}

.mgc_award_fill:before {
  content: "\e9c2";
  color: #09244b;
}

.mgc_award_line:before {
  content: "\e9c3";
  color: #09244b;
}

.mgc_axe_fill:before {
  content: "\e9c4";
  color: #09244b;
}

.mgc_axe_line:before {
  content: "\e9c5";
  color: #09244b;
}

.mgc_AZ_sort_ascending_letters_fill:before {
  content: "\e9c6";
  color: #09244b;
}

.mgc_AZ_sort_ascending_letters_line:before {
  content: "\e9c7";
  color: #09244b;
}

.mgc_AZ_sort_descending_letters_fill:before {
  content: "\e9c8";
  color: #09244b;
}

.mgc_AZ_sort_descending_letters_line:before {
  content: "\e9c9";
  color: #09244b;
}

.mgc_baby_carriage_fill:before {
  content: "\e9ca";
  color: #09244b;
}

.mgc_baby_carriage_line:before {
  content: "\e9cb";
  color: #09244b;
}

.mgc_baby_fill:before {
  content: "\e9cc";
  color: #09244b;
}

.mgc_baby_line:before {
  content: "\e9cd";
  color: #09244b;
}

.mgc_back_2_fill:before {
  content: "\e9ce";
  color: #09244b;
}

.mgc_back_2_line:before {
  content: "\e9cf";
  color: #09244b;
}

.mgc_back_fill:before {
  content: "\e9d0";
  color: #09244b;
}

.mgc_back_line:before {
  content: "\e9d1";
  color: #09244b;
}

.mgc_backboard_fill:before {
  content: "\e9d2";
  color: #09244b;
}

.mgc_backboard_line:before {
  content: "\e9d3";
  color: #09244b;
}

.mgc_background_fill:before {
  content: "\e9d4";
  color: #09244b;
}

.mgc_background_line:before {
  content: "\e9d5";
  color: #09244b;
}

.mgc_backpack_fill:before {
  content: "\e9d6";
  color: #09244b;
}

.mgc_backpack_line:before {
  content: "\e9d7";
  color: #09244b;
}

.mgc_badge_fill:before {
  content: "\e9d8";
  color: #09244b;
}

.mgc_badge_line:before {
  content: "\e9d9";
  color: #09244b;
}

.mgc_badminton_fill:before {
  content: "\e9da";
  color: #09244b;
}

.mgc_badminton_line:before {
  content: "\e9db";
  color: #09244b;
}

.mgc_balance_fill:before {
  content: "\e9dc";
  color: #09244b;
}

.mgc_balance_line:before {
  content: "\e9dd";
  color: #09244b;
}

.mgc_balloon_2_fill:before {
  content: "\e9de";
  color: #09244b;
}

.mgc_balloon_2_line:before {
  content: "\e9df";
  color: #09244b;
}

.mgc_bank_card_fill:before {
  content: "\e9e0";
  color: #09244b;
}

.mgc_bank_card_line:before {
  content: "\e9e1";
  color: #09244b;
}

.mgc_bank_fill:before {
  content: "\e9e2";
  color: #09244b;
}

.mgc_bank_line:before {
  content: "\e9e3";
  color: #09244b;
}

.mgc_bank_of_china_tower_fill:before {
  content: "\e9e4";
  color: #09244b;
}

.mgc_bank_of_china_tower_line:before {
  content: "\e9e5";
  color: #09244b;
}

.mgc_barbell_fill:before {
  content: "\e9e6";
  color: #09244b;
}

.mgc_barbell_line:before {
  content: "\e9e7";
  color: #09244b;
}

.mgc_barcode_fill:before {
  content: "\e9e8";
  color: #09244b;
}

.mgc_barcode_line:before {
  content: "\e9e9";
  color: #09244b;
}

.mgc_barcode_scan_fill:before {
  content: "\e9ea";
  color: #09244b;
}

.mgc_barcode_scan_line:before {
  content: "\e9eb";
  color: #09244b;
}

.mgc_base_station_2_fill:before {
  content: "\e9ec";
  color: #09244b;
}

.mgc_base_station_2_line:before {
  content: "\e9ed";
  color: #09244b;
}

.mgc_base_station_fill:before {
  content: "\e9ee";
  color: #09244b;
}

.mgc_base_station_line:before {
  content: "\e9ef";
  color: #09244b;
}

.mgc_baseball_2_fill:before {
  content: "\e9f0";
  color: #09244b;
}

.mgc_baseball_2_line:before {
  content: "\e9f1";
  color: #09244b;
}

.mgc_baseball_fill:before {
  content: "\e9f2";
  color: #09244b;
}

.mgc_baseball_line:before {
  content: "\e9f3";
  color: #09244b;
}

.mgc_basket_2_fill:before {
  content: "\e9f4";
  color: #09244b;
}

.mgc_basket_2_line:before {
  content: "\e9f5";
  color: #09244b;
}

.mgc_basket_fill:before {
  content: "\e9f6";
  color: #09244b;
}

.mgc_basket_line:before {
  content: "\e9f7";
  color: #09244b;
}

.mgc_basketball_fill:before {
  content: "\e9f8";
  color: #09244b;
}

.mgc_basketball_line:before {
  content: "\e9f9";
  color: #09244b;
}

.mgc_bath_fill:before {
  content: "\e9fa";
  color: #09244b;
}

.mgc_bath_line:before {
  content: "\e9fb";
  color: #09244b;
}

.mgc_battery_1_fill:before {
  content: "\e9fc";
  color: #09244b;
}

.mgc_battery_1_line:before {
  content: "\e9fd";
  color: #09244b;
}

.mgc_battery_2_fill:before {
  content: "\e9fe";
  color: #09244b;
}

.mgc_battery_2_line:before {
  content: "\e9ff";
  color: #09244b;
}

.mgc_battery_3_fill:before {
  content: "\ea00";
  color: #09244b;
}

.mgc_battery_3_line:before {
  content: "\ea01";
  color: #09244b;
}

.mgc_battery_4_fill:before {
  content: "\ea02";
  color: #09244b;
}

.mgc_battery_4_line:before {
  content: "\ea03";
  color: #09244b;
}

.mgc_battery_automotive_fill:before {
  content: "\ea04";
  color: #09244b;
}

.mgc_battery_automotive_line:before {
  content: "\ea05";
  color: #09244b;
}

.mgc_battery_charging_fill:before {
  content: "\ea06";
  color: #09244b;
}

.mgc_battery_charging_line:before {
  content: "\ea07";
  color: #09244b;
}

.mgc_battery_fill:before {
  content: "\ea08";
  color: #09244b;
}

.mgc_battery_line:before {
  content: "\ea09";
  color: #09244b;
}

.mgc_beachball_fill:before {
  content: "\ea0a";
  color: #09244b;
}

.mgc_beachball_line:before {
  content: "\ea0b";
  color: #09244b;
}

.mgc_bear_fill:before {
  content: "\ea0c";
  color: #09244b;
}

.mgc_bear_line:before {
  content: "\ea0d";
  color: #09244b;
}

.mgc_beard_fill:before {
  content: "\ea0e";
  color: #09244b;
}

.mgc_beard_line:before {
  content: "\ea0f";
  color: #09244b;
}

.mgc_bed_2_fill:before {
  content: "\ea10";
  color: #09244b;
}

.mgc_bed_2_line:before {
  content: "\ea11";
  color: #09244b;
}

.mgc_bed_fill:before {
  content: "\ea12";
  color: #09244b;
}

.mgc_bed_line:before {
  content: "\ea13";
  color: #09244b;
}

.mgc_bedside_table_2_fill:before {
  content: "\ea14";
  color: #09244b;
}

.mgc_bedside_table_2_line:before {
  content: "\ea15";
  color: #09244b;
}

.mgc_bedside_table_fill:before {
  content: "\ea16";
  color: #09244b;
}

.mgc_bedside_table_line:before {
  content: "\ea17";
  color: #09244b;
}

.mgc_behance_fill:before {
  content: "\ea18";
  color: #09244b;
}

.mgc_behance_line:before {
  content: "\ea19";
  color: #09244b;
}

.mgc_bell_ringing_fill:before {
  content: "\ea1a";
  color: #09244b;
}

.mgc_bell_ringing_line:before {
  content: "\ea1b";
  color: #09244b;
}

.mgc_big_ben_fill:before {
  content: "\ea1c";
  color: #09244b;
}

.mgc_big_ben_line:before {
  content: "\ea1d";
  color: #09244b;
}

.mgc_bike_fill:before {
  content: "\ea1e";
  color: #09244b;
}

.mgc_bike_line:before {
  content: "\ea1f";
  color: #09244b;
}

.mgc_bilibili_fill:before {
  content: "\ea20";
  color: #09244b;
}

.mgc_bilibili_line:before {
  content: "\ea21";
  color: #09244b;
}

.mgc_bill_2_fill:before {
  content: "\ea22";
  color: #09244b;
}

.mgc_bill_2_line:before {
  content: "\ea23";
  color: #09244b;
}

.mgc_bill_fill:before {
  content: "\ea24";
  color: #09244b;
}

.mgc_bill_line:before {
  content: "\ea25";
  color: #09244b;
}

.mgc_binance_coin_BNB_fill:before {
  content: "\ea26";
  color: #09244b;
}

.mgc_binance_coin_BNB_line:before {
  content: "\ea27";
  color: #09244b;
}

.mgc_binance_USD_BUSD_fill:before {
  content: "\ea28";
  color: #09244b;
}

.mgc_binance_USD_BUSD_line:before {
  content: "\ea29";
  color: #09244b;
}

.mgc_bird_fill:before {
  content: "\ea2a";
  color: #09244b;
}

.mgc_bird_line:before {
  content: "\ea2b";
  color: #09244b;
}

.mgc_birthday_2_fill:before {
  content: "\ea2c";
  color: #09244b;
}

.mgc_birthday_2_line:before {
  content: "\ea2d";
  color: #09244b;
}

.mgc_black_board_2_fill:before {
  content: "\ea2e";
  color: #09244b;
}

.mgc_black_board_2_line:before {
  content: "\ea2f";
  color: #09244b;
}

.mgc_black_board_fill:before {
  content: "\ea30";
  color: #09244b;
}

.mgc_black_board_line:before {
  content: "\ea31";
  color: #09244b;
}

.mgc_blessing_fill:before {
  content: "\ea32";
  color: #09244b;
}

.mgc_blessing_line:before {
  content: "\ea33";
  color: #09244b;
}

.mgc_bling_fill:before {
  content: "\ea34";
  color: #09244b;
}

.mgc_bling_line:before {
  content: "\ea35";
  color: #09244b;
}

.mgc_blockquote_fill:before {
  content: "\ea36";
  color: #09244b;
}

.mgc_blockquote_line:before {
  content: "\ea37";
  color: #09244b;
}

.mgc_bluesky_social_fill:before {
  content: "\ea38";
  color: #09244b;
}

.mgc_bluesky_social_line:before {
  content: "\ea39";
  color: #09244b;
}

.mgc_bluetooth_fill:before {
  content: "\ea3a";
  color: #09244b;
}

.mgc_bluetooth_line:before {
  content: "\ea3b";
  color: #09244b;
}

.mgc_bluetooth_off_fill:before {
  content: "\ea3c";
  color: #09244b;
}

.mgc_bluetooth_off_line:before {
  content: "\ea3d";
  color: #09244b;
}

.mgc_BNB_fill:before {
  content: "\ea3e";
  color: #09244b;
}

.mgc_BNB_line:before {
  content: "\ea3f";
  color: #09244b;
}

.mgc_board_fill:before {
  content: "\ea40";
  color: #09244b;
}

.mgc_board_line:before {
  content: "\ea41";
  color: #09244b;
}

.mgc_body_fill:before {
  content: "\ea42";
  color: #09244b;
}

.mgc_body_line:before {
  content: "\ea43";
  color: #09244b;
}

.mgc_bold_fill:before {
  content: "\ea44";
  color: #09244b;
}

.mgc_bold_line:before {
  content: "\ea45";
  color: #09244b;
}

.mgc_bomb_fill:before {
  content: "\ea46";
  color: #09244b;
}

.mgc_bomb_line:before {
  content: "\ea47";
  color: #09244b;
}

.mgc_bone_fill:before {
  content: "\ea48";
  color: #09244b;
}

.mgc_bone_line:before {
  content: "\ea49";
  color: #09244b;
}

.mgc_book_2_fill:before {
  content: "\ea4a";
  color: #09244b;
}

.mgc_book_2_line:before {
  content: "\ea4b";
  color: #09244b;
}

.mgc_book_3_fill:before {
  content: "\ea4c";
  color: #09244b;
}

.mgc_book_3_line:before {
  content: "\ea4d";
  color: #09244b;
}

.mgc_book_4_fill:before {
  content: "\ea4e";
  color: #09244b;
}

.mgc_book_4_line:before {
  content: "\ea4f";
  color: #09244b;
}

.mgc_book_5_fill:before {
  content: "\ea50";
  color: #09244b;
}

.mgc_book_5_line:before {
  content: "\ea51";
  color: #09244b;
}

.mgc_book_6_fill:before {
  content: "\ea52";
  color: #09244b;
}

.mgc_book_6_line:before {
  content: "\ea53";
  color: #09244b;
}

.mgc_book_fill:before {
  content: "\ea54";
  color: #09244b;
}

.mgc_book_line:before {
  content: "\ea55";
  color: #09244b;
}

.mgc_bookmark_add_fill:before {
  content: "\ea56";
  color: #09244b;
}

.mgc_bookmark_add_line:before {
  content: "\ea57";
  color: #09244b;
}

.mgc_bookmark_edit_fill:before {
  content: "\ea58";
  color: #09244b;
}

.mgc_bookmark_edit_line:before {
  content: "\ea59";
  color: #09244b;
}

.mgc_bookmark_fill:before {
  content: "\ea5a";
  color: #09244b;
}

.mgc_bookmark_line:before {
  content: "\ea5b";
  color: #09244b;
}

.mgc_bookmark_remove_fill:before {
  content: "\ea5c";
  color: #09244b;
}

.mgc_bookmark_remove_line:before {
  content: "\ea5d";
  color: #09244b;
}

.mgc_bookmarks_fill:before {
  content: "\ea5e";
  color: #09244b;
}

.mgc_bookmarks_line:before {
  content: "\ea5f";
  color: #09244b;
}

.mgc_boom_fill:before {
  content: "\ea60";
  color: #09244b;
}

.mgc_boom_line:before {
  content: "\ea61";
  color: #09244b;
}

.mgc_border_blank_fill:before {
  content: "\ea62";
  color: #09244b;
}

.mgc_border_blank_line:before {
  content: "\ea63";
  color: #09244b;
}

.mgc_border_bottom_fill:before {
  content: "\ea64";
  color: #09244b;
}

.mgc_border_bottom_line:before {
  content: "\ea65";
  color: #09244b;
}

.mgc_border_horizontal_fill:before {
  content: "\ea66";
  color: #09244b;
}

.mgc_border_horizontal_line:before {
  content: "\ea67";
  color: #09244b;
}

.mgc_border_inner_fill:before {
  content: "\ea68";
  color: #09244b;
}

.mgc_border_inner_line:before {
  content: "\ea69";
  color: #09244b;
}

.mgc_border_left_fill:before {
  content: "\ea6a";
  color: #09244b;
}

.mgc_border_left_line:before {
  content: "\ea6b";
  color: #09244b;
}

.mgc_border_outer_fill:before {
  content: "\ea6c";
  color: #09244b;
}

.mgc_border_outer_line:before {
  content: "\ea6d";
  color: #09244b;
}

.mgc_border_radius_fill:before {
  content: "\ea6e";
  color: #09244b;
}

.mgc_border_radius_line:before {
  content: "\ea6f";
  color: #09244b;
}

.mgc_border_right_fill:before {
  content: "\ea70";
  color: #09244b;
}

.mgc_border_right_line:before {
  content: "\ea71";
  color: #09244b;
}

.mgc_border_top_fill:before {
  content: "\ea72";
  color: #09244b;
}

.mgc_border_top_line:before {
  content: "\ea73";
  color: #09244b;
}

.mgc_border_vertical_fill:before {
  content: "\ea74";
  color: #09244b;
}

.mgc_border_vertical_line:before {
  content: "\ea75";
  color: #09244b;
}

.mgc_bottle_fill:before {
  content: "\ea76";
  color: #09244b;
}

.mgc_bottle_glass_fill:before {
  content: "\ea77";
  color: #09244b;
}

.mgc_bottle_glass_line:before {
  content: "\ea78";
  color: #09244b;
}

.mgc_bottle_line:before {
  content: "\ea79";
  color: #09244b;
}

.mgc_bow_tie_fill:before {
  content: "\ea7a";
  color: #09244b;
}

.mgc_bow_tie_line:before {
  content: "\ea7b";
  color: #09244b;
}

.mgc_bowknot_fill:before {
  content: "\ea7c";
  color: #09244b;
}

.mgc_bowknot_line:before {
  content: "\ea7d";
  color: #09244b;
}

.mgc_bowl_2_fill:before {
  content: "\ea7e";
  color: #09244b;
}

.mgc_bowl_2_line:before {
  content: "\ea7f";
  color: #09244b;
}

.mgc_bowl_fill:before {
  content: "\ea80";
  color: #09244b;
}

.mgc_bowl_line:before {
  content: "\ea81";
  color: #09244b;
}

.mgc_box_2_fill:before {
  content: "\ea82";
  color: #09244b;
}

.mgc_box_2_line:before {
  content: "\ea83";
  color: #09244b;
}

.mgc_box_3_fill:before {
  content: "\ea84";
  color: #09244b;
}

.mgc_box_3_line:before {
  content: "\ea85";
  color: #09244b;
}

.mgc_box_fill:before {
  content: "\ea86";
  color: #09244b;
}

.mgc_box_line:before {
  content: "\ea87";
  color: #09244b;
}

.mgc_braces_fill:before {
  content: "\ea88";
  color: #09244b;
}

.mgc_braces_line:before {
  content: "\ea89";
  color: #09244b;
}

.mgc_brackets_angle_fill:before {
  content: "\ea8a";
  color: #09244b;
}

.mgc_brackets_angle_line:before {
  content: "\ea8b";
  color: #09244b;
}

.mgc_brackets_fill:before {
  content: "\ea8c";
  color: #09244b;
}

.mgc_brackets_line:before {
  content: "\ea8d";
  color: #09244b;
}

.mgc_brain_fill:before {
  content: "\ea8e";
  color: #09244b;
}

.mgc_brain_line:before {
  content: "\ea8f";
  color: #09244b;
}

.mgc_brake_fill:before {
  content: "\ea90";
  color: #09244b;
}

.mgc_brake_line:before {
  content: "\ea91";
  color: #09244b;
}

.mgc_bread_fill:before {
  content: "\ea92";
  color: #09244b;
}

.mgc_bread_line:before {
  content: "\ea93";
  color: #09244b;
}

.mgc_bridge_2_fill:before {
  content: "\ea94";
  color: #09244b;
}

.mgc_bridge_2_line:before {
  content: "\ea95";
  color: #09244b;
}

.mgc_bridge_fill:before {
  content: "\ea96";
  color: #09244b;
}

.mgc_bridge_line:before {
  content: "\ea97";
  color: #09244b;
}

.mgc_brief_fill:before {
  content: "\ea98";
  color: #09244b;
}

.mgc_brief_line:before {
  content: "\ea99";
  color: #09244b;
}

.mgc_briefcase_2_fill:before {
  content: "\ea9a";
  color: #09244b;
}

.mgc_briefcase_2_line:before {
  content: "\ea9b";
  color: #09244b;
}

.mgc_briefcase_fill:before {
  content: "\ea9c";
  color: #09244b;
}

.mgc_briefcase_line:before {
  content: "\ea9d";
  color: #09244b;
}

.mgc_brightness_fill:before {
  content: "\ea9e";
  color: #09244b;
}

.mgc_brightness_line:before {
  content: "\ea9f";
  color: #09244b;
}

.mgc_broom_fill:before {
  content: "\eaa0";
  color: #09244b;
}

.mgc_broom_line:before {
  content: "\eaa1";
  color: #09244b;
}

.mgc_brush_2_fill:before {
  content: "\eaa2";
  color: #09244b;
}

.mgc_brush_2_line:before {
  content: "\eaa3";
  color: #09244b;
}

.mgc_brush_3_fill:before {
  content: "\eaa4";
  color: #09244b;
}

.mgc_brush_3_line:before {
  content: "\eaa5";
  color: #09244b;
}

.mgc_brush_fill:before {
  content: "\eaa6";
  color: #09244b;
}

.mgc_brush_line:before {
  content: "\eaa7";
  color: #09244b;
}

.mgc_bubble_fill:before {
  content: "\eaa8";
  color: #09244b;
}

.mgc_bubble_line:before {
  content: "\eaa9";
  color: #09244b;
}

.mgc_bug_fill:before {
  content: "\eaaa";
  color: #09244b;
}

.mgc_bug_line:before {
  content: "\eaab";
  color: #09244b;
}

.mgc_building_1_fill:before {
  content: "\eaac";
  color: #09244b;
}

.mgc_building_1_line:before {
  content: "\eaad";
  color: #09244b;
}

.mgc_building_2_fill:before {
  content: "\eaae";
  color: #09244b;
}

.mgc_building_2_line:before {
  content: "\eaaf";
  color: #09244b;
}

.mgc_building_3_fill:before {
  content: "\eab0";
  color: #09244b;
}

.mgc_building_3_line:before {
  content: "\eab1";
  color: #09244b;
}

.mgc_building_4_fill:before {
  content: "\eab2";
  color: #09244b;
}

.mgc_building_4_line:before {
  content: "\eab3";
  color: #09244b;
}

.mgc_building_5_fill:before {
  content: "\eab4";
  color: #09244b;
}

.mgc_building_5_line:before {
  content: "\eab5";
  color: #09244b;
}

.mgc_building_6_fill:before {
  content: "\eab6";
  color: #09244b;
}

.mgc_building_6_line:before {
  content: "\eab7";
  color: #09244b;
}

.mgc_bulb_2_fill:before {
  content: "\eab8";
  color: #09244b;
}

.mgc_bulb_2_line:before {
  content: "\eab9";
  color: #09244b;
}

.mgc_bulb_fill:before {
  content: "\eaba";
  color: #09244b;
}

.mgc_bulb_line:before {
  content: "\eabb";
  color: #09244b;
}

.mgc_burj_al_arab_fill:before {
  content: "\eabc";
  color: #09244b;
}

.mgc_burj_al_arab_line:before {
  content: "\eabd";
  color: #09244b;
}

.mgc_burj_khalifa_tower_fill:before {
  content: "\eabe";
  color: #09244b;
}

.mgc_burj_khalifa_tower_line:before {
  content: "\eabf";
  color: #09244b;
}

.mgc_bus_2_fill:before {
  content: "\eac0";
  color: #09244b;
}

.mgc_bus_2_line:before {
  content: "\eac1";
  color: #09244b;
}

.mgc_bus_fill:before {
  content: "\eac2";
  color: #09244b;
}

.mgc_bus_line:before {
  content: "\eac3";
  color: #09244b;
}

.mgc_butterfly_2_fill:before {
  content: "\eac4";
  color: #09244b;
}

.mgc_butterfly_2_line:before {
  content: "\eac5";
  color: #09244b;
}

.mgc_butterfly_fill:before {
  content: "\eac6";
  color: #09244b;
}

.mgc_butterfly_line:before {
  content: "\eac7";
  color: #09244b;
}

.mgc_cactus_2_fill:before {
  content: "\eac8";
  color: #09244b;
}

.mgc_cactus_2_line:before {
  content: "\eac9";
  color: #09244b;
}

.mgc_cactus_fill:before {
  content: "\eaca";
  color: #09244b;
}

.mgc_cactus_line:before {
  content: "\eacb";
  color: #09244b;
}

.mgc_cake_fill:before {
  content: "\eacc";
  color: #09244b;
}

.mgc_cake_line:before {
  content: "\eacd";
  color: #09244b;
}

.mgc_calendar_2_fill:before {
  content: "\eace";
  color: #09244b;
}

.mgc_calendar_2_line:before {
  content: "\eacf";
  color: #09244b;
}

.mgc_calendar_3_fill:before {
  content: "\ead0";
  color: #09244b;
}

.mgc_calendar_3_line:before {
  content: "\ead1";
  color: #09244b;
}

.mgc_calendar_add_fill:before {
  content: "\ead2";
  color: #09244b;
}

.mgc_calendar_add_line:before {
  content: "\ead3";
  color: #09244b;
}

.mgc_calendar_day_fill:before {
  content: "\ead4";
  color: #09244b;
}

.mgc_calendar_day_line:before {
  content: "\ead5";
  color: #09244b;
}

.mgc_calendar_fill:before {
  content: "\ead6";
  color: #09244b;
}

.mgc_calendar_line:before {
  content: "\ead7";
  color: #09244b;
}

.mgc_calendar_month_fill:before {
  content: "\ead8";
  color: #09244b;
}

.mgc_calendar_month_line:before {
  content: "\ead9";
  color: #09244b;
}

.mgc_calendar_time_add_fill:before {
  content: "\eada";
  color: #09244b;
}

.mgc_calendar_time_add_line:before {
  content: "\eadb";
  color: #09244b;
}

.mgc_calendar_week_fill:before {
  content: "\eadc";
  color: #09244b;
}

.mgc_calendar_week_line:before {
  content: "\eadd";
  color: #09244b;
}

.mgc_camcorder_2_fill:before {
  content: "\eade";
  color: #09244b;
}

.mgc_camcorder_2_line:before {
  content: "\eadf";
  color: #09244b;
}

.mgc_camcorder_3_fill:before {
  content: "\eae0";
  color: #09244b;
}

.mgc_camcorder_3_line:before {
  content: "\eae1";
  color: #09244b;
}

.mgc_camcorder_fill:before {
  content: "\eae2";
  color: #09244b;
}

.mgc_camcorder_line:before {
  content: "\eae3";
  color: #09244b;
}

.mgc_camcorder_off_fill:before {
  content: "\eae4";
  color: #09244b;
}

.mgc_camcorder_off_line:before {
  content: "\eae5";
  color: #09244b;
}

.mgc_camera_2_ai_fill:before {
  content: "\eae6";
  color: #09244b;
}

.mgc_camera_2_ai_line:before {
  content: "\eae7";
  color: #09244b;
}

.mgc_camera_2_fill:before {
  content: "\eae8";
  color: #09244b;
}

.mgc_camera_2_line:before {
  content: "\eae9";
  color: #09244b;
}

.mgc_camera_2_off_fill:before {
  content: "\eaea";
  color: #09244b;
}

.mgc_camera_2_off_line:before {
  content: "\eaeb";
  color: #09244b;
}

.mgc_camera_fill:before {
  content: "\eaec";
  color: #09244b;
}

.mgc_camera_line:before {
  content: "\eaed";
  color: #09244b;
}

.mgc_camera_rotate_fill:before {
  content: "\eaee";
  color: #09244b;
}

.mgc_camera_rotate_line:before {
  content: "\eaef";
  color: #09244b;
}

.mgc_campfire_fill:before {
  content: "\eaf0";
  color: #09244b;
}

.mgc_campfire_line:before {
  content: "\eaf1";
  color: #09244b;
}

.mgc_campground_fill:before {
  content: "\eaf2";
  color: #09244b;
}

.mgc_campground_line:before {
  content: "\eaf3";
  color: #09244b;
}

.mgc_Cancer_fill:before {
  content: "\eaf4";
  color: #09244b;
}

.mgc_Cancer_line:before {
  content: "\eaf5";
  color: #09244b;
}

.mgc_candle_fill:before {
  content: "\eaf6";
  color: #09244b;
}

.mgc_candle_line:before {
  content: "\eaf7";
  color: #09244b;
}

.mgc_candles_fill:before {
  content: "\eaf8";
  color: #09244b;
}

.mgc_candles_line:before {
  content: "\eaf9";
  color: #09244b;
}

.mgc_candy_2_fill:before {
  content: "\eafa";
  color: #09244b;
}

.mgc_candy_2_line:before {
  content: "\eafb";
  color: #09244b;
}

.mgc_candy_fill:before {
  content: "\eafc";
  color: #09244b;
}

.mgc_candy_line:before {
  content: "\eafd";
  color: #09244b;
}

.mgc_canton_tower_fill:before {
  content: "\eafe";
  color: #09244b;
}

.mgc_canton_tower_line:before {
  content: "\eaff";
  color: #09244b;
}

.mgc_Capricorn_fill:before {
  content: "\eb00";
  color: #09244b;
}

.mgc_Capricorn_line:before {
  content: "\eb01";
  color: #09244b;
}

.mgc_capsule_fill:before {
  content: "\eb02";
  color: #09244b;
}

.mgc_capsule_line:before {
  content: "\eb03";
  color: #09244b;
}

.mgc_car_2_fill:before {
  content: "\eb04";
  color: #09244b;
}

.mgc_car_2_line:before {
  content: "\eb05";
  color: #09244b;
}

.mgc_car_3_fill:before {
  content: "\eb06";
  color: #09244b;
}

.mgc_car_3_line:before {
  content: "\eb07";
  color: #09244b;
}

.mgc_car_door_fill:before {
  content: "\eb08";
  color: #09244b;
}

.mgc_car_door_line:before {
  content: "\eb09";
  color: #09244b;
}

.mgc_car_fill:before {
  content: "\eb0a";
  color: #09244b;
}

.mgc_car_line:before {
  content: "\eb0b";
  color: #09244b;
}

.mgc_car_window_fill:before {
  content: "\eb0c";
  color: #09244b;
}

.mgc_car_window_line:before {
  content: "\eb0d";
  color: #09244b;
}

.mgc_card_pay_fill:before {
  content: "\eb0e";
  color: #09244b;
}

.mgc_card_pay_line:before {
  content: "\eb0f";
  color: #09244b;
}

.mgc_card_refund_fill:before {
  content: "\eb10";
  color: #09244b;
}

.mgc_card_refund_line:before {
  content: "\eb11";
  color: #09244b;
}

.mgc_cardano_ADA_fill:before {
  content: "\eb12";
  color: #09244b;
}

.mgc_cardano_ADA_line:before {
  content: "\eb13";
  color: #09244b;
}

.mgc_cardboard_vr_fill:before {
  content: "\eb14";
  color: #09244b;
}

.mgc_cardboard_vr_line:before {
  content: "\eb15";
  color: #09244b;
}

.mgc_carplay_fill:before {
  content: "\eb16";
  color: #09244b;
}

.mgc_carplay_line:before {
  content: "\eb17";
  color: #09244b;
}

.mgc_carrot_fill:before {
  content: "\eb18";
  color: #09244b;
}

.mgc_carrot_line:before {
  content: "\eb19";
  color: #09244b;
}

.mgc_cash_2_fill:before {
  content: "\eb1a";
  color: #09244b;
}

.mgc_cash_2_line:before {
  content: "\eb1b";
  color: #09244b;
}

.mgc_cash_fill:before {
  content: "\eb1c";
  color: #09244b;
}

.mgc_cash_line:before {
  content: "\eb1d";
  color: #09244b;
}

.mgc_cat_fill:before {
  content: "\eb1e";
  color: #09244b;
}

.mgc_cat_line:before {
  content: "\eb1f";
  color: #09244b;
}

.mgc_ceiling_lamp_fill:before {
  content: "\eb20";
  color: #09244b;
}

.mgc_ceiling_lamp_line:before {
  content: "\eb21";
  color: #09244b;
}

.mgc_celebrate_fill:before {
  content: "\eb22";
  color: #09244b;
}

.mgc_celebrate_line:before {
  content: "\eb23";
  color: #09244b;
}

.mgc_cellphone_2_ai_fill:before {
  content: "\eb24";
  color: #09244b;
}

.mgc_cellphone_2_ai_line:before {
  content: "\eb25";
  color: #09244b;
}

.mgc_cellphone_2_fill:before {
  content: "\eb26";
  color: #09244b;
}

.mgc_cellphone_2_horizontal_fill:before {
  content: "\eb27";
  color: #09244b;
}

.mgc_cellphone_2_horizontal_line:before {
  content: "\eb28";
  color: #09244b;
}

.mgc_cellphone_2_line:before {
  content: "\eb29";
  color: #09244b;
}

.mgc_cellphone_fill:before {
  content: "\eb2a";
  color: #09244b;
}

.mgc_cellphone_line:before {
  content: "\eb2b";
  color: #09244b;
}

.mgc_cellphone_vibration_fill:before {
  content: "\eb2c";
  color: #09244b;
}

.mgc_cellphone_vibration_line:before {
  content: "\eb2d";
  color: #09244b;
}

.mgc_celsius_fill:before {
  content: "\eb2e";
  color: #09244b;
}

.mgc_celsius_line:before {
  content: "\eb2f";
  color: #09244b;
}

.mgc_certificate_2_fill:before {
  content: "\eb30";
  color: #09244b;
}

.mgc_certificate_2_line:before {
  content: "\eb31";
  color: #09244b;
}

.mgc_certificate_fill:before {
  content: "\eb32";
  color: #09244b;
}

.mgc_certificate_line:before {
  content: "\eb33";
  color: #09244b;
}

.mgc_champagne_fill:before {
  content: "\eb34";
  color: #09244b;
}

.mgc_champagne_line:before {
  content: "\eb35";
  color: #09244b;
}

.mgc_charging_pile_fill:before {
  content: "\eb36";
  color: #09244b;
}

.mgc_charging_pile_line:before {
  content: "\eb37";
  color: #09244b;
}

.mgc_chart_bar_2_fill:before {
  content: "\eb38";
  color: #09244b;
}

.mgc_chart_bar_2_line:before {
  content: "\eb39";
  color: #09244b;
}

.mgc_chart_bar_fill:before {
  content: "\eb3a";
  color: #09244b;
}

.mgc_chart_bar_line:before {
  content: "\eb3b";
  color: #09244b;
}

.mgc_chart_decrease_fill:before {
  content: "\eb3c";
  color: #09244b;
}

.mgc_chart_decrease_line:before {
  content: "\eb3d";
  color: #09244b;
}

.mgc_chart_horizontal_fill:before {
  content: "\eb3e";
  color: #09244b;
}

.mgc_chart_horizontal_line:before {
  content: "\eb3f";
  color: #09244b;
}

.mgc_chart_line_fill:before {
  content: "\eb40";
  color: #09244b;
}

.mgc_chart_line_line:before {
  content: "\eb41";
  color: #09244b;
}

.mgc_chart_pie_2_fill:before {
  content: "\eb42";
  color: #09244b;
}

.mgc_chart_pie_2_line:before {
  content: "\eb43";
  color: #09244b;
}

.mgc_chart_pie_fill:before {
  content: "\eb44";
  color: #09244b;
}

.mgc_chart_pie_line:before {
  content: "\eb45";
  color: #09244b;
}

.mgc_chart_vertical_fill:before {
  content: "\eb46";
  color: #09244b;
}

.mgc_chart_vertical_line:before {
  content: "\eb47";
  color: #09244b;
}

.mgc_chat_1_fill:before {
  content: "\eb48";
  color: #09244b;
}

.mgc_chat_1_line:before {
  content: "\eb49";
  color: #09244b;
}

.mgc_chat_2_fill:before {
  content: "\eb4a";
  color: #09244b;
}

.mgc_chat_2_line:before {
  content: "\eb4b";
  color: #09244b;
}

.mgc_chat_3_fill:before {
  content: "\eb4c";
  color: #09244b;
}

.mgc_chat_3_line:before {
  content: "\eb4d";
  color: #09244b;
}

.mgc_chat_4_fill:before {
  content: "\eb4e";
  color: #09244b;
}

.mgc_chat_4_line:before {
  content: "\eb4f";
  color: #09244b;
}

.mgc_check_2_fill:before {
  content: "\eb50";
  color: #09244b;
}

.mgc_check_2_line:before {
  content: "\eb51";
  color: #09244b;
}

.mgc_check_circle_fill:before {
  content: "\eb52";
  color: #09244b;
}

.mgc_check_circle_line:before {
  content: "\eb53";
  color: #09244b;
}

.mgc_check_fill:before {
  content: "\eb54";
  color: #09244b;
}

.mgc_check_line:before {
  content: "\eb55";
  color: #09244b;
}

.mgc_checkbox_fill:before {
  content: "\eb56";
  color: #09244b;
}

.mgc_checkbox_line:before {
  content: "\eb57";
  color: #09244b;
}

.mgc_checks_fill:before {
  content: "\eb58";
  color: #09244b;
}

.mgc_checks_line:before {
  content: "\eb59";
  color: #09244b;
}

.mgc_chef_hat_fill:before {
  content: "\eb5a";
  color: #09244b;
}

.mgc_chef_hat_line:before {
  content: "\eb5b";
  color: #09244b;
}

.mgc_chess_fill:before {
  content: "\eb5c";
  color: #09244b;
}

.mgc_chess_line:before {
  content: "\eb5d";
  color: #09244b;
}

.mgc_chicken_fill:before {
  content: "\eb5e";
  color: #09244b;
}

.mgc_chicken_line:before {
  content: "\eb5f";
  color: #09244b;
}

.mgc_chines_knot_fill:before {
  content: "\eb60";
  color: #09244b;
}

.mgc_chines_knot_line:before {
  content: "\eb61";
  color: #09244b;
}

.mgc_chip_fill:before {
  content: "\eb62";
  color: #09244b;
}

.mgc_chip_line:before {
  content: "\eb63";
  color: #09244b;
}

.mgc_choice_fill:before {
  content: "\eb64";
  color: #09244b;
}

.mgc_choice_line:before {
  content: "\eb65";
  color: #09244b;
}

.mgc_chopsticks_fill:before {
  content: "\eb66";
  color: #09244b;
}

.mgc_chopsticks_line:before {
  content: "\eb67";
  color: #09244b;
}

.mgc_christ_the_redeemer_fill:before {
  content: "\eb68";
  color: #09244b;
}

.mgc_christ_the_redeemer_line:before {
  content: "\eb69";
  color: #09244b;
}

.mgc_christmas_ball_fill:before {
  content: "\eb6a";
  color: #09244b;
}

.mgc_christmas_ball_line:before {
  content: "\eb6b";
  color: #09244b;
}

.mgc_christmas_hat_fill:before {
  content: "\eb6c";
  color: #09244b;
}

.mgc_christmas_hat_line:before {
  content: "\eb6d";
  color: #09244b;
}

.mgc_chrome_fill:before {
  content: "\eb6e";
  color: #09244b;
}

.mgc_chrome_line:before {
  content: "\eb6f";
  color: #09244b;
}

.mgc_church_fill:before {
  content: "\eb70";
  color: #09244b;
}

.mgc_church_line:before {
  content: "\eb71";
  color: #09244b;
}

.mgc_clapperboard_fill:before {
  content: "\eb72";
  color: #09244b;
}

.mgc_clapperboard_line:before {
  content: "\eb73";
  color: #09244b;
}

.mgc_classify_2_fill:before {
  content: "\eb74";
  color: #09244b;
}

.mgc_classify_2_line:before {
  content: "\eb75";
  color: #09244b;
}

.mgc_classify_3_fill:before {
  content: "\eb76";
  color: #09244b;
}

.mgc_classify_3_line:before {
  content: "\eb77";
  color: #09244b;
}

.mgc_classify_add_2_fill:before {
  content: "\eb78";
  color: #09244b;
}

.mgc_classify_add_2_line:before {
  content: "\eb79";
  color: #09244b;
}

.mgc_classify_add_fill:before {
  content: "\eb7a";
  color: #09244b;
}

.mgc_classify_add_line:before {
  content: "\eb7b";
  color: #09244b;
}

.mgc_classify_fill:before {
  content: "\eb7c";
  color: #09244b;
}

.mgc_classify_line:before {
  content: "\eb7d";
  color: #09244b;
}

.mgc_clipboard_fill:before {
  content: "\eb7e";
  color: #09244b;
}

.mgc_clipboard_line:before {
  content: "\eb7f";
  color: #09244b;
}

.mgc_clock_2_fill:before {
  content: "\eb80";
  color: #09244b;
}

.mgc_clock_2_line:before {
  content: "\eb81";
  color: #09244b;
}

.mgc_clock_fill:before {
  content: "\eb82";
  color: #09244b;
}

.mgc_clock_line:before {
  content: "\eb83";
  color: #09244b;
}

.mgc_clockwise_alt_fill:before {
  content: "\eb84";
  color: #09244b;
}

.mgc_clockwise_alt_line:before {
  content: "\eb85";
  color: #09244b;
}

.mgc_clockwise_fill:before {
  content: "\eb86";
  color: #09244b;
}

.mgc_clockwise_line:before {
  content: "\eb87";
  color: #09244b;
}

.mgc_close_circle_fill:before {
  content: "\eb88";
  color: #09244b;
}

.mgc_close_circle_line:before {
  content: "\eb89";
  color: #09244b;
}

.mgc_close_fill:before {
  content: "\eb8a";
  color: #09244b;
}

.mgc_close_line:before {
  content: "\eb8b";
  color: #09244b;
}

.mgc_close_square_fill:before {
  content: "\eb8c";
  color: #09244b;
}

.mgc_close_square_line:before {
  content: "\eb8d";
  color: #09244b;
}

.mgc_cloud_2_fill:before {
  content: "\eb8e";
  color: #09244b;
}

.mgc_cloud_2_line:before {
  content: "\eb8f";
  color: #09244b;
}

.mgc_cloud_fill:before {
  content: "\eb90";
  color: #09244b;
}

.mgc_cloud_lightning_fill:before {
  content: "\eb91";
  color: #09244b;
}

.mgc_cloud_lightning_line:before {
  content: "\eb92";
  color: #09244b;
}

.mgc_cloud_line:before {
  content: "\eb93";
  color: #09244b;
}

.mgc_cloud_snow_fill:before {
  content: "\eb94";
  color: #09244b;
}

.mgc_cloud_snow_line:before {
  content: "\eb95";
  color: #09244b;
}

.mgc_cloud_windy_fill:before {
  content: "\eb96";
  color: #09244b;
}

.mgc_cloud_windy_line:before {
  content: "\eb97";
  color: #09244b;
}

.mgc_clouds_fill:before {
  content: "\eb98";
  color: #09244b;
}

.mgc_clouds_line:before {
  content: "\eb99";
  color: #09244b;
}

.mgc_clubs_fill:before {
  content: "\eb9a";
  color: #09244b;
}

.mgc_clubs_line:before {
  content: "\eb9b";
  color: #09244b;
}

.mgc_coat_fill:before {
  content: "\eb9c";
  color: #09244b;
}

.mgc_coat_line:before {
  content: "\eb9d";
  color: #09244b;
}

.mgc_coathanger_fill:before {
  content: "\eb9e";
  color: #09244b;
}

.mgc_coathanger_line:before {
  content: "\eb9f";
  color: #09244b;
}

.mgc_code_fill:before {
  content: "\eba0";
  color: #09244b;
}

.mgc_code_line:before {
  content: "\eba1";
  color: #09244b;
}

.mgc_codepen_fill:before {
  content: "\eba2";
  color: #09244b;
}

.mgc_codepen_line:before {
  content: "\eba3";
  color: #09244b;
}

.mgc_coin_2_fill:before {
  content: "\eba4";
  color: #09244b;
}

.mgc_coin_2_line:before {
  content: "\eba5";
  color: #09244b;
}

.mgc_coin_3_fill:before {
  content: "\eba6";
  color: #09244b;
}

.mgc_coin_3_line:before {
  content: "\eba7";
  color: #09244b;
}

.mgc_coin_fill:before {
  content: "\eba8";
  color: #09244b;
}

.mgc_coin_line:before {
  content: "\eba9";
  color: #09244b;
}

.mgc_color_filter_fill:before {
  content: "\ebaa";
  color: #09244b;
}

.mgc_color_filter_line:before {
  content: "\ebab";
  color: #09244b;
}

.mgc_color_picker_fill:before {
  content: "\ebac";
  color: #09244b;
}

.mgc_color_picker_line:before {
  content: "\ebad";
  color: #09244b;
}

.mgc_column_fill:before {
  content: "\ebae";
  color: #09244b;
}

.mgc_column_line:before {
  content: "\ebaf";
  color: #09244b;
}

.mgc_columns_2_fill:before {
  content: "\ebb0";
  color: #09244b;
}

.mgc_columns_2_line:before {
  content: "\ebb1";
  color: #09244b;
}

.mgc_columns_3_fill:before {
  content: "\ebb2";
  color: #09244b;
}

.mgc_columns_3_line:before {
  content: "\ebb3";
  color: #09244b;
}

.mgc_combine_fill:before {
  content: "\ebb4";
  color: #09244b;
}

.mgc_combine_line:before {
  content: "\ebb5";
  color: #09244b;
}

.mgc_command_fill:before {
  content: "\ebb6";
  color: #09244b;
}

.mgc_command_line:before {
  content: "\ebb7";
  color: #09244b;
}

.mgc_comment_2_fill:before {
  content: "\ebb8";
  color: #09244b;
}

.mgc_comment_2_line:before {
  content: "\ebb9";
  color: #09244b;
}

.mgc_comment_fill:before {
  content: "\ebba";
  color: #09244b;
}

.mgc_comment_line:before {
  content: "\ebbb";
  color: #09244b;
}

.mgc_compass_2_fill:before {
  content: "\ebbc";
  color: #09244b;
}

.mgc_compass_2_line:before {
  content: "\ebbd";
  color: #09244b;
}

.mgc_compass_3_fill:before {
  content: "\ebbe";
  color: #09244b;
}

.mgc_compass_3_line:before {
  content: "\ebbf";
  color: #09244b;
}

.mgc_compass_fill:before {
  content: "\ebc0";
  color: #09244b;
}

.mgc_compass_line:before {
  content: "\ebc1";
  color: #09244b;
}

.mgc_components_fill:before {
  content: "\ebc2";
  color: #09244b;
}

.mgc_components_line:before {
  content: "\ebc3";
  color: #09244b;
}

.mgc_computer_camera_fill:before {
  content: "\ebc4";
  color: #09244b;
}

.mgc_computer_camera_line:before {
  content: "\ebc5";
  color: #09244b;
}

.mgc_computer_camera_off_fill:before {
  content: "\ebc6";
  color: #09244b;
}

.mgc_computer_camera_off_line:before {
  content: "\ebc7";
  color: #09244b;
}

.mgc_computer_fill:before {
  content: "\ebc8";
  color: #09244b;
}

.mgc_computer_line:before {
  content: "\ebc9";
  color: #09244b;
}

.mgc_confused_fill:before {
  content: "\ebca";
  color: #09244b;
}

.mgc_confused_line:before {
  content: "\ebcb";
  color: #09244b;
}

.mgc_contacts_2_fill:before {
  content: "\ebcc";
  color: #09244b;
}

.mgc_contacts_2_line:before {
  content: "\ebcd";
  color: #09244b;
}

.mgc_contacts_3_fill:before {
  content: "\ebce";
  color: #09244b;
}

.mgc_contacts_3_line:before {
  content: "\ebcf";
  color: #09244b;
}

.mgc_contacts_4_fill:before {
  content: "\ebd0";
  color: #09244b;
}

.mgc_contacts_4_line:before {
  content: "\ebd1";
  color: #09244b;
}

.mgc_contacts_fill:before {
  content: "\ebd2";
  color: #09244b;
}

.mgc_contacts_line:before {
  content: "\ebd3";
  color: #09244b;
}

.mgc_content_ai_fill:before {
  content: "\ebd4";
  color: #09244b;
}

.mgc_content_ai_line:before {
  content: "\ebd5";
  color: #09244b;
}

.mgc_cookie_fill:before {
  content: "\ebd6";
  color: #09244b;
}

.mgc_cookie_line:before {
  content: "\ebd7";
  color: #09244b;
}

.mgc_cookie_man_fill:before {
  content: "\ebd8";
  color: #09244b;
}

.mgc_cookie_man_line:before {
  content: "\ebd9";
  color: #09244b;
}

.mgc_copilot_fill:before {
  content: "\ebda";
  color: #09244b;
}

.mgc_copilot_line:before {
  content: "\ebdb";
  color: #09244b;
}

.mgc_copper_coin_fill:before {
  content: "\ebdc";
  color: #09244b;
}

.mgc_copper_coin_line:before {
  content: "\ebdd";
  color: #09244b;
}

.mgc_copy_2_fill:before {
  content: "\ebde";
  color: #09244b;
}

.mgc_copy_2_line:before {
  content: "\ebdf";
  color: #09244b;
}

.mgc_copy_3_fill:before {
  content: "\ebe0";
  color: #09244b;
}

.mgc_copy_3_line:before {
  content: "\ebe1";
  color: #09244b;
}

.mgc_copy_fill:before {
  content: "\ebe2";
  color: #09244b;
}

.mgc_copy_line:before {
  content: "\ebe3";
  color: #09244b;
}

.mgc_copyright_fill:before {
  content: "\ebe4";
  color: #09244b;
}

.mgc_copyright_line:before {
  content: "\ebe5";
  color: #09244b;
}

.mgc_corner_down_left_fill:before {
  content: "\ebe6";
  color: #09244b;
}

.mgc_corner_down_left_line:before {
  content: "\ebe7";
  color: #09244b;
}

.mgc_corner_down_right_fill:before {
  content: "\ebe8";
  color: #09244b;
}

.mgc_corner_down_right_line:before {
  content: "\ebe9";
  color: #09244b;
}

.mgc_corner_up_left_fill:before {
  content: "\ebea";
  color: #09244b;
}

.mgc_corner_up_left_line:before {
  content: "\ebeb";
  color: #09244b;
}

.mgc_corner_up_right_fill:before {
  content: "\ebec";
  color: #09244b;
}

.mgc_corner_up_right_line:before {
  content: "\ebed";
  color: #09244b;
}

.mgc_counter_2_fill:before {
  content: "\ebee";
  color: #09244b;
}

.mgc_counter_2_line:before {
  content: "\ebef";
  color: #09244b;
}

.mgc_counter_fill:before {
  content: "\ebf0";
  color: #09244b;
}

.mgc_counter_line:before {
  content: "\ebf1";
  color: #09244b;
}

.mgc_coupon_fill:before {
  content: "\ebf2";
  color: #09244b;
}

.mgc_coupon_line:before {
  content: "\ebf3";
  color: #09244b;
}

.mgc_cross_2_fill:before {
  content: "\ebf4";
  color: #09244b;
}

.mgc_cross_2_line:before {
  content: "\ebf5";
  color: #09244b;
}

.mgc_cross_fill:before {
  content: "\ebf6";
  color: #09244b;
}

.mgc_cross_line:before {
  content: "\ebf7";
  color: #09244b;
}

.mgc_crutch_fill:before {
  content: "\ebf8";
  color: #09244b;
}

.mgc_crutch_line:before {
  content: "\ebf9";
  color: #09244b;
}

.mgc_crystal_ball_fill:before {
  content: "\ebfa";
  color: #09244b;
}

.mgc_crystal_ball_line:before {
  content: "\ebfb";
  color: #09244b;
}

.mgc_cube_3d_fill:before {
  content: "\ebfc";
  color: #09244b;
}

.mgc_cube_3d_line:before {
  content: "\ebfd";
  color: #09244b;
}

.mgc_cube_fill:before {
  content: "\ebfe";
  color: #09244b;
}

.mgc_cube_line:before {
  content: "\ebff";
  color: #09244b;
}

.mgc_cupcake_fill:before {
  content: "\ec00";
  color: #09244b;
}

.mgc_cupcake_line:before {
  content: "\ec01";
  color: #09244b;
}

.mgc_currency_baht_2_fill:before {
  content: "\ec02";
  color: #09244b;
}

.mgc_currency_baht_2_line:before {
  content: "\ec03";
  color: #09244b;
}

.mgc_currency_baht_fill:before {
  content: "\ec04";
  color: #09244b;
}

.mgc_currency_baht_line:before {
  content: "\ec05";
  color: #09244b;
}

.mgc_currency_bitcoin_2_fill:before {
  content: "\ec06";
  color: #09244b;
}

.mgc_currency_bitcoin_2_line:before {
  content: "\ec07";
  color: #09244b;
}

.mgc_currency_bitcoin_fill:before {
  content: "\ec08";
  color: #09244b;
}

.mgc_currency_bitcoin_line:before {
  content: "\ec09";
  color: #09244b;
}

.mgc_currency_cny_2_fill:before {
  content: "\ec0a";
  color: #09244b;
}

.mgc_currency_cny_2_line:before {
  content: "\ec0b";
  color: #09244b;
}

.mgc_currency_cny_fill:before {
  content: "\ec0c";
  color: #09244b;
}

.mgc_currency_cny_line:before {
  content: "\ec0d";
  color: #09244b;
}

.mgc_currency_dollar_2_fill:before {
  content: "\ec0e";
  color: #09244b;
}

.mgc_currency_dollar_2_line:before {
  content: "\ec0f";
  color: #09244b;
}

.mgc_currency_dollar_fill:before {
  content: "\ec10";
  color: #09244b;
}

.mgc_currency_dollar_line:before {
  content: "\ec11";
  color: #09244b;
}

.mgc_currency_euro_2_fill:before {
  content: "\ec12";
  color: #09244b;
}

.mgc_currency_euro_2_line:before {
  content: "\ec13";
  color: #09244b;
}

.mgc_currency_euro_fill:before {
  content: "\ec14";
  color: #09244b;
}

.mgc_currency_euro_line:before {
  content: "\ec15";
  color: #09244b;
}

.mgc_currency_lira_2_fill:before {
  content: "\ec16";
  color: #09244b;
}

.mgc_currency_lira_2_line:before {
  content: "\ec17";
  color: #09244b;
}

.mgc_currency_lira_fill:before {
  content: "\ec18";
  color: #09244b;
}

.mgc_currency_lira_line:before {
  content: "\ec19";
  color: #09244b;
}

.mgc_currency_nigeria_2_fill:before {
  content: "\ec1a";
  color: #09244b;
}

.mgc_currency_nigeria_2_line:before {
  content: "\ec1b";
  color: #09244b;
}

.mgc_currency_nigeria_fill:before {
  content: "\ec1c";
  color: #09244b;
}

.mgc_currency_nigeria_line:before {
  content: "\ec1d";
  color: #09244b;
}

.mgc_currency_pound_2_fill:before {
  content: "\ec1e";
  color: #09244b;
}

.mgc_currency_pound_2_line:before {
  content: "\ec1f";
  color: #09244b;
}

.mgc_currency_pound_fill:before {
  content: "\ec20";
  color: #09244b;
}

.mgc_currency_pound_line:before {
  content: "\ec21";
  color: #09244b;
}

.mgc_currency_rubel_2_fill:before {
  content: "\ec22";
  color: #09244b;
}

.mgc_currency_rubel_2_line:before {
  content: "\ec23";
  color: #09244b;
}

.mgc_currency_rubel_fill:before {
  content: "\ec24";
  color: #09244b;
}

.mgc_currency_rubel_line:before {
  content: "\ec25";
  color: #09244b;
}

.mgc_currency_rupee_2_fill:before {
  content: "\ec26";
  color: #09244b;
}

.mgc_currency_rupee_2_line:before {
  content: "\ec27";
  color: #09244b;
}

.mgc_currency_rupee_fill:before {
  content: "\ec28";
  color: #09244b;
}

.mgc_currency_rupee_line:before {
  content: "\ec29";
  color: #09244b;
}

.mgc_currency_shekel_2_fill:before {
  content: "\ec2a";
  color: #09244b;
}

.mgc_currency_shekel_2_line:before {
  content: "\ec2b";
  color: #09244b;
}

.mgc_currency_shekel_fill:before {
  content: "\ec2c";
  color: #09244b;
}

.mgc_currency_shekel_line:before {
  content: "\ec2d";
  color: #09244b;
}

.mgc_currency_won_2_fill:before {
  content: "\ec2e";
  color: #09244b;
}

.mgc_currency_won_2_line:before {
  content: "\ec2f";
  color: #09244b;
}

.mgc_currency_won_fill:before {
  content: "\ec30";
  color: #09244b;
}

.mgc_currency_won_line:before {
  content: "\ec31";
  color: #09244b;
}

.mgc_cursor_2_fill:before {
  content: "\ec32";
  color: #09244b;
}

.mgc_cursor_2_line:before {
  content: "\ec33";
  color: #09244b;
}

.mgc_cursor_3_fill:before {
  content: "\ec34";
  color: #09244b;
}

.mgc_cursor_3_line:before {
  content: "\ec35";
  color: #09244b;
}

.mgc_cursor_fill:before {
  content: "\ec36";
  color: #09244b;
}

.mgc_cursor_line:before {
  content: "\ec37";
  color: #09244b;
}

.mgc_cursor_text_fill:before {
  content: "\ec38";
  color: #09244b;
}

.mgc_cursor_text_line:before {
  content: "\ec39";
  color: #09244b;
}

.mgc_curtain_fill:before {
  content: "\ec3a";
}

.mgc_curtain_line:before {
  content: "\ec3b";
}

.mgc_cylinder_2_fill:before {
  content: "\ec3c";
  color: #09244b;
}

.mgc_cylinder_2_line:before {
  content: "\ec3d";
  color: #09244b;
}

.mgc_cylinder_fill:before {
  content: "\ec3e";
  color: #09244b;
}

.mgc_cylinder_line:before {
  content: "\ec3f";
  color: #09244b;
}

.mgc_dandelion_fill:before {
  content: "\ec40";
  color: #09244b;
}

.mgc_dandelion_line:before {
  content: "\ec41";
  color: #09244b;
}

.mgc_danmaku_fill:before {
  content: "\ec42";
  color: #09244b;
}

.mgc_danmaku_line:before {
  content: "\ec43";
  color: #09244b;
}

.mgc_danmaku_off_fill:before {
  content: "\ec44";
  color: #09244b;
}

.mgc_danmaku_off_line:before {
  content: "\ec45";
  color: #09244b;
}

.mgc_danmaku_on_fill:before {
  content: "\ec46";
  color: #09244b;
}

.mgc_danmaku_on_line:before {
  content: "\ec47";
  color: #09244b;
}

.mgc_dashboard_2_fill:before {
  content: "\ec48";
  color: #09244b;
}

.mgc_dashboard_2_line:before {
  content: "\ec49";
  color: #09244b;
}

.mgc_dashboard_3_fill:before {
  content: "\ec4a";
  color: #09244b;
}

.mgc_dashboard_3_line:before {
  content: "\ec4b";
  color: #09244b;
}

.mgc_dashboard_4_fill:before {
  content: "\ec4c";
  color: #09244b;
}

.mgc_dashboard_4_line:before {
  content: "\ec4d";
  color: #09244b;
}

.mgc_dashboard_fill:before {
  content: "\ec4e";
  color: #09244b;
}

.mgc_dashboard_line:before {
  content: "\ec4f";
  color: #09244b;
}

.mgc_deer_fill:before {
  content: "\ec50";
  color: #09244b;
}

.mgc_deer_line:before {
  content: "\ec51";
  color: #09244b;
}

.mgc_delete_2_fill:before {
  content: "\ec52";
  color: #09244b;
}

.mgc_delete_2_line:before {
  content: "\ec53";
  color: #09244b;
}

.mgc_delete_3_fill:before {
  content: "\ec54";
  color: #09244b;
}

.mgc_delete_3_line:before {
  content: "\ec55";
  color: #09244b;
}

.mgc_delete_back_fill:before {
  content: "\ec56";
  color: #09244b;
}

.mgc_delete_back_line:before {
  content: "\ec57";
  color: #09244b;
}

.mgc_delete_fill:before {
  content: "\ec58";
  color: #09244b;
}

.mgc_delete_line:before {
  content: "\ec59";
  color: #09244b;
}

.mgc_dental_fill:before {
  content: "\ec5a";
  color: #09244b;
}

.mgc_dental_line:before {
  content: "\ec5b";
  color: #09244b;
}

.mgc_department_fill:before {
  content: "\ec5c";
  color: #09244b;
}

.mgc_department_line:before {
  content: "\ec5d";
  color: #09244b;
}

.mgc_desk_fill:before {
  content: "\ec5e";
  color: #09244b;
}

.mgc_desk_lamp_2_fill:before {
  content: "\ec5f";
  color: #09244b;
}

.mgc_desk_lamp_2_line:before {
  content: "\ec60";
  color: #09244b;
}

.mgc_desk_lamp_fill:before {
  content: "\ec61";
  color: #09244b;
}

.mgc_desk_lamp_line:before {
  content: "\ec62";
  color: #09244b;
}

.mgc_desk_line:before {
  content: "\ec63";
  color: #09244b;
}

.mgc_device_fill:before {
  content: "\ec64";
  color: #09244b;
}

.mgc_device_line:before {
  content: "\ec65";
  color: #09244b;
}

.mgc_diamond_2_fill:before {
  content: "\ec66";
  color: #09244b;
}

.mgc_diamond_2_line:before {
  content: "\ec67";
  color: #09244b;
}

.mgc_diamond_fill:before {
  content: "\ec68";
  color: #09244b;
}

.mgc_diamond_line:before {
  content: "\ec69";
  color: #09244b;
}

.mgc_diamond_square_fill:before {
  content: "\ec6a";
  color: #09244b;
}

.mgc_diamond_square_line:before {
  content: "\ec6b";
  color: #09244b;
}

.mgc_diary_fill:before {
  content: "\ec6c";
  color: #09244b;
}

.mgc_diary_line:before {
  content: "\ec6d";
  color: #09244b;
}

.mgc_dingtalk_fill:before {
  content: "\ec6e";
  color: #09244b;
}

.mgc_dingtalk_line:before {
  content: "\ec6f";
  color: #09244b;
}

.mgc_dinner_fill:before {
  content: "\ec70";
  color: #09244b;
}

.mgc_dinner_line:before {
  content: "\ec71";
  color: #09244b;
}

.mgc_direction_arrow_fill:before {
  content: "\ec72";
  color: #09244b;
}

.mgc_direction_arrow_line:before {
  content: "\ec73";
  color: #09244b;
}

.mgc_direction_dot_fill:before {
  content: "\ec74";
  color: #09244b;
}

.mgc_direction_dot_line:before {
  content: "\ec75";
  color: #09244b;
}

.mgc_directions_2_fill:before {
  content: "\ec76";
  color: #09244b;
}

.mgc_directions_2_line:before {
  content: "\ec77";
  color: #09244b;
}

.mgc_directions_fill:before {
  content: "\ec78";
  color: #09244b;
}

.mgc_directions_line:before {
  content: "\ec79";
  color: #09244b;
}

.mgc_directory_fill:before {
  content: "\ec7a";
  color: #09244b;
}

.mgc_directory_line:before {
  content: "\ec7b";
  color: #09244b;
}

.mgc_disabled_2_fill:before {
  content: "\ec7c";
  color: #09244b;
}

.mgc_disabled_2_line:before {
  content: "\ec7d";
  color: #09244b;
}

.mgc_disabled_fill:before {
  content: "\ec7e";
  color: #09244b;
}

.mgc_disabled_line:before {
  content: "\ec7f";
  color: #09244b;
}

.mgc_disc_fill:before {
  content: "\ec80";
  color: #09244b;
}

.mgc_disc_line:before {
  content: "\ec81";
  color: #09244b;
}

.mgc_discord_fill:before {
  content: "\ec82";
  color: #09244b;
}

.mgc_discord_line:before {
  content: "\ec83";
  color: #09244b;
}

.mgc_dish_cover_fill:before {
  content: "\ec84";
  color: #09244b;
}

.mgc_dish_cover_line:before {
  content: "\ec85";
  color: #09244b;
}

.mgc_display_fill:before {
  content: "\ec86";
  color: #09244b;
}

.mgc_display_line:before {
  content: "\ec87";
  color: #09244b;
}

.mgc_distribute_spacing_horizontal_fill:before {
  content: "\ec88";
  color: #09244b;
}

.mgc_distribute_spacing_horizontal_line:before {
  content: "\ec89";
  color: #09244b;
}

.mgc_distribute_spacing_vertical_fill:before {
  content: "\ec8a";
  color: #09244b;
}

.mgc_distribute_spacing_vertical_line:before {
  content: "\ec8b";
  color: #09244b;
}

.mgc_dividing_line_fill:before {
  content: "\ec8c";
  color: #09244b;
}

.mgc_dividing_line_line:before {
  content: "\ec8d";
  color: #09244b;
}

.mgc_doc_fill:before {
  content: "\ec8e";
  color: #09244b;
}

.mgc_doc_line:before {
  content: "\ec8f";
  color: #09244b;
}

.mgc_document_2_fill:before {
  content: "\ec90";
  color: #09244b;
}

.mgc_document_2_line:before {
  content: "\ec91";
  color: #09244b;
}

.mgc_document_3_fill:before {
  content: "\ec92";
  color: #09244b;
}

.mgc_document_3_line:before {
  content: "\ec93";
  color: #09244b;
}

.mgc_document_fill:before {
  content: "\ec94";
  color: #09244b;
}

.mgc_document_line:before {
  content: "\ec95";
  color: #09244b;
}

.mgc_documents_fill:before {
  content: "\ec96";
  color: #09244b;
}

.mgc_documents_line:before {
  content: "\ec97";
  color: #09244b;
}

.mgc_dog_fill:before {
  content: "\ec98";
  color: #09244b;
}

.mgc_dog_line:before {
  content: "\ec99";
  color: #09244b;
}

.mgc_dogecoin_DOGE_fill:before {
  content: "\ec9a";
  color: #09244b;
}

.mgc_dogecoin_DOGE_line:before {
  content: "\ec9b";
  color: #09244b;
}

.mgc_donut_fill:before {
  content: "\ec9c";
  color: #09244b;
}

.mgc_donut_line:before {
  content: "\ec9d";
  color: #09244b;
}

.mgc_door_fill:before {
  content: "\ec9e";
  color: #09244b;
}

.mgc_door_line:before {
  content: "\ec9f";
  color: #09244b;
}

.mgc_dot_grid_fill:before {
  content: "\eca0";
  color: #09244b;
}

.mgc_dot_grid_line:before {
  content: "\eca1";
  color: #09244b;
}

.mgc_dots_fill:before {
  content: "\eca2";
  color: #09244b;
}

.mgc_dots_line:before {
  content: "\eca3";
  color: #09244b;
}

.mgc_dots_vertical_fill:before {
  content: "\eca4";
  color: #09244b;
}

.mgc_dots_vertical_line:before {
  content: "\eca5";
  color: #09244b;
}

.mgc_down_fill:before {
  content: "\eca6";
  color: #09244b;
}

.mgc_down_line:before {
  content: "\eca7";
  color: #09244b;
}

.mgc_down_small_fill:before {
  content: "\eca8";
  color: #09244b;
}

.mgc_down_small_line:before {
  content: "\eca9";
  color: #09244b;
}

.mgc_download_2_fill:before {
  content: "\ecaa";
  color: #09244b;
}

.mgc_download_2_line:before {
  content: "\ecab";
  color: #09244b;
}

.mgc_download_3_fill:before {
  content: "\ecac";
  color: #09244b;
}

.mgc_download_3_line:before {
  content: "\ecad";
  color: #09244b;
}

.mgc_download_fill:before {
  content: "\ecae";
  color: #09244b;
}

.mgc_download_line:before {
  content: "\ecaf";
  color: #09244b;
}

.mgc_dragonfly_fill:before {
  content: "\ecb0";
  color: #09244b;
}

.mgc_dragonfly_line:before {
  content: "\ecb1";
  color: #09244b;
}

.mgc_drawer_2_fill:before {
  content: "\ecb2";
  color: #09244b;
}

.mgc_drawer_2_line:before {
  content: "\ecb3";
  color: #09244b;
}

.mgc_drawer_fill:before {
  content: "\ecb4";
  color: #09244b;
}

.mgc_drawer_line:before {
  content: "\ecb5";
  color: #09244b;
}

.mgc_drawing_board_fill:before {
  content: "\ecb6";
  color: #09244b;
}

.mgc_drawing_board_line:before {
  content: "\ecb7";
  color: #09244b;
}

.mgc_dress_fill:before {
  content: "\ecb8";
  color: #09244b;
}

.mgc_dress_line:before {
  content: "\ecb9";
  color: #09244b;
}

.mgc_dribbble_fill:before {
  content: "\ecba";
  color: #09244b;
}

.mgc_dribbble_line:before {
  content: "\ecbb";
  color: #09244b;
}

.mgc_drink_fill:before {
  content: "\ecbc";
  color: #09244b;
}

.mgc_drink_line:before {
  content: "\ecbd";
  color: #09244b;
}

.mgc_drive_fill:before {
  content: "\ecbe";
  color: #09244b;
}

.mgc_drive_line:before {
  content: "\ecbf";
  color: #09244b;
}

.mgc_drizzle_fill:before {
  content: "\ecc0";
  color: #09244b;
}

.mgc_drizzle_line:before {
  content: "\ecc1";
  color: #09244b;
}

.mgc_drone_fill:before {
  content: "\ecc2";
  color: #09244b;
}

.mgc_drone_line:before {
  content: "\ecc3";
  color: #09244b;
}

.mgc_drop_fill:before {
  content: "\ecc4";
  color: #09244b;
}

.mgc_drop_line:before {
  content: "\ecc5";
  color: #09244b;
}

.mgc_dropbox_fill:before {
  content: "\ecc6";
  color: #09244b;
}

.mgc_dropbox_line:before {
  content: "\ecc7";
  color: #09244b;
}

.mgc_drum_fill:before {
  content: "\ecc8";
  color: #09244b;
}

.mgc_drum_line:before {
  content: "\ecc9";
  color: #09244b;
}

.mgc_dry_fill:before {
  content: "\ecca";
  color: #09244b;
}

.mgc_dry_line:before {
  content: "\eccb";
  color: #09244b;
}

.mgc_dutch_windmill_fill:before {
  content: "\eccc";
  color: #09244b;
}

.mgc_dutch_windmill_line:before {
  content: "\eccd";
  color: #09244b;
}

.mgc_ear_fill:before {
  content: "\ecce";
  color: #09244b;
}

.mgc_ear_line:before {
  content: "\eccf";
  color: #09244b;
}

.mgc_earth_2_fill:before {
  content: "\ecd0";
  color: #09244b;
}

.mgc_earth_2_line:before {
  content: "\ecd1";
  color: #09244b;
}

.mgc_earth_3_fill:before {
  content: "\ecd2";
  color: #09244b;
}

.mgc_earth_3_line:before {
  content: "\ecd3";
  color: #09244b;
}

.mgc_earth_fill:before {
  content: "\ecd4";
  color: #09244b;
}

.mgc_earth_latitude_fill:before {
  content: "\ecd5";
  color: #09244b;
}

.mgc_earth_latitude_line:before {
  content: "\ecd6";
  color: #09244b;
}

.mgc_earth_line:before {
  content: "\ecd7";
  color: #09244b;
}

.mgc_earth_longitude_fill:before {
  content: "\ecd8";
  color: #09244b;
}

.mgc_earth_longitude_line:before {
  content: "\ecd9";
  color: #09244b;
}

.mgc_ease_in_control_point_fill:before {
  content: "\ecda";
  color: #09244b;
}

.mgc_ease_in_control_point_line:before {
  content: "\ecdb";
  color: #09244b;
}

.mgc_ease_in_fill:before {
  content: "\ecdc";
  color: #09244b;
}

.mgc_ease_in_line:before {
  content: "\ecdd";
  color: #09244b;
}

.mgc_ease_in_out_control_point_fill:before {
  content: "\ecde";
  color: #09244b;
}

.mgc_ease_in_out_control_point_line:before {
  content: "\ecdf";
  color: #09244b;
}

.mgc_ease_out_control_point_fill:before {
  content: "\ece0";
  color: #09244b;
}

.mgc_ease_out_control_point_line:before {
  content: "\ece1";
  color: #09244b;
}

.mgc_ease_out_fill:before {
  content: "\ece2";
  color: #09244b;
}

.mgc_ease_out_line:before {
  content: "\ece3";
  color: #09244b;
}

.mgc_easy_in_out_fill:before {
  content: "\ece4";
  color: #09244b;
}

.mgc_easy_in_out_line:before {
  content: "\ece5";
  color: #09244b;
}

.mgc_ebike_fill:before {
  content: "\ece6";
  color: #09244b;
}

.mgc_ebike_line:before {
  content: "\ece7";
  color: #09244b;
}

.mgc_edge_fill:before {
  content: "\ece8";
  color: #09244b;
}

.mgc_edge_line:before {
  content: "\ece9";
  color: #09244b;
}

.mgc_edit_2_fill:before {
  content: "\ecea";
  color: #09244b;
}

.mgc_edit_2_line:before {
  content: "\eceb";
  color: #09244b;
}

.mgc_edit_3_fill:before {
  content: "\ecec";
  color: #09244b;
}

.mgc_edit_3_line:before {
  content: "\eced";
  color: #09244b;
}

.mgc_edit_4_fill:before {
  content: "\ecee";
  color: #09244b;
}

.mgc_edit_4_line:before {
  content: "\ecef";
  color: #09244b;
}

.mgc_edit_fill:before {
  content: "\ecf0";
  color: #09244b;
}

.mgc_edit_line:before {
  content: "\ecf1";
  color: #09244b;
}

.mgc_egg_crack_fill:before {
  content: "\ecf2";
  color: #09244b;
}

.mgc_egg_crack_line:before {
  content: "\ecf3";
  color: #09244b;
}

.mgc_egg_fill:before {
  content: "\ecf4";
  color: #09244b;
}

.mgc_egg_line:before {
  content: "\ecf5";
  color: #09244b;
}

.mgc_egyptian_pyramids_fill:before {
  content: "\ecf6";
  color: #09244b;
}

.mgc_egyptian_pyramids_line:before {
  content: "\ecf7";
  color: #09244b;
}

.mgc_eiffel_tower_fill:before {
  content: "\ecf8";
  color: #09244b;
}

.mgc_eiffel_tower_line:before {
  content: "\ecf9";
  color: #09244b;
}

.mgc_electric_cooker_fill:before {
  content: "\ecfa";
  color: #09244b;
}

.mgc_electric_cooker_line:before {
  content: "\ecfb";
  color: #09244b;
}

.mgc_emergency_flashers_fill:before {
  content: "\ecfc";
  color: #09244b;
}

.mgc_emergency_flashers_line:before {
  content: "\ecfd";
  color: #09244b;
}

.mgc_emoji_2_fill:before {
  content: "\ecfe";
  color: #09244b;
}

.mgc_emoji_2_line:before {
  content: "\ecff";
  color: #09244b;
}

.mgc_emoji_fill:before {
  content: "\ed00";
  color: #09244b;
}

.mgc_emoji_line:before {
  content: "\ed01";
  color: #09244b;
}

.mgc_empty_box_fill:before {
  content: "\ed02";
  color: #09244b;
}

.mgc_empty_box_line:before {
  content: "\ed03";
  color: #09244b;
}

.mgc_engine_fill:before {
  content: "\ed04";
  color: #09244b;
}

.mgc_engine_line:before {
  content: "\ed05";
  color: #09244b;
}

.mgc_enter_door_fill:before {
  content: "\ed06";
  color: #09244b;
}

.mgc_enter_door_line:before {
  content: "\ed07";
  color: #09244b;
}

.mgc_entrance_fill:before {
  content: "\ed08";
  color: #09244b;
}

.mgc_entrance_line:before {
  content: "\ed09";
  color: #09244b;
}

.mgc_eraser_fill:before {
  content: "\ed0a";
  color: #09244b;
}

.mgc_eraser_line:before {
  content: "\ed0b";
  color: #09244b;
}

.mgc_escalator_down_fill:before {
  content: "\ed0c";
  color: #09244b;
}

.mgc_escalator_down_line:before {
  content: "\ed0d";
  color: #09244b;
}

.mgc_escalator_up_fill:before {
  content: "\ed0e";
  color: #09244b;
}

.mgc_escalator_up_line:before {
  content: "\ed0f";
  color: #09244b;
}

.mgc_ethereum_fill:before {
  content: "\ed10";
  color: #09244b;
}

.mgc_ethereum_line:before {
  content: "\ed11";
  color: #09244b;
}

.mgc_exchange_baht_fill:before {
  content: "\ed12";
  color: #09244b;
}

.mgc_exchange_baht_line:before {
  content: "\ed13";
  color: #09244b;
}

.mgc_exchange_bitcoin_fill:before {
  content: "\ed14";
  color: #09244b;
}

.mgc_exchange_bitcoin_line:before {
  content: "\ed15";
  color: #09244b;
}

.mgc_exchange_cny_fill:before {
  content: "\ed16";
  color: #09244b;
}

.mgc_exchange_cny_line:before {
  content: "\ed17";
  color: #09244b;
}

.mgc_exchange_dollar_fill:before {
  content: "\ed18";
  color: #09244b;
}

.mgc_exchange_dollar_line:before {
  content: "\ed19";
  color: #09244b;
}

.mgc_exchange_euro_fill:before {
  content: "\ed1a";
  color: #09244b;
}

.mgc_exchange_euro_line:before {
  content: "\ed1b";
  color: #09244b;
}

.mgc_exclude_fill:before {
  content: "\ed1c";
  color: #09244b;
}

.mgc_exclude_line:before {
  content: "\ed1d";
  color: #09244b;
}

.mgc_exit_door_fill:before {
  content: "\ed1e";
  color: #09244b;
}

.mgc_exit_door_line:before {
  content: "\ed1f";
  color: #09244b;
}

.mgc_exit_fill:before {
  content: "\ed20";
  color: #09244b;
}

.mgc_exit_line:before {
  content: "\ed21";
  color: #09244b;
}

.mgc_expand_player_fill:before {
  content: "\ed22";
  color: #09244b;
}

.mgc_expand_player_line:before {
  content: "\ed23";
  color: #09244b;
}

.mgc_exposure_fill:before {
  content: "\ed24";
  color: #09244b;
}

.mgc_exposure_line:before {
  content: "\ed25";
  color: #09244b;
}

.mgc_external_link_fill:before {
  content: "\ed26";
  color: #09244b;
}

.mgc_external_link_line:before {
  content: "\ed27";
  color: #09244b;
}

.mgc_eye_2_fill:before {
  content: "\ed28";
  color: #09244b;
}

.mgc_eye_2_line:before {
  content: "\ed29";
  color: #09244b;
}

.mgc_eye_close_fill:before {
  content: "\ed2a";
  color: #09244b;
}

.mgc_eye_close_line:before {
  content: "\ed2b";
  color: #09244b;
}

.mgc_eye_fill:before {
  content: "\ed2c";
  color: #09244b;
}

.mgc_eye_line:before {
  content: "\ed2d";
  color: #09244b;
}

.mgc_eyebrow_fill:before {
  content: "\ed2e";
  color: #09244b;
}

.mgc_eyebrow_line:before {
  content: "\ed2f";
  color: #09244b;
}

.mgc_eyeglass_fill:before {
  content: "\ed30";
  color: #09244b;
}

.mgc_eyeglass_line:before {
  content: "\ed31";
  color: #09244b;
}

.mgc_face_fill:before {
  content: "\ed32";
  color: #09244b;
}

.mgc_face_line:before {
  content: "\ed33";
  color: #09244b;
}

.mgc_face_mask_fill:before {
  content: "\ed34";
  color: #09244b;
}

.mgc_face_mask_line:before {
  content: "\ed35";
  color: #09244b;
}

.mgc_facebook_fill:before {
  content: "\ed36";
  color: #09244b;
}

.mgc_facebook_line:before {
  content: "\ed37";
  color: #09244b;
}

.mgc_faceid_fill:before {
  content: "\ed38";
  color: #09244b;
}

.mgc_faceid_line:before {
  content: "\ed39";
  color: #09244b;
}

.mgc_factory_2_fill:before {
  content: "\ed3a";
  color: #09244b;
}

.mgc_factory_2_line:before {
  content: "\ed3b";
  color: #09244b;
}

.mgc_factory_fill:before {
  content: "\ed3c";
  color: #09244b;
}

.mgc_factory_line:before {
  content: "\ed3d";
  color: #09244b;
}

.mgc_fahrenheit_fill:before {
  content: "\ed3e";
  color: #09244b;
}

.mgc_fahrenheit_line:before {
  content: "\ed3f";
  color: #09244b;
}

.mgc_fan_2_fill:before {
  content: "\ed40";
  color: #09244b;
}

.mgc_fan_2_line:before {
  content: "\ed41";
  color: #09244b;
}

.mgc_fan_direction_down_fill:before {
  content: "\ed42";
  color: #09244b;
}

.mgc_fan_direction_down_line:before {
  content: "\ed43";
  color: #09244b;
}

.mgc_fan_direction_front_fill:before {
  content: "\ed44";
  color: #09244b;
}

.mgc_fan_direction_front_line:before {
  content: "\ed45";
  color: #09244b;
}

.mgc_fan_direction_up_fill:before {
  content: "\ed46";
  color: #09244b;
}

.mgc_fan_direction_up_line:before {
  content: "\ed47";
  color: #09244b;
}

.mgc_fan_fill:before {
  content: "\ed48";
  color: #09244b;
}

.mgc_fan_line:before {
  content: "\ed49";
  color: #09244b;
}

.mgc_fast_forward_fill:before {
  content: "\ed4a";
  color: #09244b;
}

.mgc_fast_forward_line:before {
  content: "\ed4b";
  color: #09244b;
}

.mgc_fast_rewind_fill:before {
  content: "\ed4c";
  color: #09244b;
}

.mgc_fast_rewind_line:before {
  content: "\ed4d";
  color: #09244b;
}

.mgc_father_christmas_fill:before {
  content: "\ed4e";
  color: #09244b;
}

.mgc_father_christmas_line:before {
  content: "\ed4f";
  color: #09244b;
}

.mgc_fault_fill:before {
  content: "\ed50";
  color: #09244b;
}

.mgc_fault_line:before {
  content: "\ed51";
  color: #09244b;
}

.mgc_fax_fill:before {
  content: "\ed52";
  color: #09244b;
}

.mgc_fax_line:before {
  content: "\ed53";
  color: #09244b;
}

.mgc_feeder_fill:before {
  content: "\ed54";
  color: #09244b;
}

.mgc_feeder_line:before {
  content: "\ed55";
  color: #09244b;
}

.mgc_female_fill:before {
  content: "\ed56";
  color: #09244b;
}

.mgc_female_line:before {
  content: "\ed57";
  color: #09244b;
}

.mgc_ferris_wheel_fill:before {
  content: "\ed58";
  color: #09244b;
}

.mgc_ferris_wheel_line:before {
  content: "\ed59";
  color: #09244b;
}

.mgc_figma_fill:before {
  content: "\ed5a";
  color: #09244b;
}

.mgc_figma_line:before {
  content: "\ed5b";
  color: #09244b;
}

.mgc_file_certificate_fill:before {
  content: "\ed5c";
  color: #09244b;
}

.mgc_file_certificate_line:before {
  content: "\ed5d";
  color: #09244b;
}

.mgc_file_check_fill:before {
  content: "\ed5e";
  color: #09244b;
}

.mgc_file_check_line:before {
  content: "\ed5f";
  color: #09244b;
}

.mgc_file_code_fill:before {
  content: "\ed60";
  color: #09244b;
}

.mgc_file_code_line:before {
  content: "\ed61";
  color: #09244b;
}

.mgc_file_download_fill:before {
  content: "\ed62";
  color: #09244b;
}

.mgc_file_download_line:before {
  content: "\ed63";
  color: #09244b;
}

.mgc_file_export_fill:before {
  content: "\ed64";
  color: #09244b;
}

.mgc_file_export_line:before {
  content: "\ed65";
  color: #09244b;
}

.mgc_file_fill:before {
  content: "\ed66";
  color: #09244b;
}

.mgc_file_forbid_fill:before {
  content: "\ed67";
  color: #09244b;
}

.mgc_file_forbid_line:before {
  content: "\ed68";
  color: #09244b;
}

.mgc_file_import_fill:before {
  content: "\ed69";
  color: #09244b;
}

.mgc_file_import_line:before {
  content: "\ed6a";
  color: #09244b;
}

.mgc_file_info_fill:before {
  content: "\ed6b";
  color: #09244b;
}

.mgc_file_info_line:before {
  content: "\ed6c";
  color: #09244b;
}

.mgc_file_line:before {
  content: "\ed6d";
  color: #09244b;
}

.mgc_file_locked_fill:before {
  content: "\ed6e";
  color: #09244b;
}

.mgc_file_locked_line:before {
  content: "\ed6f";
  color: #09244b;
}

.mgc_file_more_fill:before {
  content: "\ed70";
  color: #09244b;
}

.mgc_file_more_line:before {
  content: "\ed71";
  color: #09244b;
}

.mgc_file_music_fill:before {
  content: "\ed72";
  color: #09244b;
}

.mgc_file_music_line:before {
  content: "\ed73";
  color: #09244b;
}

.mgc_file_new_fill:before {
  content: "\ed74";
  color: #09244b;
}

.mgc_file_new_line:before {
  content: "\ed75";
  color: #09244b;
}

.mgc_file_search_fill:before {
  content: "\ed76";
  color: #09244b;
}

.mgc_file_search_line:before {
  content: "\ed77";
  color: #09244b;
}

.mgc_file_security_fill:before {
  content: "\ed78";
  color: #09244b;
}

.mgc_file_security_line:before {
  content: "\ed79";
  color: #09244b;
}

.mgc_file_star_fill:before {
  content: "\ed7a";
  color: #09244b;
}

.mgc_file_star_line:before {
  content: "\ed7b";
  color: #09244b;
}

.mgc_file_unknown_fill:before {
  content: "\ed7c";
  color: #09244b;
}

.mgc_file_unknown_line:before {
  content: "\ed7d";
  color: #09244b;
}

.mgc_file_upload_fill:before {
  content: "\ed7e";
  color: #09244b;
}

.mgc_file_upload_line:before {
  content: "\ed7f";
  color: #09244b;
}

.mgc_file_warning_fill:before {
  content: "\ed80";
  color: #09244b;
}

.mgc_file_warning_line:before {
  content: "\ed81";
  color: #09244b;
}

.mgc_file_zip_fill:before {
  content: "\ed82";
  color: #09244b;
}

.mgc_file_zip_line:before {
  content: "\ed83";
  color: #09244b;
}

.mgc_film_fill:before {
  content: "\ed84";
  color: #09244b;
}

.mgc_film_line:before {
  content: "\ed85";
  color: #09244b;
}

.mgc_filter_2_fill:before {
  content: "\ed86";
  color: #09244b;
}

.mgc_filter_2_line:before {
  content: "\ed87";
  color: #09244b;
}

.mgc_filter_3_fill:before {
  content: "\ed88";
  color: #09244b;
}

.mgc_filter_3_line:before {
  content: "\ed89";
  color: #09244b;
}

.mgc_filter_fill:before {
  content: "\ed8a";
  color: #09244b;
}

.mgc_filter_line:before {
  content: "\ed8b";
  color: #09244b;
}

.mgc_finger_press_fill:before {
  content: "\ed8c";
  color: #09244b;
}

.mgc_finger_press_line:before {
  content: "\ed8d";
  color: #09244b;
}

.mgc_finger_rock_fill:before {
  content: "\ed8e";
  color: #09244b;
}

.mgc_finger_rock_line:before {
  content: "\ed8f";
  color: #09244b;
}

.mgc_finger_swipe_fill:before {
  content: "\ed90";
  color: #09244b;
}

.mgc_finger_swipe_line:before {
  content: "\ed91";
  color: #09244b;
}

.mgc_finger_tap_fill:before {
  content: "\ed92";
  color: #09244b;
}

.mgc_finger_tap_line:before {
  content: "\ed93";
  color: #09244b;
}

.mgc_fingerprint_2_fill:before {
  content: "\ed94";
  color: #09244b;
}

.mgc_fingerprint_2_line:before {
  content: "\ed95";
  color: #09244b;
}

.mgc_fingerprint_fill:before {
  content: "\ed96";
  color: #09244b;
}

.mgc_fingerprint_line:before {
  content: "\ed97";
  color: #09244b;
}

.mgc_fire_fill:before {
  content: "\ed98";
  color: #09244b;
}

.mgc_fire_line:before {
  content: "\ed99";
  color: #09244b;
}

.mgc_firecracker_fill:before {
  content: "\ed9a";
  color: #09244b;
}

.mgc_firecracker_line:before {
  content: "\ed9b";
  color: #09244b;
}

.mgc_firefox_fill:before {
  content: "\ed9c";
  color: #09244b;
}

.mgc_firefox_line:before {
  content: "\ed9d";
  color: #09244b;
}

.mgc_firework_fill:before {
  content: "\ed9e";
  color: #09244b;
}

.mgc_firework_line:before {
  content: "\ed9f";
  color: #09244b;
}

.mgc_first_aid_kit_fill:before {
  content: "\eda0";
  color: #09244b;
}

.mgc_first_aid_kit_line:before {
  content: "\eda1";
  color: #09244b;
}

.mgc_fish_fill:before {
  content: "\eda2";
  color: #09244b;
}

.mgc_fish_line:before {
  content: "\eda3";
  color: #09244b;
}

.mgc_fitness_fill:before {
  content: "\eda4";
  color: #09244b;
}

.mgc_fitness_line:before {
  content: "\eda5";
  color: #09244b;
}

.mgc_flag_1_fill:before {
  content: "\eda6";
  color: #09244b;
}

.mgc_flag_1_line:before {
  content: "\eda7";
  color: #09244b;
}

.mgc_flag_2_fill:before {
  content: "\eda8";
  color: #09244b;
}

.mgc_flag_2_line:before {
  content: "\eda9";
  color: #09244b;
}

.mgc_flag_3_fill:before {
  content: "\edaa";
  color: #09244b;
}

.mgc_flag_3_line:before {
  content: "\edab";
  color: #09244b;
}

.mgc_flag_4_fill:before {
  content: "\edac";
  color: #09244b;
}

.mgc_flag_4_line:before {
  content: "\edad";
  color: #09244b;
}

.mgc_flame_fill:before {
  content: "\edae";
  color: #09244b;
}

.mgc_flame_line:before {
  content: "\edaf";
  color: #09244b;
}

.mgc_flash_circle_fill:before {
  content: "\edb0";
  color: #09244b;
}

.mgc_flash_circle_line:before {
  content: "\edb1";
  color: #09244b;
}

.mgc_flash_fill:before {
  content: "\edb2";
  color: #09244b;
}

.mgc_flash_line:before {
  content: "\edb3";
  color: #09244b;
}

.mgc_flashlight_fill:before {
  content: "\edb4";
  color: #09244b;
}

.mgc_flashlight_line:before {
  content: "\edb5";
  color: #09244b;
}

.mgc_flask_2_fill:before {
  content: "\edb6";
  color: #09244b;
}

.mgc_flask_2_line:before {
  content: "\edb7";
  color: #09244b;
}

.mgc_flask_3_fill:before {
  content: "\edb8";
  color: #09244b;
}

.mgc_flask_3_line:before {
  content: "\edb9";
  color: #09244b;
}

.mgc_flask_fill:before {
  content: "\edba";
  color: #09244b;
}

.mgc_flask_line:before {
  content: "\edbb";
  color: #09244b;
}

.mgc_flight_inflight_fill:before {
  content: "\edbc";
  color: #09244b;
}

.mgc_flight_inflight_line:before {
  content: "\edbd";
  color: #09244b;
}

.mgc_flight_land_fill:before {
  content: "\edbe";
  color: #09244b;
}

.mgc_flight_land_line:before {
  content: "\edbf";
  color: #09244b;
}

.mgc_flight_takeoff_fill:before {
  content: "\edc0";
  color: #09244b;
}

.mgc_flight_takeoff_line:before {
  content: "\edc1";
  color: #09244b;
}

.mgc_flip_horizontal_fill:before {
  content: "\edc2";
  color: #09244b;
}

.mgc_flip_horizontal_line:before {
  content: "\edc3";
  color: #09244b;
}

.mgc_flip_vertical_fill:before {
  content: "\edc4";
  color: #09244b;
}

.mgc_flip_vertical_line:before {
  content: "\edc5";
  color: #09244b;
}

.mgc_floating_dust_fill:before {
  content: "\edc6";
  color: #09244b;
}

.mgc_floating_dust_line:before {
  content: "\edc7";
  color: #09244b;
}

.mgc_flower_2_fill:before {
  content: "\edc8";
  color: #09244b;
}

.mgc_flower_2_line:before {
  content: "\edc9";
  color: #09244b;
}

.mgc_flower_3_fill:before {
  content: "\edca";
  color: #09244b;
}

.mgc_flower_3_line:before {
  content: "\edcb";
  color: #09244b;
}

.mgc_flower_4_fill:before {
  content: "\edcc";
  color: #09244b;
}

.mgc_flower_4_line:before {
  content: "\edcd";
  color: #09244b;
}

.mgc_flower_5_fill:before {
  content: "\edce";
  color: #09244b;
}

.mgc_flower_5_line:before {
  content: "\edcf";
  color: #09244b;
}

.mgc_flower_fill:before {
  content: "\edd0";
  color: #09244b;
}

.mgc_flower_line:before {
  content: "\edd1";
  color: #09244b;
}

.mgc_flowerpot_fill:before {
  content: "\edd2";
  color: #09244b;
}

.mgc_flowerpot_line:before {
  content: "\edd3";
  color: #09244b;
}

.mgc_fog_fill:before {
  content: "\edd4";
  color: #09244b;
}

.mgc_fog_line:before {
  content: "\edd5";
  color: #09244b;
}

.mgc_fold_horizontal_fill:before {
  content: "\edd6";
  color: #09244b;
}

.mgc_fold_horizontal_line:before {
  content: "\edd7";
  color: #09244b;
}

.mgc_fold_vertical_fill:before {
  content: "\edd8";
  color: #09244b;
}

.mgc_fold_vertical_line:before {
  content: "\edd9";
  color: #09244b;
}

.mgc_folder_2_fill:before {
  content: "\edda";
  color: #09244b;
}

.mgc_folder_2_line:before {
  content: "\eddb";
  color: #09244b;
}

.mgc_folder_3_fill:before {
  content: "\eddc";
  color: #09244b;
}

.mgc_folder_3_line:before {
  content: "\eddd";
  color: #09244b;
}

.mgc_folder_check_fill:before {
  content: "\edde";
  color: #09244b;
}

.mgc_folder_check_line:before {
  content: "\eddf";
  color: #09244b;
}

.mgc_folder_delete_fill:before {
  content: "\ede0";
  color: #09244b;
}

.mgc_folder_delete_line:before {
  content: "\ede1";
  color: #09244b;
}

.mgc_folder_download_fill:before {
  content: "\ede2";
  color: #09244b;
}

.mgc_folder_download_line:before {
  content: "\ede3";
  color: #09244b;
}

.mgc_folder_fill:before {
  content: "\ede4";
  color: #09244b;
}

.mgc_folder_forbid_fill:before {
  content: "\ede5";
  color: #09244b;
}

.mgc_folder_forbid_line:before {
  content: "\ede6";
  color: #09244b;
}

.mgc_folder_info_fill:before {
  content: "\ede7";
  color: #09244b;
}

.mgc_folder_info_line:before {
  content: "\ede8";
  color: #09244b;
}

.mgc_folder_line:before {
  content: "\ede9";
  color: #09244b;
}

.mgc_folder_locked_2_fill:before {
  content: "\edea";
  color: #09244b;
}

.mgc_folder_locked_2_line:before {
  content: "\edeb";
  color: #09244b;
}

.mgc_folder_locked_fill:before {
  content: "\edec";
  color: #09244b;
}

.mgc_folder_locked_line:before {
  content: "\eded";
  color: #09244b;
}

.mgc_folder_minus_fill:before {
  content: "\edee";
  color: #09244b;
}

.mgc_folder_minus_line:before {
  content: "\edef";
  color: #09244b;
}

.mgc_folder_more_fill:before {
  content: "\edf0";
  color: #09244b;
}

.mgc_folder_more_line:before {
  content: "\edf1";
  color: #09244b;
}

.mgc_folder_open_2_fill:before {
  content: "\edf2";
  color: #09244b;
}

.mgc_folder_open_2_line:before {
  content: "\edf3";
  color: #09244b;
}

.mgc_folder_open_fill:before {
  content: "\edf4";
  color: #09244b;
}

.mgc_folder_open_line:before {
  content: "\edf5";
  color: #09244b;
}

.mgc_folder_security_fill:before {
  content: "\edf6";
  color: #09244b;
}

.mgc_folder_security_line:before {
  content: "\edf7";
  color: #09244b;
}

.mgc_folder_star_fill:before {
  content: "\edf8";
  color: #09244b;
}

.mgc_folder_star_line:before {
  content: "\edf9";
  color: #09244b;
}

.mgc_folder_upload_fill:before {
  content: "\edfa";
  color: #09244b;
}

.mgc_folder_upload_line:before {
  content: "\edfb";
  color: #09244b;
}

.mgc_folder_warning_fill:before {
  content: "\edfc";
  color: #09244b;
}

.mgc_folder_warning_line:before {
  content: "\edfd";
  color: #09244b;
}

.mgc_folder_zip_fill:before {
  content: "\edfe";
  color: #09244b;
}

.mgc_folder_zip_line:before {
  content: "\edff";
  color: #09244b;
}

.mgc_folders_fill:before {
  content: "\ee00";
  color: #09244b;
}

.mgc_folders_line:before {
  content: "\ee01";
  color: #09244b;
}

.mgc_folding_fan_fill:before {
  content: "\ee02";
  color: #09244b;
}

.mgc_folding_fan_line:before {
  content: "\ee03";
  color: #09244b;
}

.mgc_follow_fill:before {
  content: "\ee04";
  color: #09244b;
}

.mgc_follow_line:before {
  content: "\ee05";
  color: #09244b;
}

.mgc_font_fill:before {
  content: "\ee06";
  color: #09244b;
}

.mgc_font_line:before {
  content: "\ee07";
  color: #09244b;
}

.mgc_font_size_fill:before {
  content: "\ee08";
  color: #09244b;
}

.mgc_font_size_line:before {
  content: "\ee09";
  color: #09244b;
}

.mgc_foot_fill:before {
  content: "\ee0a";
  color: #09244b;
}

.mgc_foot_line:before {
  content: "\ee0b";
  color: #09244b;
}

.mgc_football_fill:before {
  content: "\ee0c";
  color: #09244b;
}

.mgc_football_line:before {
  content: "\ee0d";
  color: #09244b;
}

.mgc_forbid_circle_fill:before {
  content: "\ee0e";
  color: #09244b;
}

.mgc_forbid_circle_line:before {
  content: "\ee0f";
  color: #09244b;
}

.mgc_fork_fill:before {
  content: "\ee10";
  color: #09244b;
}

.mgc_fork_knife_fill:before {
  content: "\ee11";
  color: #09244b;
}

.mgc_fork_knife_line:before {
  content: "\ee12";
  color: #09244b;
}

.mgc_fork_line:before {
  content: "\ee13";
  color: #09244b;
}

.mgc_fork_spoon_fill:before {
  content: "\ee14";
  color: #09244b;
}

.mgc_fork_spoon_line:before {
  content: "\ee15";
  color: #09244b;
}

.mgc_formula_fill:before {
  content: "\ee16";
  color: #09244b;
}

.mgc_formula_line:before {
  content: "\ee17";
  color: #09244b;
}

.mgc_forward_2_fill:before {
  content: "\ee18";
  color: #09244b;
}

.mgc_forward_2_line:before {
  content: "\ee19";
  color: #09244b;
}

.mgc_forward_fill:before {
  content: "\ee1a";
  color: #09244b;
}

.mgc_forward_line:before {
  content: "\ee1b";
  color: #09244b;
}

.mgc_four_wheel_drive_fill:before {
  content: "\ee1c";
  color: #09244b;
}

.mgc_four_wheel_drive_line:before {
  content: "\ee1d";
  color: #09244b;
}

.mgc_frame_fill:before {
  content: "\ee1e";
  color: #09244b;
}

.mgc_frame_line:before {
  content: "\ee1f";
  color: #09244b;
}

.mgc_fridge_fill:before {
  content: "\ee20";
  color: #09244b;
}

.mgc_fridge_line:before {
  content: "\ee21";
  color: #09244b;
}

.mgc_fried_egg_fill:before {
  content: "\ee22";
  color: #09244b;
}

.mgc_fried_egg_line:before {
  content: "\ee23";
  color: #09244b;
}

.mgc_fries_fill:before {
  content: "\ee24";
  color: #09244b;
}

.mgc_fries_line:before {
  content: "\ee25";
  color: #09244b;
}

.mgc_front_fog_lights_fill:before {
  content: "\ee26";
  color: #09244b;
}

.mgc_front_fog_lights_line:before {
  content: "\ee27";
  color: #09244b;
}

.mgc_front_windshield_defroster_fill:before {
  content: "\ee28";
  color: #09244b;
}

.mgc_front_windshield_defroster_line:before {
  content: "\ee29";
  color: #09244b;
}

.mgc_full_moon_fill:before {
  content: "\ee2a";
  color: #09244b;
}

.mgc_full_moon_line:before {
  content: "\ee2b";
  color: #09244b;
}

.mgc_fullscreen_2_fill:before {
  content: "\ee2c";
  color: #09244b;
}

.mgc_fullscreen_2_line:before {
  content: "\ee2d";
  color: #09244b;
}

.mgc_fullscreen_exit_2_fill:before {
  content: "\ee2e";
  color: #09244b;
}

.mgc_fullscreen_exit_2_line:before {
  content: "\ee2f";
  color: #09244b;
}

.mgc_fullscreen_exit_fill:before {
  content: "\ee30";
  color: #09244b;
}

.mgc_fullscreen_exit_line:before {
  content: "\ee31";
  color: #09244b;
}

.mgc_fullscreen_fill:before {
  content: "\ee32";
  color: #09244b;
}

.mgc_fullscreen_line:before {
  content: "\ee33";
  color: #09244b;
}

.mgc_game_1_fill:before {
  content: "\ee34";
  color: #09244b;
}

.mgc_game_1_line:before {
  content: "\ee35";
  color: #09244b;
}

.mgc_game_2_fill:before {
  content: "\ee36";
  color: #09244b;
}

.mgc_game_2_line:before {
  content: "\ee37";
  color: #09244b;
}

.mgc_gas_station_fill:before {
  content: "\ee38";
  color: #09244b;
}

.mgc_gas_station_line:before {
  content: "\ee39";
  color: #09244b;
}

.mgc_Gemini_fill:before {
  content: "\ee3a";
  color: #09244b;
}

.mgc_Gemini_line:before {
  content: "\ee3b";
  color: #09244b;
}

.mgc_gesture_unlock_fill:before {
  content: "\ee3c";
  color: #09244b;
}

.mgc_gesture_unlock_line:before {
  content: "\ee3d";
  color: #09244b;
}

.mgc_ghost_fill:before {
  content: "\ee3e";
  color: #09244b;
}

.mgc_ghost_line:before {
  content: "\ee3f";
  color: #09244b;
}

.mgc_gift_2_fill:before {
  content: "\ee40";
  color: #09244b;
}

.mgc_gift_2_line:before {
  content: "\ee41";
  color: #09244b;
}

.mgc_gift_card_fill:before {
  content: "\ee42";
  color: #09244b;
}

.mgc_gift_card_line:before {
  content: "\ee43";
  color: #09244b;
}

.mgc_gift_fill:before {
  content: "\ee44";
  color: #09244b;
}

.mgc_gift_line:before {
  content: "\ee45";
  color: #09244b;
}

.mgc_git_branch_fill:before {
  content: "\ee46";
  color: #09244b;
}

.mgc_git_branch_line:before {
  content: "\ee47";
  color: #09244b;
}

.mgc_git_commit_fill:before {
  content: "\ee48";
  color: #09244b;
}

.mgc_git_commit_line:before {
  content: "\ee49";
  color: #09244b;
}

.mgc_git_compare_fill:before {
  content: "\ee4a";
  color: #09244b;
}

.mgc_git_compare_line:before {
  content: "\ee4b";
  color: #09244b;
}

.mgc_git_lab_fill:before {
  content: "\ee4c";
  color: #09244b;
}

.mgc_git_lab_line:before {
  content: "\ee4d";
  color: #09244b;
}

.mgc_git_merge_fill:before {
  content: "\ee4e";
  color: #09244b;
}

.mgc_git_merge_line:before {
  content: "\ee4f";
  color: #09244b;
}

.mgc_git_pull_request_close_fill:before {
  content: "\ee50";
  color: #09244b;
}

.mgc_git_pull_request_close_line:before {
  content: "\ee51";
  color: #09244b;
}

.mgc_git_pull_request_fill:before {
  content: "\ee52";
  color: #09244b;
}

.mgc_git_pull_request_line:before {
  content: "\ee53";
  color: #09244b;
}

.mgc_github_2_fill:before {
  content: "\ee54";
  color: #09244b;
}

.mgc_github_2_line:before {
  content: "\ee55";
  color: #09244b;
}

.mgc_github_fill:before {
  content: "\ee56";
  color: #09244b;
}

.mgc_github_line:before {
  content: "\ee57";
  color: #09244b;
}

.mgc_glass_cup_fill:before {
  content: "\ee58";
  color: #09244b;
}

.mgc_glass_cup_line:before {
  content: "\ee59";
  color: #09244b;
}

.mgc_globe_2_fill:before {
  content: "\ee5a";
  color: #09244b;
}

.mgc_globe_2_line:before {
  content: "\ee5b";
  color: #09244b;
}

.mgc_globe_fill:before {
  content: "\ee5c";
  color: #09244b;
}

.mgc_globe_line:before {
  content: "\ee5d";
  color: #09244b;
}

.mgc_glove_fill:before {
  content: "\ee5e";
  color: #09244b;
}

.mgc_glove_line:before {
  content: "\ee5f";
  color: #09244b;
}

.mgc_google_fill:before {
  content: "\ee60";
  color: #09244b;
}

.mgc_google_line:before {
  content: "\ee61";
  color: #09244b;
}

.mgc_google_play_fill:before {
  content: "\ee62";
  color: #09244b;
}

.mgc_google_play_line:before {
  content: "\ee63";
  color: #09244b;
}

.mgc_government_fill:before {
  content: "\ee64";
  color: #09244b;
}

.mgc_government_line:before {
  content: "\ee65";
  color: #09244b;
}

.mgc_gradienter_fill:before {
  content: "\ee66";
  color: #09244b;
}

.mgc_gradienter_line:before {
  content: "\ee67";
  color: #09244b;
}

.mgc_grass_fill:before {
  content: "\ee68";
  color: #09244b;
}

.mgc_grass_line:before {
  content: "\ee69";
  color: #09244b;
}

.mgc_greatwall_fill:before {
  content: "\ee6a";
  color: #09244b;
}

.mgc_greatwall_line:before {
  content: "\ee6b";
  color: #09244b;
}

.mgc_grid_2_fill:before {
  content: "\ee6c";
  color: #09244b;
}

.mgc_grid_2_line:before {
  content: "\ee6d";
  color: #09244b;
}

.mgc_grid_fill:before {
  content: "\ee6e";
  color: #09244b;
}

.mgc_grid_line:before {
  content: "\ee6f";
  color: #09244b;
}

.mgc_grok_fill:before {
  content: "\ee70";
  color: #09244b;
}

.mgc_grok_line:before {
  content: "\ee71";
  color: #09244b;
}

.mgc_group_2_fill:before {
  content: "\ee72";
  color: #09244b;
}

.mgc_group_2_line:before {
  content: "\ee73";
  color: #09244b;
}

.mgc_group_3_fill:before {
  content: "\ee74";
  color: #09244b;
}

.mgc_group_3_line:before {
  content: "\ee75";
  color: #09244b;
}

.mgc_group_fill:before {
  content: "\ee76";
  color: #09244b;
}

.mgc_group_line:before {
  content: "\ee77";
  color: #09244b;
}

.mgc_guitar_fill:before {
  content: "\ee78";
  color: #09244b;
}

.mgc_guitar_line:before {
  content: "\ee79";
  color: #09244b;
}

.mgc_gumroad_fill:before {
  content: "\ee7a";
  color: #09244b;
}

.mgc_gumroad_line:before {
  content: "\ee7b";
  color: #09244b;
}

.mgc_hail_fill:before {
  content: "\ee7c";
  color: #09244b;
}

.mgc_hail_line:before {
  content: "\ee7d";
  color: #09244b;
}

.mgc_hair_2_fill:before {
  content: "\ee7e";
  color: #09244b;
}

.mgc_hair_2_line:before {
  content: "\ee7f";
  color: #09244b;
}

.mgc_hair_fill:before {
  content: "\ee80";
  color: #09244b;
}

.mgc_hair_line:before {
  content: "\ee81";
  color: #09244b;
}

.mgc_hamburger_fill:before {
  content: "\ee82";
  color: #09244b;
}

.mgc_hamburger_line:before {
  content: "\ee83";
  color: #09244b;
}

.mgc_hammer_fill:before {
  content: "\ee84";
  color: #09244b;
}

.mgc_hammer_line:before {
  content: "\ee85";
  color: #09244b;
}

.mgc_hand_card_fill:before {
  content: "\ee86";
  color: #09244b;
}

.mgc_hand_card_line:before {
  content: "\ee87";
  color: #09244b;
}

.mgc_hand_fill:before {
  content: "\ee88";
  color: #09244b;
}

.mgc_hand_finger_2_fill:before {
  content: "\ee89";
  color: #09244b;
}

.mgc_hand_finger_2_line:before {
  content: "\ee8a";
  color: #09244b;
}

.mgc_hand_finger_fill:before {
  content: "\ee8b";
  color: #09244b;
}

.mgc_hand_finger_line:before {
  content: "\ee8c";
  color: #09244b;
}

.mgc_hand_grab_fill:before {
  content: "\ee8d";
  color: #09244b;
}

.mgc_hand_grab_line:before {
  content: "\ee8e";
  color: #09244b;
}

.mgc_hand_heart_fill:before {
  content: "\ee8f";
  color: #09244b;
}

.mgc_hand_heart_line:before {
  content: "\ee90";
  color: #09244b;
}

.mgc_hand_line:before {
  content: "\ee91";
  color: #09244b;
}

.mgc_hand_two_fingers_fill:before {
  content: "\ee92";
  color: #09244b;
}

.mgc_hand_two_fingers_line:before {
  content: "\ee93";
  color: #09244b;
}

.mgc_hands_clapping_fill:before {
  content: "\ee94";
  color: #09244b;
}

.mgc_hands_clapping_line:before {
  content: "\ee95";
  color: #09244b;
}

.mgc_happy_fill:before {
  content: "\ee96";
  color: #09244b;
}

.mgc_happy_line:before {
  content: "\ee97";
  color: #09244b;
}

.mgc_hashtag_fill:before {
  content: "\ee98";
  color: #09244b;
}

.mgc_hashtag_line:before {
  content: "\ee99";
  color: #09244b;
}

.mgc_hat_2_fill:before {
  content: "\ee9a";
  color: #09244b;
}

.mgc_hat_2_line:before {
  content: "\ee9b";
  color: #09244b;
}

.mgc_hat_fill:before {
  content: "\ee9c";
  color: #09244b;
}

.mgc_hat_line:before {
  content: "\ee9d";
  color: #09244b;
}

.mgc_haze_fill:before {
  content: "\ee9e";
  color: #09244b;
}

.mgc_haze_line:before {
  content: "\ee9f";
  color: #09244b;
}

.mgc_head_fill:before {
  content: "\eea0";
  color: #09244b;
}

.mgc_head_line:before {
  content: "\eea1";
  color: #09244b;
}

.mgc_Heading_1_fill:before {
  content: "\eea2";
  color: #09244b;
}

.mgc_Heading_1_line:before {
  content: "\eea3";
  color: #09244b;
}

.mgc_Heading_2_fill:before {
  content: "\eea4";
  color: #09244b;
}

.mgc_Heading_2_line:before {
  content: "\eea5";
  color: #09244b;
}

.mgc_Heading_3_fill:before {
  content: "\eea6";
  color: #09244b;
}

.mgc_Heading_3_line:before {
  content: "\eea7";
  color: #09244b;
}

.mgc_headphone_2_fill:before {
  content: "\eea8";
  color: #09244b;
}

.mgc_headphone_2_line:before {
  content: "\eea9";
  color: #09244b;
}

.mgc_headphone_fill:before {
  content: "\eeaa";
  color: #09244b;
}

.mgc_headphone_line:before {
  content: "\eeab";
  color: #09244b;
}

.mgc_heart_crack_fill:before {
  content: "\eeac";
  color: #09244b;
}

.mgc_heart_crack_line:before {
  content: "\eead";
  color: #09244b;
}

.mgc_heart_fill:before {
  content: "\eeae";
  color: #09244b;
}

.mgc_heart_half_fill:before {
  content: "\eeaf";
  color: #09244b;
}

.mgc_heart_half_line:before {
  content: "\eeb0";
  color: #09244b;
}

.mgc_heart_hand_fill:before {
  content: "\eeb1";
  color: #09244b;
}

.mgc_heart_hand_line:before {
  content: "\eeb2";
  color: #09244b;
}

.mgc_heart_line:before {
  content: "\eeb3";
  color: #09244b;
}

.mgc_heartbeat_2_fill:before {
  content: "\eeb4";
  color: #09244b;
}

.mgc_heartbeat_2_line:before {
  content: "\eeb5";
  color: #09244b;
}

.mgc_heartbeat_fill:before {
  content: "\eeb6";
  color: #09244b;
}

.mgc_heartbeat_line:before {
  content: "\eeb7";
  color: #09244b;
}

.mgc_heavy_rain_fill:before {
  content: "\eeb8";
  color: #09244b;
}

.mgc_heavy_rain_line:before {
  content: "\eeb9";
  color: #09244b;
}

.mgc_heavy_rainstorm_fill:before {
  content: "\eeba";
  color: #09244b;
}

.mgc_heavy_rainstorm_line:before {
  content: "\eebb";
  color: #09244b;
}

.mgc_heavy_snow_fill:before {
  content: "\eebc";
  color: #09244b;
}

.mgc_heavy_snow_line:before {
  content: "\eebd";
  color: #09244b;
}

.mgc_heavy_snowstorm_fill:before {
  content: "\eebe";
  color: #09244b;
}

.mgc_heavy_snowstorm_line:before {
  content: "\eebf";
  color: #09244b;
}

.mgc_hemisphere_2_fill:before {
  content: "\eec0";
  color: #09244b;
}

.mgc_hemisphere_2_line:before {
  content: "\eec1";
  color: #09244b;
}

.mgc_hemisphere_fill:before {
  content: "\eec2";
  color: #09244b;
}

.mgc_hemisphere_line:before {
  content: "\eec3";
  color: #09244b;
}

.mgc_hexagon_fill:before {
  content: "\eec4";
  color: #09244b;
}

.mgc_hexagon_line:before {
  content: "\eec5";
  color: #09244b;
}

.mgc_hexagons_2_fill:before {
  content: "\eec6";
  color: #09244b;
}

.mgc_hexagons_2_line:before {
  content: "\eec7";
  color: #09244b;
}

.mgc_hexagons_fill:before {
  content: "\eec8";
  color: #09244b;
}

.mgc_hexagons_line:before {
  content: "\eec9";
  color: #09244b;
}

.mgc_high_temperature_fill:before {
  content: "\eeca";
  color: #09244b;
}

.mgc_high_temperature_line:before {
  content: "\eecb";
  color: #09244b;
}

.mgc_high_voltage_power_fill:before {
  content: "\eecc";
  color: #09244b;
}

.mgc_high_voltage_power_line:before {
  content: "\eecd";
  color: #09244b;
}

.mgc_hight_beam_headlights_fill:before {
  content: "\eece";
  color: #09244b;
}

.mgc_hight_beam_headlights_line:before {
  content: "\eecf";
  color: #09244b;
}

.mgc_history_2_fill:before {
  content: "\eed0";
  color: #09244b;
}

.mgc_history_2_line:before {
  content: "\eed1";
  color: #09244b;
}

.mgc_history_anticlockwise_fill:before {
  content: "\eed2";
  color: #09244b;
}

.mgc_history_anticlockwise_line:before {
  content: "\eed3";
  color: #09244b;
}

.mgc_history_fill:before {
  content: "\eed4";
  color: #09244b;
}

.mgc_history_line:before {
  content: "\eed5";
  color: #09244b;
}

.mgc_hoe_fill:before {
  content: "\eed6";
  color: #09244b;
}

.mgc_hoe_line:before {
  content: "\eed7";
  color: #09244b;
}

.mgc_home_1_fill:before {
  content: "\eed8";
  color: #09244b;
}

.mgc_home_1_line:before {
  content: "\eed9";
  color: #09244b;
}

.mgc_home_2_fill:before {
  content: "\eeda";
  color: #09244b;
}

.mgc_home_2_line:before {
  content: "\eedb";
  color: #09244b;
}

.mgc_home_3_fill:before {
  content: "\eedc";
  color: #09244b;
}

.mgc_home_3_line:before {
  content: "\eedd";
  color: #09244b;
}

.mgc_home_4_fill:before {
  content: "\eede";
  color: #09244b;
}

.mgc_home_4_line:before {
  content: "\eedf";
  color: #09244b;
}

.mgc_home_5_fill:before {
  content: "\eee0";
  color: #09244b;
}

.mgc_home_5_line:before {
  content: "\eee1";
  color: #09244b;
}

.mgc_home_6_fill:before {
  content: "\eee2";
  color: #09244b;
}

.mgc_home_6_line:before {
  content: "\eee3";
  color: #09244b;
}

.mgc_home_7_fill:before {
  content: "\eee4";
  color: #09244b;
}

.mgc_home_7_line:before {
  content: "\eee5";
  color: #09244b;
}

.mgc_home_wifi_fill:before {
  content: "\eee6";
  color: #09244b;
}

.mgc_home_wifi_line:before {
  content: "\eee7";
  color: #09244b;
}

.mgc_homepod_fill:before {
  content: "\eee8";
  color: #09244b;
}

.mgc_homepod_line:before {
  content: "\eee9";
  color: #09244b;
}

.mgc_homepod_mini_fill:before {
  content: "\eeea";
  color: #09244b;
}

.mgc_homepod_mini_line:before {
  content: "\eeeb";
  color: #09244b;
}

.mgc_hood_fill:before {
  content: "\eeec";
  color: #09244b;
}

.mgc_hood_line:before {
  content: "\eeed";
  color: #09244b;
}

.mgc_horn_2_fill:before {
  content: "\eeee";
  color: #09244b;
}

.mgc_horn_2_line:before {
  content: "\eeef";
  color: #09244b;
}

.mgc_horn_fill:before {
  content: "\eef0";
  color: #09244b;
}

.mgc_horn_line:before {
  content: "\eef1";
  color: #09244b;
}

.mgc_hospital_fill:before {
  content: "\eef2";
  color: #09244b;
}

.mgc_hospital_line:before {
  content: "\eef3";
  color: #09244b;
}

.mgc_hotel_fill:before {
  content: "\eef4";
  color: #09244b;
}

.mgc_hotel_line:before {
  content: "\eef5";
  color: #09244b;
}

.mgc_hotkey_fill:before {
  content: "\eef6";
  color: #09244b;
}

.mgc_hotkey_line:before {
  content: "\eef7";
  color: #09244b;
}

.mgc_hours_fill:before {
  content: "\eef8";
  color: #09244b;
}

.mgc_hours_line:before {
  content: "\eef9";
  color: #09244b;
}

.mgc_house_2_fill:before {
  content: "\eefa";
  color: #09244b;
}

.mgc_house_2_line:before {
  content: "\eefb";
  color: #09244b;
}

.mgc_house_fill:before {
  content: "\eefc";
  color: #09244b;
}

.mgc_house_line:before {
  content: "\eefd";
  color: #09244b;
}

.mgc_ice_cream_2_fill:before {
  content: "\eefe";
  color: #09244b;
}

.mgc_ice_cream_2_line:before {
  content: "\eeff";
  color: #09244b;
}

.mgc_ice_cream_fill:before {
  content: "\ef00";
  color: #09244b;
}

.mgc_ice_cream_line:before {
  content: "\ef01";
  color: #09244b;
}

.mgc_IDcard_fill:before {
  content: "\ef02";
  color: #09244b;
}

.mgc_IDcard_line:before {
  content: "\ef03";
  color: #09244b;
}

.mgc_iMac_fill:before {
  content: "\ef04";
  color: #09244b;
}

.mgc_iMac_line:before {
  content: "\ef05";
  color: #09244b;
}

.mgc_inbox_2_fill:before {
  content: "\ef06";
  color: #09244b;
}

.mgc_inbox_2_line:before {
  content: "\ef07";
  color: #09244b;
}

.mgc_inbox_fill:before {
  content: "\ef08";
  color: #09244b;
}

.mgc_inbox_line:before {
  content: "\ef09";
  color: #09244b;
}

.mgc_incognito_mode_fill:before {
  content: "\ef0a";
  color: #09244b;
}

.mgc_incognito_mode_line:before {
  content: "\ef0b";
  color: #09244b;
}

.mgc_indent_decrease_fill:before {
  content: "\ef0c";
  color: #09244b;
}

.mgc_indent_decrease_line:before {
  content: "\ef0d";
  color: #09244b;
}

.mgc_indent_increase_fill:before {
  content: "\ef0e";
  color: #09244b;
}

.mgc_indent_increase_line:before {
  content: "\ef0f";
  color: #09244b;
}

.mgc_information_fill:before {
  content: "\ef10";
  color: #09244b;
}

.mgc_information_line:before {
  content: "\ef11";
  color: #09244b;
}

.mgc_injection_fill:before {
  content: "\ef12";
  color: #09244b;
}

.mgc_injection_line:before {
  content: "\ef13";
  color: #09244b;
}

.mgc_inspect_fill:before {
  content: "\ef14";
  color: #09244b;
}

.mgc_inspect_line:before {
  content: "\ef15";
  color: #09244b;
}

.mgc_instagram_fill:before {
  content: "\ef16";
  color: #09244b;
}

.mgc_instagram_line:before {
  content: "\ef17";
  color: #09244b;
}

.mgc_instrument_fill:before {
  content: "\ef18";
  color: #09244b;
}

.mgc_instrument_line:before {
  content: "\ef19";
  color: #09244b;
}

.mgc_intersect_fill:before {
  content: "\ef1a";
  color: #09244b;
}

.mgc_intersect_line:before {
  content: "\ef1b";
  color: #09244b;
}

.mgc_inventory_fill:before {
  content: "\ef1c";
  color: #09244b;
}

.mgc_inventory_line:before {
  content: "\ef1d";
  color: #09244b;
}

.mgc_invite_fill:before {
  content: "\ef1e";
  color: #09244b;
}

.mgc_invite_line:before {
  content: "\ef1f";
  color: #09244b;
}

.mgc_italic_fill:before {
  content: "\ef20";
  color: #09244b;
}

.mgc_italic_line:before {
  content: "\ef21";
  color: #09244b;
}

.mgc_jeep_fill:before {
  content: "\ef22";
  color: #09244b;
}

.mgc_jeep_line:before {
  content: "\ef23";
  color: #09244b;
}

.mgc_kakao_talk_fill:before {
  content: "\ef24";
  color: #09244b;
}

.mgc_kakao_talk_line:before {
  content: "\ef25";
  color: #09244b;
}

.mgc_key_1_fill:before {
  content: "\ef26";
  color: #09244b;
}

.mgc_key_1_line:before {
  content: "\ef27";
  color: #09244b;
}

.mgc_key_2_fill:before {
  content: "\ef28";
  color: #09244b;
}

.mgc_key_2_line:before {
  content: "\ef29";
  color: #09244b;
}

.mgc_keyboard_2_fill:before {
  content: "\ef2a";
  color: #09244b;
}

.mgc_keyboard_2_line:before {
  content: "\ef2b";
  color: #09244b;
}

.mgc_keyboard_fill:before {
  content: "\ef2c";
  color: #09244b;
}

.mgc_keyboard_line:before {
  content: "\ef2d";
  color: #09244b;
}

.mgc_keyhole_fill:before {
  content: "\ef2e";
  color: #09244b;
}

.mgc_keyhole_line:before {
  content: "\ef2f";
  color: #09244b;
}

.mgc_kingkey_100_tower_fill:before {
  content: "\ef30";
  color: #09244b;
}

.mgc_kingkey_100_tower_line:before {
  content: "\ef31";
  color: #09244b;
}

.mgc_kite_fill:before {
  content: "\ef32";
  color: #09244b;
}

.mgc_kite_line:before {
  content: "\ef33";
  color: #09244b;
}

.mgc_knife_fill:before {
  content: "\ef34";
  color: #09244b;
}

.mgc_knife_line:before {
  content: "\ef35";
  color: #09244b;
}

.mgc_ladder_fill:before {
  content: "\ef36";
  color: #09244b;
}

.mgc_ladder_line:before {
  content: "\ef37";
  color: #09244b;
}

.mgc_lantern_2_fill:before {
  content: "\ef38";
  color: #09244b;
}

.mgc_lantern_2_line:before {
  content: "\ef39";
  color: #09244b;
}

.mgc_lantern_fill:before {
  content: "\ef3a";
  color: #09244b;
}

.mgc_lantern_line:before {
  content: "\ef3b";
  color: #09244b;
}

.mgc_laptop_2_fill:before {
  content: "\ef3c";
  color: #09244b;
}

.mgc_laptop_2_line:before {
  content: "\ef3d";
  color: #09244b;
}

.mgc_laptop_fill:before {
  content: "\ef3e";
  color: #09244b;
}

.mgc_laptop_line:before {
  content: "\ef3f";
  color: #09244b;
}

.mgc_large_arrow_down_fill:before {
  content: "\ef40";
  color: #09244b;
}

.mgc_large_arrow_down_line:before {
  content: "\ef41";
  color: #09244b;
}

.mgc_large_arrow_left_fill:before {
  content: "\ef42";
  color: #09244b;
}

.mgc_large_arrow_left_line:before {
  content: "\ef43";
  color: #09244b;
}

.mgc_large_arrow_right_fill:before {
  content: "\ef44";
  color: #09244b;
}

.mgc_large_arrow_right_line:before {
  content: "\ef45";
  color: #09244b;
}

.mgc_large_arrow_up_fill:before {
  content: "\ef46";
  color: #09244b;
}

.mgc_large_arrow_up_line:before {
  content: "\ef47";
  color: #09244b;
}

.mgc_laugh_fill:before {
  content: "\ef48";
  color: #09244b;
}

.mgc_laugh_line:before {
  content: "\ef49";
  color: #09244b;
}

.mgc_laurel_wreath_fill:before {
  content: "\ef4a";
  color: #09244b;
}

.mgc_laurel_wreath_line:before {
  content: "\ef4b";
  color: #09244b;
}

.mgc_layer_fill:before {
  content: "\ef4c";
  color: #09244b;
}

.mgc_layer_line:before {
  content: "\ef4d";
  color: #09244b;
}

.mgc_layers_fill:before {
  content: "\ef4e";
  color: #09244b;
}

.mgc_layers_line:before {
  content: "\ef4f";
  color: #09244b;
}

.mgc_layout_2_fill:before {
  content: "\ef50";
  color: #09244b;
}

.mgc_layout_2_line:before {
  content: "\ef51";
  color: #09244b;
}

.mgc_layout_3_fill:before {
  content: "\ef52";
  color: #09244b;
}

.mgc_layout_3_line:before {
  content: "\ef53";
  color: #09244b;
}

.mgc_layout_4_fill:before {
  content: "\ef54";
  color: #09244b;
}

.mgc_layout_4_line:before {
  content: "\ef55";
  color: #09244b;
}

.mgc_layout_5_fill:before {
  content: "\ef56";
  color: #09244b;
}

.mgc_layout_5_line:before {
  content: "\ef57";
  color: #09244b;
}

.mgc_layout_6_fill:before {
  content: "\ef58";
  color: #09244b;
}

.mgc_layout_6_line:before {
  content: "\ef59";
  color: #09244b;
}

.mgc_layout_7_fill:before {
  content: "\ef5a";
  color: #09244b;
}

.mgc_layout_7_line:before {
  content: "\ef5b";
  color: #09244b;
}

.mgc_layout_8_fill:before {
  content: "\ef5c";
  color: #09244b;
}

.mgc_layout_8_line:before {
  content: "\ef5d";
  color: #09244b;
}

.mgc_layout_9_fill:before {
  content: "\ef5e";
  color: #09244b;
}

.mgc_layout_9_line:before {
  content: "\ef5f";
  color: #09244b;
}

.mgc_layout_10_fill:before {
  content: "\ef60";
  color: #09244b;
}

.mgc_layout_10_line:before {
  content: "\ef61";
  color: #09244b;
}

.mgc_layout_11_fill:before {
  content: "\ef62";
  color: #09244b;
}

.mgc_layout_11_line:before {
  content: "\ef63";
  color: #09244b;
}

.mgc_layout_bottom_close_fill:before {
  content: "\ef64";
  color: #09244b;
}

.mgc_layout_bottom_close_line:before {
  content: "\ef65";
  color: #09244b;
}

.mgc_layout_bottom_fill:before {
  content: "\ef66";
  color: #09244b;
}

.mgc_layout_bottom_line:before {
  content: "\ef67";
  color: #09244b;
}

.mgc_layout_bottom_open_fill:before {
  content: "\ef68";
  color: #09244b;
}

.mgc_layout_bottom_open_line:before {
  content: "\ef69";
  color: #09244b;
}

.mgc_layout_fill:before {
  content: "\ef6a";
  color: #09244b;
}

.mgc_layout_grid_fill:before {
  content: "\ef6b";
  color: #09244b;
}

.mgc_layout_grid_line:before {
  content: "\ef6c";
  color: #09244b;
}

.mgc_layout_left_fill:before {
  content: "\ef6d";
  color: #09244b;
}

.mgc_layout_left_line:before {
  content: "\ef6e";
  color: #09244b;
}

.mgc_layout_leftbar_close_fill:before {
  content: "\ef6f";
  color: #09244b;
}

.mgc_layout_leftbar_close_line:before {
  content: "\ef70";
  color: #09244b;
}

.mgc_layout_leftbar_open_fill:before {
  content: "\ef71";
  color: #09244b;
}

.mgc_layout_leftbar_open_line:before {
  content: "\ef72";
  color: #09244b;
}

.mgc_layout_line:before {
  content: "\ef73";
  color: #09244b;
}

.mgc_layout_right_fill:before {
  content: "\ef74";
  color: #09244b;
}

.mgc_layout_right_line:before {
  content: "\ef75";
  color: #09244b;
}

.mgc_layout_rightbar_close_fill:before {
  content: "\ef76";
  color: #09244b;
}

.mgc_layout_rightbar_close_line:before {
  content: "\ef77";
  color: #09244b;
}

.mgc_layout_rightbar_open_fill:before {
  content: "\ef78";
  color: #09244b;
}

.mgc_layout_rightbar_open_line:before {
  content: "\ef79";
  color: #09244b;
}

.mgc_layout_top_close_fill:before {
  content: "\ef7a";
  color: #09244b;
}

.mgc_layout_top_close_line:before {
  content: "\ef7b";
  color: #09244b;
}

.mgc_layout_top_fill:before {
  content: "\ef7c";
  color: #09244b;
}

.mgc_layout_top_line:before {
  content: "\ef7d";
  color: #09244b;
}

.mgc_layout_top_open_fill:before {
  content: "\ef7e";
  color: #09244b;
}

.mgc_layout_top_open_line:before {
  content: "\ef7f";
  color: #09244b;
}

.mgc_leaf_2_fill:before {
  content: "\ef80";
  color: #09244b;
}

.mgc_leaf_2_line:before {
  content: "\ef81";
  color: #09244b;
}

.mgc_leaf_3_fill:before {
  content: "\ef82";
  color: #09244b;
}

.mgc_leaf_3_line:before {
  content: "\ef83";
  color: #09244b;
}

.mgc_leaf_fill:before {
  content: "\ef84";
  color: #09244b;
}

.mgc_leaf_line:before {
  content: "\ef85";
  color: #09244b;
}

.mgc_left_fill:before {
  content: "\ef86";
  color: #09244b;
}

.mgc_left_line:before {
  content: "\ef87";
  color: #09244b;
}

.mgc_left_small_fill:before {
  content: "\ef88";
  color: #09244b;
}

.mgc_left_small_line:before {
  content: "\ef89";
  color: #09244b;
}

.mgc_lemon_squeezy_fill:before {
  content: "\ef8a";
  color: #09244b;
}

.mgc_lemon_squeezy_line:before {
  content: "\ef8b";
  color: #09244b;
}

.mgc_Leo_fill:before {
  content: "\ef8c";
  color: #09244b;
}

.mgc_Leo_line:before {
  content: "\ef8d";
  color: #09244b;
}

.mgc_letter_spacing_fill:before {
  content: "\ef8e";
  color: #09244b;
}

.mgc_letter_spacing_line:before {
  content: "\ef8f";
  color: #09244b;
}

.mgc_Libra_fill:before {
  content: "\ef90";
  color: #09244b;
}

.mgc_Libra_line:before {
  content: "\ef91";
  color: #09244b;
}

.mgc_lifebuoy_fill:before {
  content: "\ef92";
  color: #09244b;
}

.mgc_lifebuoy_line:before {
  content: "\ef93";
  color: #09244b;
}

.mgc_light_fill:before {
  content: "\ef94";
  color: #09244b;
}

.mgc_light_line:before {
  content: "\ef95";
  color: #09244b;
}

.mgc_light_snow_fill:before {
  content: "\ef96";
  color: #09244b;
}

.mgc_light_snow_line:before {
  content: "\ef97";
  color: #09244b;
}

.mgc_lighthouse_fill:before {
  content: "\ef98";
  color: #09244b;
}

.mgc_lighthouse_line:before {
  content: "\ef99";
  color: #09244b;
}

.mgc_lightning_fill:before {
  content: "\ef9a";
  color: #09244b;
}

.mgc_lightning_line:before {
  content: "\ef9b";
  color: #09244b;
}

.mgc_line_app_fill:before {
  content: "\ef9c";
  color: #09244b;
}

.mgc_line_app_line:before {
  content: "\ef9d";
  color: #09244b;
}

.mgc_line_fill:before {
  content: "\ef9e";
  color: #09244b;
}

.mgc_line_height_fill:before {
  content: "\ef9f";
  color: #09244b;
}

.mgc_line_height_line:before {
  content: "\efa0";
  color: #09244b;
}

.mgc_line_line:before {
  content: "\efa1";
  color: #09244b;
}

.mgc_linear_fill:before {
  content: "\efa2";
  color: #09244b;
}

.mgc_linear_line:before {
  content: "\efa3";
  color: #09244b;
}

.mgc_link_2_fill:before {
  content: "\efa4";
  color: #09244b;
}

.mgc_link_2_line:before {
  content: "\efa5";
  color: #09244b;
}

.mgc_link_3_fill:before {
  content: "\efa6";
  color: #09244b;
}

.mgc_link_3_line:before {
  content: "\efa7";
  color: #09244b;
}

.mgc_link_fill:before {
  content: "\efa8";
  color: #09244b;
}

.mgc_link_line:before {
  content: "\efa9";
  color: #09244b;
}

.mgc_linkedin_fill:before {
  content: "\efaa";
  color: #09244b;
}

.mgc_linkedin_line:before {
  content: "\efab";
  color: #09244b;
}

.mgc_linux_fill:before {
  content: "\efac";
  color: #09244b;
}

.mgc_linux_line:before {
  content: "\efad";
  color: #09244b;
}

.mgc_lipstick_fill:before {
  content: "\efae";
  color: #09244b;
}

.mgc_lipstick_line:before {
  content: "\efaf";
  color: #09244b;
}

.mgc_list_check_2_fill:before {
  content: "\efb0";
  color: #09244b;
}

.mgc_list_check_2_line:before {
  content: "\efb1";
  color: #09244b;
}

.mgc_list_check_3_fill:before {
  content: "\efb2";
  color: #09244b;
}

.mgc_list_check_3_line:before {
  content: "\efb3";
  color: #09244b;
}

.mgc_list_check_fill:before {
  content: "\efb4";
  color: #09244b;
}

.mgc_list_check_line:before {
  content: "\efb5";
  color: #09244b;
}

.mgc_list_collapse_fill:before {
  content: "\efb6";
  color: #09244b;
}

.mgc_list_collapse_line:before {
  content: "\efb7";
  color: #09244b;
}

.mgc_list_expansion_fill:before {
  content: "\efb8";
  color: #09244b;
}

.mgc_list_expansion_line:before {
  content: "\efb9";
  color: #09244b;
}

.mgc_list_ordered_fill:before {
  content: "\efba";
  color: #09244b;
}

.mgc_list_ordered_line:before {
  content: "\efbb";
  color: #09244b;
}

.mgc_list_search_fill:before {
  content: "\efbc";
  color: #09244b;
}

.mgc_list_search_line:before {
  content: "\efbd";
  color: #09244b;
}

.mgc_live_fill:before {
  content: "\efbe";
  color: #09244b;
}

.mgc_live_line:before {
  content: "\efbf";
  color: #09244b;
}

.mgc_live_location_fill:before {
  content: "\efc0";
  color: #09244b;
}

.mgc_live_location_line:before {
  content: "\efc1";
  color: #09244b;
}

.mgc_live_photo_fill:before {
  content: "\efc2";
  color: #09244b;
}

.mgc_live_photo_line:before {
  content: "\efc3";
  color: #09244b;
}

.mgc_loading_2_fill:before {
  content: "\efc4";
}

.mgc_loading_2_line:before {
  content: "\efc5";
}

.mgc_loading_3_fill .path1:before {
  content: "\efc6";
  color: rgb(9, 36, 75);
  opacity: 0.1;
}

.mgc_loading_3_fill .path2:before {
  content: "\efc7";
  margin-left: -1em;
  color: rgb(9, 36, 75);
}

.mgc_loading_3_line .path1:before {
  content: "\efc8";
  color: rgb(9, 36, 75);
  opacity: 0.1;
}

.mgc_loading_3_line .path2:before {
  content: "\efc9";
  margin-left: -1em;
  color: rgb(9, 36, 75);
}

.mgc_loading_4_fill:before {
  content: "\efca";
}

.mgc_loading_4_line:before {
  content: "\efcb";
}

.mgc_loading_fill:before {
  content: "\efcc";
}

.mgc_loading_line:before {
  content: "\efcd";
}

.mgc_location_2_fill:before {
  content: "\efce";
  color: #09244b;
}

.mgc_location_2_line:before {
  content: "\efcf";
  color: #09244b;
}

.mgc_location_3_fill:before {
  content: "\efd0";
  color: #09244b;
}

.mgc_location_3_line:before {
  content: "\efd1";
  color: #09244b;
}

.mgc_location_fill:before {
  content: "\efd2";
  color: #09244b;
}

.mgc_location_line:before {
  content: "\efd3";
  color: #09244b;
}

.mgc_lock_fill:before {
  content: "\efd4";
  color: #09244b;
}

.mgc_lock_line:before {
  content: "\efd5";
  color: #09244b;
}

.mgc_lollipop_fill:before {
  content: "\efd6";
  color: #09244b;
}

.mgc_lollipop_line:before {
  content: "\efd7";
  color: #09244b;
}

.mgc_look_down_fill:before {
  content: "\efd8";
  color: #09244b;
}

.mgc_look_down_line:before {
  content: "\efd9";
  color: #09244b;
}

.mgc_look_left_fill:before {
  content: "\efda";
  color: #09244b;
}

.mgc_look_left_line:before {
  content: "\efdb";
  color: #09244b;
}

.mgc_look_right_fill:before {
  content: "\efdc";
  color: #09244b;
}

.mgc_look_right_line:before {
  content: "\efdd";
  color: #09244b;
}

.mgc_look_up_fill:before {
  content: "\efde";
  color: #09244b;
}

.mgc_look_up_line:before {
  content: "\efdf";
  color: #09244b;
}

.mgc_lotus_fill:before {
  content: "\efe0";
  color: #09244b;
}

.mgc_lotus_line:before {
  content: "\efe1";
  color: #09244b;
}

.mgc_love_fill:before {
  content: "\efe2";
  color: #09244b;
}

.mgc_love_line:before {
  content: "\efe3";
  color: #09244b;
}

.mgc_low_beam_headlights_fill:before {
  content: "\efe4";
  color: #09244b;
}

.mgc_low_beam_headlights_line:before {
  content: "\efe5";
  color: #09244b;
}

.mgc_low_temperature_fill:before {
  content: "\efe6";
  color: #09244b;
}

.mgc_low_temperature_line:before {
  content: "\efe7";
  color: #09244b;
}

.mgc_luggage_fill:before {
  content: "\efe8";
  color: #09244b;
}

.mgc_luggage_line:before {
  content: "\efe9";
  color: #09244b;
}

.mgc_lungs_fill:before {
  content: "\efea";
  color: #09244b;
}

.mgc_lungs_line:before {
  content: "\efeb";
  color: #09244b;
}

.mgc_magic_1_fill:before {
  content: "\efec";
  color: #09244b;
}

.mgc_magic_1_line:before {
  content: "\efed";
  color: #09244b;
}

.mgc_magic_2_fill:before {
  content: "\efee";
  color: #09244b;
}

.mgc_magic_2_line:before {
  content: "\efef";
  color: #09244b;
}

.mgc_magic_3_fill:before {
  content: "\eff0";
  color: #09244b;
}

.mgc_magic_3_line:before {
  content: "\eff1";
  color: #09244b;
}

.mgc_magic_hat_2_fill:before {
  content: "\eff2";
  color: #09244b;
}

.mgc_magic_hat_2_line:before {
  content: "\eff3";
  color: #09244b;
}

.mgc_magic_hat_fill:before {
  content: "\eff4";
  color: #09244b;
}

.mgc_magic_hat_line:before {
  content: "\eff5";
  color: #09244b;
}

.mgc_magnet_fill:before {
  content: "\eff6";
  color: #09244b;
}

.mgc_magnet_line:before {
  content: "\eff7";
  color: #09244b;
}

.mgc_mail_ai_fill:before {
  content: "\eff8";
  color: #09244b;
}

.mgc_mail_ai_line:before {
  content: "\eff9";
  color: #09244b;
}

.mgc_mail_fill:before {
  content: "\effa";
  color: #09244b;
}

.mgc_mail_line:before {
  content: "\effb";
  color: #09244b;
}

.mgc_mail_open_fill:before {
  content: "\effc";
  color: #09244b;
}

.mgc_mail_open_line:before {
  content: "\effd";
  color: #09244b;
}

.mgc_mail_send_fill:before {
  content: "\effe";
  color: #09244b;
}

.mgc_mail_send_line:before {
  content: "\efff";
  color: #09244b;
}

.mgc_mailbox_fill:before {
  content: "\f000";
  color: #09244b;
}

.mgc_mailbox_line:before {
  content: "\f001";
  color: #09244b;
}

.mgc_male_fill:before {
  content: "\f002";
  color: #09244b;
}

.mgc_male_line:before {
  content: "\f003";
  color: #09244b;
}

.mgc_map_2_fill:before {
  content: "\f004";
  color: #09244b;
}

.mgc_map_2_line:before {
  content: "\f005";
  color: #09244b;
}

.mgc_map_fill:before {
  content: "\f006";
  color: #09244b;
}

.mgc_map_line:before {
  content: "\f007";
  color: #09244b;
}

.mgc_map_pin_fill:before {
  content: "\f008";
  color: #09244b;
}

.mgc_map_pin_line:before {
  content: "\f009";
  color: #09244b;
}

.mgc_maple_leaf_fill:before {
  content: "\f00a";
  color: #09244b;
}

.mgc_maple_leaf_line:before {
  content: "\f00b";
  color: #09244b;
}

.mgc_marina_bay_sand_fill:before {
  content: "\f00c";
  color: #09244b;
}

.mgc_marina_bay_sand_line:before {
  content: "\f00d";
  color: #09244b;
}

.mgc_mark_pen_fill:before {
  content: "\f00e";
  color: #09244b;
}

.mgc_mark_pen_line:before {
  content: "\f00f";
  color: #09244b;
}

.mgc_markdown_fill:before {
  content: "\f010";
  color: #09244b;
}

.mgc_markdown_line:before {
  content: "\f011";
  color: #09244b;
}

.mgc_markup_fill:before {
  content: "\f012";
  color: #09244b;
}

.mgc_markup_line:before {
  content: "\f013";
  color: #09244b;
}

.mgc_mastercard_fill:before {
  content: "\f014";
  color: #09244b;
}

.mgc_mastercard_line:before {
  content: "\f015";
  color: #09244b;
}

.mgc_mastodon_fill:before {
  content: "\f016";
  color: #09244b;
}

.mgc_mastodon_line:before {
  content: "\f017";
  color: #09244b;
}

.mgc_maya_pyramids_fill:before {
  content: "\f018";
  color: #09244b;
}

.mgc_maya_pyramids_line:before {
  content: "\f019";
  color: #09244b;
}

.mgc_medal_fill:before {
  content: "\f01a";
  color: #09244b;
}

.mgc_medal_line:before {
  content: "\f01b";
  color: #09244b;
}

.mgc_medium_fill:before {
  content: "\f01c";
  color: #09244b;
}

.mgc_medium_line:before {
  content: "\f01d";
  color: #09244b;
}

.mgc_menu_fill:before {
  content: "\f01e";
  color: #09244b;
}

.mgc_menu_line:before {
  content: "\f01f";
  color: #09244b;
}

.mgc_message_1_fill:before {
  content: "\f020";
  color: #09244b;
}

.mgc_message_1_line:before {
  content: "\f021";
  color: #09244b;
}

.mgc_message_2_fill:before {
  content: "\f022";
  color: #09244b;
}

.mgc_message_2_line:before {
  content: "\f023";
  color: #09244b;
}

.mgc_message_3_fill:before {
  content: "\f024";
  color: #09244b;
}

.mgc_message_3_line:before {
  content: "\f025";
  color: #09244b;
}

.mgc_message_4_fill:before {
  content: "\f026";
  color: #09244b;
}

.mgc_message_4_line:before {
  content: "\f027";
  color: #09244b;
}

.mgc_messenger_fill:before {
  content: "\f028";
  color: #09244b;
}

.mgc_messenger_line:before {
  content: "\f029";
  color: #09244b;
}

.mgc_meta_fill:before {
  content: "\f02a";
  color: #09244b;
}

.mgc_meta_line:before {
  content: "\f02b";
  color: #09244b;
}

.mgc_mic_2_fill:before {
  content: "\f02c";
  color: #09244b;
}

.mgc_mic_2_line:before {
  content: "\f02d";
  color: #09244b;
}

.mgc_mic_ai_fill:before {
  content: "\f02e";
  color: #09244b;
}

.mgc_mic_ai_line:before {
  content: "\f02f";
  color: #09244b;
}

.mgc_mic_fill:before {
  content: "\f030";
  color: #09244b;
}

.mgc_mic_line:before {
  content: "\f031";
  color: #09244b;
}

.mgc_mic_off_fill:before {
  content: "\f032";
  color: #09244b;
}

.mgc_mic_off_line:before {
  content: "\f033";
  color: #09244b;
}

.mgc_mickeymouse_fill:before {
  content: "\f034";
  color: #09244b;
}

.mgc_mickeymouse_line:before {
  content: "\f035";
  color: #09244b;
}

.mgc_microphone_fill:before {
  content: "\f036";
  color: #09244b;
}

.mgc_microphone_line:before {
  content: "\f037";
  color: #09244b;
}

.mgc_microscope_fill:before {
  content: "\f038";
  color: #09244b;
}

.mgc_microscope_line:before {
  content: "\f039";
  color: #09244b;
}

.mgc_middle_finger_fill:before {
  content: "\f03a";
  color: #09244b;
}

.mgc_middle_finger_line:before {
  content: "\f03b";
  color: #09244b;
}

.mgc_midi_fill:before {
  content: "\f03c";
  color: #09244b;
}

.mgc_midi_line:before {
  content: "\f03d";
  color: #09244b;
}

.mgc_mind_map_fill:before {
  content: "\f03e";
  color: #09244b;
}

.mgc_mind_map_line:before {
  content: "\f03f";
  color: #09244b;
}

.mgc_mingcute_fill:before {
  content: "\f040";
  color: #09244b;
}

.mgc_mingcute_line:before {
  content: "\f041";
  color: #09244b;
}

.mgc_minimize_fill:before {
  content: "\f042";
  color: #09244b;
}

.mgc_minimize_line:before {
  content: "\f043";
  color: #09244b;
}

.mgc_miniplayer_fill:before {
  content: "\f044";
  color: #09244b;
}

.mgc_miniplayer_line:before {
  content: "\f045";
  color: #09244b;
}

.mgc_minus_circle_fill:before {
  content: "\f046";
  color: #09244b;
}

.mgc_minus_circle_line:before {
  content: "\f047";
  color: #09244b;
}

.mgc_minus_square_fill:before {
  content: "\f048";
  color: #09244b;
}

.mgc_minus_square_line:before {
  content: "\f049";
  color: #09244b;
}

.mgc_mirror_fill:before {
  content: "\f04a";
  color: #09244b;
}

.mgc_mirror_line:before {
  content: "\f04b";
  color: #09244b;
}

.mgc_miyajima_torii_fill:before {
  content: "\f04c";
  color: #09244b;
}

.mgc_miyajima_torii_line:before {
  content: "\f04d";
  color: #09244b;
}

.mgc_moai_fill:before {
  content: "\f04e";
  color: #09244b;
}

.mgc_moai_line:before {
  content: "\f04f";
  color: #09244b;
}

.mgc_moderate_snow_fill:before {
  content: "\f050";
  color: #09244b;
}

.mgc_moderate_snow_line:before {
  content: "\f051";
  color: #09244b;
}

.mgc_moment_fill:before {
  content: "\f052";
  color: #09244b;
}

.mgc_moment_line:before {
  content: "\f053";
  color: #09244b;
}

.mgc_monero_fill:before {
  content: "\f054";
  color: #09244b;
}

.mgc_monero_line:before {
  content: "\f055";
  color: #09244b;
}

.mgc_monitor_fill:before {
  content: "\f056";
  color: #09244b;
}

.mgc_monitor_line:before {
  content: "\f057";
  color: #09244b;
}

.mgc_monument_fill:before {
  content: "\f058";
  color: #09244b;
}

.mgc_monument_line:before {
  content: "\f059";
  color: #09244b;
}

.mgc_moon_cloudy_fill:before {
  content: "\f05a";
  color: #09244b;
}

.mgc_moon_cloudy_line:before {
  content: "\f05b";
  color: #09244b;
}

.mgc_moon_fill:before {
  content: "\f05c";
  color: #09244b;
}

.mgc_moon_fog_fill:before {
  content: "\f05d";
  color: #09244b;
}

.mgc_moon_fog_line:before {
  content: "\f05e";
  color: #09244b;
}

.mgc_moon_line:before {
  content: "\f05f";
  color: #09244b;
}

.mgc_moon_stars_fill:before {
  content: "\f060";
  color: #09244b;
}

.mgc_moon_stars_line:before {
  content: "\f061";
  color: #09244b;
}

.mgc_moonlight_fill:before {
  content: "\f062";
  color: #09244b;
}

.mgc_moonlight_line:before {
  content: "\f063";
  color: #09244b;
}

.mgc_more_1_fill:before {
  content: "\f064";
  color: #09244b;
}

.mgc_more_1_line:before {
  content: "\f065";
  color: #09244b;
}

.mgc_more_2_fill:before {
  content: "\f066";
  color: #09244b;
}

.mgc_more_2_line:before {
  content: "\f067";
  color: #09244b;
}

.mgc_more_3_fill:before {
  content: "\f068";
  color: #09244b;
}

.mgc_more_3_line:before {
  content: "\f069";
  color: #09244b;
}

.mgc_more_4_fill:before {
  content: "\f06a";
  color: #09244b;
}

.mgc_more_4_line:before {
  content: "\f06b";
  color: #09244b;
}

.mgc_mortarboard_fill:before {
  content: "\f06c";
  color: #09244b;
}

.mgc_mortarboard_line:before {
  content: "\f06d";
  color: #09244b;
}

.mgc_mosaic_fill:before {
  content: "\f06e";
  color: #09244b;
}

.mgc_mosaic_line:before {
  content: "\f06f";
  color: #09244b;
}

.mgc_mountain_2_fill:before {
  content: "\f070";
  color: #09244b;
}

.mgc_mountain_2_line:before {
  content: "\f071";
  color: #09244b;
}

.mgc_mountain_fill:before {
  content: "\f072";
  color: #09244b;
}

.mgc_mountain_line:before {
  content: "\f073";
  color: #09244b;
}

.mgc_mouse_fill:before {
  content: "\f074";
  color: #09244b;
}

.mgc_mouse_line:before {
  content: "\f075";
  color: #09244b;
}

.mgc_mouth_fill:before {
  content: "\f076";
  color: #09244b;
}

.mgc_mouth_line:before {
  content: "\f077";
  color: #09244b;
}

.mgc_move_fill:before {
  content: "\f078";
  color: #09244b;
}

.mgc_move_line:before {
  content: "\f079";
  color: #09244b;
}

.mgc_movie_fill:before {
  content: "\f07a";
  color: #09244b;
}

.mgc_movie_line:before {
  content: "\f07b";
  color: #09244b;
}

.mgc_multiselect_fill:before {
  content: "\f07c";
  color: #09244b;
}

.mgc_multiselect_line:before {
  content: "\f07d";
  color: #09244b;
}

.mgc_mushroom_fill:before {
  content: "\f07e";
  color: #09244b;
}

.mgc_mushroom_line:before {
  content: "\f07f";
  color: #09244b;
}

.mgc_music_2_ai_fill:before {
  content: "\f080";
  color: #09244b;
}

.mgc_music_2_ai_line:before {
  content: "\f081";
  color: #09244b;
}

.mgc_music_2_fill:before {
  content: "\f082";
  color: #09244b;
}

.mgc_music_2_line:before {
  content: "\f083";
  color: #09244b;
}

.mgc_music_3_fill:before {
  content: "\f084";
  color: #09244b;
}

.mgc_music_3_line:before {
  content: "\f085";
  color: #09244b;
}

.mgc_music_fill:before {
  content: "\f086";
  color: #09244b;
}

.mgc_music_line:before {
  content: "\f087";
  color: #09244b;
}

.mgc_na_fill:before {
  content: "\f088";
  color: #09244b;
}

.mgc_na_line:before {
  content: "\f089";
  color: #09244b;
}

.mgc_navigation_fill:before {
  content: "\f08a";
  color: #09244b;
}

.mgc_navigation_line:before {
  content: "\f08b";
  color: #09244b;
}

.mgc_necktie_fill:before {
  content: "\f08c";
  color: #09244b;
}

.mgc_necktie_line:before {
  content: "\f08d";
  color: #09244b;
}

.mgc_netease_music_fill:before {
  content: "\f08e";
  color: #09244b;
}

.mgc_netease_music_line:before {
  content: "\f08f";
  color: #09244b;
}

.mgc_new_folder_fill:before {
  content: "\f090";
  color: #09244b;
}

.mgc_new_folder_line:before {
  content: "\f091";
  color: #09244b;
}

.mgc_newdot_fill:before {
  content: "\f092";
  color: #09244b;
}

.mgc_newdot_line:before {
  content: "\f093";
  color: #09244b;
}

.mgc_news_2_fill:before {
  content: "\f094";
  color: #09244b;
}

.mgc_news_2_line:before {
  content: "\f095";
  color: #09244b;
}

.mgc_news_fill:before {
  content: "\f096";
  color: #09244b;
}

.mgc_news_line:before {
  content: "\f097";
  color: #09244b;
}

.mgc_nfc_fill:before {
  content: "\f098";
  color: #09244b;
}

.mgc_nfc_line:before {
  content: "\f099";
  color: #09244b;
}

.mgc_nintendo_switch_fill:before {
  content: "\f09a";
  color: #09244b;
}

.mgc_nintendo_switch_line:before {
  content: "\f09b";
  color: #09244b;
}

.mgc_nose_fill:before {
  content: "\f09c";
  color: #09244b;
}

.mgc_nose_line:before {
  content: "\f09d";
  color: #09244b;
}

.mgc_notebook_2_fill:before {
  content: "\f09e";
  color: #09244b;
}

.mgc_notebook_2_line:before {
  content: "\f09f";
  color: #09244b;
}

.mgc_notebook_fill:before {
  content: "\f0a0";
  color: #09244b;
}

.mgc_notebook_line:before {
  content: "\f0a1";
  color: #09244b;
}

.mgc_notification_fill:before {
  content: "\f0a2";
  color: #09244b;
}

.mgc_notification_line:before {
  content: "\f0a3";
  color: #09244b;
}

.mgc_notification_newdot_fill:before {
  content: "\f0a4";
  color: #09244b;
}

.mgc_notification_newdot_line:before {
  content: "\f0a5";
  color: #09244b;
}

.mgc_notification_off_fill:before {
  content: "\f0a6";
  color: #09244b;
}

.mgc_notification_off_line:before {
  content: "\f0a7";
  color: #09244b;
}

.mgc_notion_fill:before {
  content: "\f0a8";
  color: #09244b;
}

.mgc_notion_line:before {
  content: "\f0a9";
  color: #09244b;
}

.mgc_numbers_09_sort_ascending_fill:before {
  content: "\f0aa";
  color: #09244b;
}

.mgc_numbers_09_sort_ascending_line:before {
  content: "\f0ab";
  color: #09244b;
}

.mgc_numbers_09_sort_descending_fill:before {
  content: "\f0ac";
  color: #09244b;
}

.mgc_numbers_09_sort_descending_line:before {
  content: "\f0ad";
  color: #09244b;
}

.mgc_numbers_90_sort_ascending_fill:before {
  content: "\f0ae";
  color: #09244b;
}

.mgc_numbers_90_sort_ascending_line:before {
  content: "\f0af";
  color: #09244b;
}

.mgc_numbers_90_sort_descending_fill:before {
  content: "\f0b0";
  color: #09244b;
}

.mgc_numbers_90_sort_descending_line:before {
  content: "\f0b1";
  color: #09244b;
}

.mgc_nurse_fill:before {
  content: "\f0b2";
  color: #09244b;
}

.mgc_nurse_line:before {
  content: "\f0b3";
  color: #09244b;
}

.mgc_octagon_fill:before {
  content: "\f0b4";
  color: #09244b;
}

.mgc_octagon_line:before {
  content: "\f0b5";
  color: #09244b;
}

.mgc_oil_fill:before {
  content: "\f0b6";
  color: #09244b;
}

.mgc_oil_line:before {
  content: "\f0b7";
  color: #09244b;
}

.mgc_omega_fill:before {
  content: "\f0b8";
  color: #09244b;
}

.mgc_omega_line:before {
  content: "\f0b9";
  color: #09244b;
}

.mgc_omg_fill:before {
  content: "\f0ba";
  color: #09244b;
}

.mgc_omg_line:before {
  content: "\f0bb";
  color: #09244b;
}

.mgc_open_door_fill:before {
  content: "\f0bc";
  color: #09244b;
}

.mgc_open_door_line:before {
  content: "\f0bd";
  color: #09244b;
}

.mgc_openai_fill:before {
  content: "\f0be";
  color: #09244b;
}

.mgc_openai_line:before {
  content: "\f0bf";
  color: #09244b;
}

.mgc_package_2_fill:before {
  content: "\f0c0";
  color: #09244b;
}

.mgc_package_2_line:before {
  content: "\f0c1";
  color: #09244b;
}

.mgc_package_fill:before {
  content: "\f0c2";
  color: #09244b;
}

.mgc_package_line:before {
  content: "\f0c3";
  color: #09244b;
}

.mgc_pad_fill:before {
  content: "\f0c4";
  color: #09244b;
}

.mgc_pad_line:before {
  content: "\f0c5";
  color: #09244b;
}

.mgc_paint_2_fill:before {
  content: "\f0c6";
  color: #09244b;
}

.mgc_paint_2_line:before {
  content: "\f0c7";
  color: #09244b;
}

.mgc_paint_brush_ai_fill:before {
  content: "\f0c8";
  color: #09244b;
}

.mgc_paint_brush_ai_line:before {
  content: "\f0c9";
  color: #09244b;
}

.mgc_paint_brush_fill:before {
  content: "\f0ca";
  color: #09244b;
}

.mgc_paint_brush_line:before {
  content: "\f0cb";
  color: #09244b;
}

.mgc_paint_fill:before {
  content: "\f0cc";
  color: #09244b;
}

.mgc_paint_line:before {
  content: "\f0cd";
  color: #09244b;
}

.mgc_palace_fill:before {
  content: "\f0ce";
  color: #09244b;
}

.mgc_palace_line:before {
  content: "\f0cf";
  color: #09244b;
}

.mgc_palette_2_fill:before {
  content: "\f0d0";
  color: #09244b;
}

.mgc_palette_2_line:before {
  content: "\f0d1";
  color: #09244b;
}

.mgc_palette_3_fill:before {
  content: "\f0d2";
  color: #09244b;
}

.mgc_palette_3_line:before {
  content: "\f0d3";
  color: #09244b;
}

.mgc_palette_fill:before {
  content: "\f0d4";
  color: #09244b;
}

.mgc_palette_line:before {
  content: "\f0d5";
  color: #09244b;
}

.mgc_panoramas_fill:before {
  content: "\f0d6";
  color: #09244b;
}

.mgc_panoramas_line:before {
  content: "\f0d7";
  color: #09244b;
}

.mgc_paper_2_fill:before {
  content: "\f0d8";
  color: #09244b;
}

.mgc_paper_2_line:before {
  content: "\f0d9";
  color: #09244b;
}

.mgc_paper_fill:before {
  content: "\f0da";
  color: #09244b;
}

.mgc_paper_line:before {
  content: "\f0db";
  color: #09244b;
}

.mgc_parachute_fill:before {
  content: "\f0dc";
  color: #09244b;
}

.mgc_parachute_line:before {
  content: "\f0dd";
  color: #09244b;
}

.mgc_paragraph_fill:before {
  content: "\f0de";
  color: #09244b;
}

.mgc_paragraph_line:before {
  content: "\f0df";
  color: #09244b;
}

.mgc_parentheses_fill:before {
  content: "\f0e0";
  color: #09244b;
}

.mgc_parentheses_line:before {
  content: "\f0e1";
  color: #09244b;
}

.mgc_parfum_fill:before {
  content: "\f0e2";
  color: #09244b;
}

.mgc_parfum_line:before {
  content: "\f0e3";
  color: #09244b;
}

.mgc_park_fill:before {
  content: "\f0e4";
  color: #09244b;
}

.mgc_park_line:before {
  content: "\f0e5";
  color: #09244b;
}

.mgc_parking_fill:before {
  content: "\f0e6";
  color: #09244b;
}

.mgc_parking_lights_fill:before {
  content: "\f0e7";
  color: #09244b;
}

.mgc_parking_lights_line:before {
  content: "\f0e8";
  color: #09244b;
}

.mgc_parking_line:before {
  content: "\f0e9";
  color: #09244b;
}

.mgc_partly_cloud_daytime_fill:before {
  content: "\f0ea";
  color: #09244b;
}

.mgc_partly_cloud_daytime_line:before {
  content: "\f0eb";
  color: #09244b;
}

.mgc_partly_cloud_night_fill:before {
  content: "\f0ec";
  color: #09244b;
}

.mgc_partly_cloud_night_line:before {
  content: "\f0ed";
  color: #09244b;
}

.mgc_passport_fill:before {
  content: "\f0ee";
  color: #09244b;
}

.mgc_passport_line:before {
  content: "\f0ef";
  color: #09244b;
}

.mgc_paste_fill:before {
  content: "\f0f0";
  color: #09244b;
}

.mgc_paste_line:before {
  content: "\f0f1";
  color: #09244b;
}

.mgc_paster_fill:before {
  content: "\f0f2";
  color: #09244b;
}

.mgc_paster_line:before {
  content: "\f0f3";
  color: #09244b;
}

.mgc_pause_circle_fill:before {
  content: "\f0f4";
  color: #09244b;
}

.mgc_pause_circle_line:before {
  content: "\f0f5";
  color: #09244b;
}

.mgc_pause_fill:before {
  content: "\f0f6";
  color: #09244b;
}

.mgc_pause_line:before {
  content: "\f0f7";
  color: #09244b;
}

.mgc_pavilion_fill:before {
  content: "\f0f8";
  color: #09244b;
}

.mgc_pavilion_line:before {
  content: "\f0f9";
  color: #09244b;
}

.mgc_paw_fill:before {
  content: "\f0fa";
  color: #09244b;
}

.mgc_paw_line:before {
  content: "\f0fb";
  color: #09244b;
}

.mgc_paypal_fill:before {
  content: "\f0fc";
  color: #09244b;
}

.mgc_paypal_line:before {
  content: "\f0fd";
  color: #09244b;
}

.mgc_pdf_fill:before {
  content: "\f0fe";
  color: #09244b;
}

.mgc_pdf_line:before {
  content: "\f0ff";
  color: #09244b;
}

.mgc_pen_2_fill:before {
  content: "\f100";
  color: #09244b;
}

.mgc_pen_2_line:before {
  content: "\f101";
  color: #09244b;
}

.mgc_pen_fill:before {
  content: "\f102";
  color: #09244b;
}

.mgc_pen_line:before {
  content: "\f103";
  color: #09244b;
}

.mgc_pencil_2_ai_fill:before {
  content: "\f104";
  color: #09244b;
}

.mgc_pencil_2_ai_line:before {
  content: "\f105";
  color: #09244b;
}

.mgc_pencil_2_fill:before {
  content: "\f106";
  color: #09244b;
}

.mgc_pencil_2_line:before {
  content: "\f107";
  color: #09244b;
}

.mgc_pencil_3_fill:before {
  content: "\f108";
  color: #09244b;
}

.mgc_pencil_3_line:before {
  content: "\f109";
  color: #09244b;
}

.mgc_pencil_fill:before {
  content: "\f10a";
  color: #09244b;
}

.mgc_pencil_line:before {
  content: "\f10b";
  color: #09244b;
}

.mgc_pencil_ruler_fill:before {
  content: "\f10c";
  color: #09244b;
}

.mgc_pencil_ruler_line:before {
  content: "\f10d";
  color: #09244b;
}

.mgc_pentagon_fill:before {
  content: "\f10e";
  color: #09244b;
}

.mgc_pentagon_line:before {
  content: "\f10f";
  color: #09244b;
}

.mgc_performance_fill:before {
  content: "\f110";
  color: #09244b;
}

.mgc_performance_line:before {
  content: "\f111";
  color: #09244b;
}

.mgc_phone_add_fill:before {
  content: "\f112";
  color: #09244b;
}

.mgc_phone_add_line:before {
  content: "\f113";
  color: #09244b;
}

.mgc_phone_block_fill:before {
  content: "\f114";
  color: #09244b;
}

.mgc_phone_block_line:before {
  content: "\f115";
  color: #09244b;
}

.mgc_phone_call_fill:before {
  content: "\f116";
  color: #09244b;
}

.mgc_phone_call_line:before {
  content: "\f117";
  color: #09244b;
}

.mgc_phone_fill:before {
  content: "\f118";
  color: #09244b;
}

.mgc_phone_incoming_fill:before {
  content: "\f119";
  color: #09244b;
}

.mgc_phone_incoming_line:before {
  content: "\f11a";
  color: #09244b;
}

.mgc_phone_line:before {
  content: "\f11b";
  color: #09244b;
}

.mgc_phone_off_fill:before {
  content: "\f11c";
  color: #09244b;
}

.mgc_phone_off_line:before {
  content: "\f11d";
  color: #09244b;
}

.mgc_phone_outgoing_fill:before {
  content: "\f11e";
  color: #09244b;
}

.mgc_phone_outgoing_line:before {
  content: "\f11f";
  color: #09244b;
}

.mgc_phone_success_fill:before {
  content: "\f120";
  color: #09244b;
}

.mgc_phone_success_line:before {
  content: "\f121";
  color: #09244b;
}

.mgc_photo_album_2_fill:before {
  content: "\f122";
  color: #09244b;
}

.mgc_photo_album_2_line:before {
  content: "\f123";
  color: #09244b;
}

.mgc_photo_album_fill:before {
  content: "\f124";
  color: #09244b;
}

.mgc_photo_album_line:before {
  content: "\f125";
  color: #09244b;
}

.mgc_pic_2_fill:before {
  content: "\f126";
  color: #09244b;
}

.mgc_pic_2_line:before {
  content: "\f127";
  color: #09244b;
}

.mgc_pic_ai_fill:before {
  content: "\f128";
  color: #09244b;
}

.mgc_pic_ai_line:before {
  content: "\f129";
  color: #09244b;
}

.mgc_pic_fill:before {
  content: "\f12a";
  color: #09244b;
}

.mgc_pic_line:before {
  content: "\f12b";
  color: #09244b;
}

.mgc_pickax_fill:before {
  content: "\f12c";
  color: #09244b;
}

.mgc_pickax_line:before {
  content: "\f12d";
  color: #09244b;
}

.mgc_pig_fill:before {
  content: "\f12e";
  color: #09244b;
}

.mgc_pig_line:before {
  content: "\f12f";
  color: #09244b;
}

.mgc_pig_money_fill:before {
  content: "\f130";
  color: #09244b;
}

.mgc_pig_money_line:before {
  content: "\f131";
  color: #09244b;
}

.mgc_pin_2_fill:before {
  content: "\f132";
  color: #09244b;
}

.mgc_pin_2_line:before {
  content: "\f133";
  color: #09244b;
}

.mgc_pin_fill:before {
  content: "\f134";
  color: #09244b;
}

.mgc_pin_line:before {
  content: "\f135";
  color: #09244b;
}

.mgc_pingpong_fill:before {
  content: "\f136";
  color: #09244b;
}

.mgc_pingpong_line:before {
  content: "\f137";
  color: #09244b;
}

.mgc_pinterest_fill:before {
  content: "\f138";
  color: #09244b;
}

.mgc_pinterest_line:before {
  content: "\f139";
  color: #09244b;
}

.mgc_pinwheel_2_fill:before {
  content: "\f13a";
  color: #09244b;
}

.mgc_pinwheel_2_line:before {
  content: "\f13b";
  color: #09244b;
}

.mgc_pinwheel_fill:before {
  content: "\f13c";
  color: #09244b;
}

.mgc_pinwheel_line:before {
  content: "\f13d";
  color: #09244b;
}

.mgc_pisa_tower_fill:before {
  content: "\f13e";
  color: #09244b;
}

.mgc_pisa_tower_line:before {
  content: "\f13f";
  color: #09244b;
}

.mgc_Pisces_fill:before {
  content: "\f140";
  color: #09244b;
}

.mgc_Pisces_line:before {
  content: "\f141";
  color: #09244b;
}

.mgc_pizza_fill:before {
  content: "\f142";
  color: #09244b;
}

.mgc_pizza_line:before {
  content: "\f143";
  color: #09244b;
}

.mgc_planet_fill:before {
  content: "\f144";
  color: #09244b;
}

.mgc_planet_line:before {
  content: "\f145";
  color: #09244b;
}

.mgc_play_circle_fill:before {
  content: "\f146";
  color: #09244b;
}

.mgc_play_circle_line:before {
  content: "\f147";
  color: #09244b;
}

.mgc_play_fill:before {
  content: "\f148";
  color: #09244b;
}

.mgc_play_line:before {
  content: "\f149";
  color: #09244b;
}

.mgc_playground_fill:before {
  content: "\f14a";
  color: #09244b;
}

.mgc_playground_line:before {
  content: "\f14b";
  color: #09244b;
}

.mgc_playlist_2_fill:before {
  content: "\f14c";
  color: #09244b;
}

.mgc_playlist_2_line:before {
  content: "\f14d";
  color: #09244b;
}

.mgc_playlist_fill:before {
  content: "\f14e";
  color: #09244b;
}

.mgc_playlist_line:before {
  content: "\f14f";
  color: #09244b;
}

.mgc_plugin_2_fill:before {
  content: "\f150";
  color: #09244b;
}

.mgc_plugin_2_line:before {
  content: "\f151";
  color: #09244b;
}

.mgc_plugin_fill:before {
  content: "\f152";
  color: #09244b;
}

.mgc_plugin_line:before {
  content: "\f153";
  color: #09244b;
}

.mgc_plus_fill:before {
  content: "\f154";
  color: #09244b;
}

.mgc_plus_line:before {
  content: "\f155";
  color: #09244b;
}

.mgc_polkadot_DOT_fill:before {
  content: "\f156";
  color: #09244b;
}

.mgc_polkadot_DOT_line:before {
  content: "\f157";
  color: #09244b;
}

.mgc_polygon_fill:before {
  content: "\f158";
  color: #09244b;
}

.mgc_polygon_line:before {
  content: "\f159";
  color: #09244b;
}

.mgc_pot_fill:before {
  content: "\f15a";
  color: #09244b;
}

.mgc_pot_line:before {
  content: "\f15b";
  color: #09244b;
}

.mgc_power_fill:before {
  content: "\f15c";
  color: #09244b;
}

.mgc_power_line:before {
  content: "\f15d";
  color: #09244b;
}

.mgc_ppt_fill:before {
  content: "\f15e";
  color: #09244b;
}

.mgc_ppt_line:before {
  content: "\f15f";
  color: #09244b;
}

.mgc_pray_fill:before {
  content: "\f160";
  color: #09244b;
}

.mgc_pray_line:before {
  content: "\f161";
  color: #09244b;
}

.mgc_prescription_fill:before {
  content: "\f162";
  color: #09244b;
}

.mgc_prescription_line:before {
  content: "\f163";
  color: #09244b;
}

.mgc_presentation_1_fill:before {
  content: "\f164";
  color: #09244b;
}

.mgc_presentation_1_line:before {
  content: "\f165";
  color: #09244b;
}

.mgc_presentation_2_fill:before {
  content: "\f166";
  color: #09244b;
}

.mgc_presentation_2_line:before {
  content: "\f167";
  color: #09244b;
}

.mgc_presentation_3_fill:before {
  content: "\f168";
  color: #09244b;
}

.mgc_presentation_3_line:before {
  content: "\f169";
  color: #09244b;
}

.mgc_print_fill:before {
  content: "\f16a";
  color: #09244b;
}

.mgc_print_line:before {
  content: "\f16b";
  color: #09244b;
}

.mgc_process_fill:before {
  content: "\f16c";
  color: #09244b;
}

.mgc_process_line:before {
  content: "\f16d";
  color: #09244b;
}

.mgc_profile_fill:before {
  content: "\f16e";
  color: #09244b;
}

.mgc_profile_line:before {
  content: "\f16f";
  color: #09244b;
}

.mgc_projector_fill:before {
  content: "\f170";
  color: #09244b;
}

.mgc_projector_line:before {
  content: "\f171";
  color: #09244b;
}

.mgc_projector_screen_fill:before {
  content: "\f172";
  color: #09244b;
}

.mgc_projector_screen_line:before {
  content: "\f173";
  color: #09244b;
}

.mgc_pumpkin_fill:before {
  content: "\f174";
  color: #09244b;
}

.mgc_pumpkin_lantern_fill:before {
  content: "\f175";
  color: #09244b;
}

.mgc_pumpkin_lantern_line:before {
  content: "\f176";
  color: #09244b;
}

.mgc_pumpkin_line:before {
  content: "\f177";
  color: #09244b;
}

.mgc_puzzled_fill:before {
  content: "\f178";
  color: #09244b;
}

.mgc_puzzled_line:before {
  content: "\f179";
  color: #09244b;
}

.mgc_qq_fill:before {
  content: "\f17a";
  color: #09244b;
}

.mgc_qq_line:before {
  content: "\f17b";
  color: #09244b;
}

.mgc_qrcode_2_fill:before {
  content: "\f17c";
  color: #09244b;
}

.mgc_qrcode_2_line:before {
  content: "\f17d";
  color: #09244b;
}

.mgc_qrcode_fill:before {
  content: "\f17e";
  color: #09244b;
}

.mgc_qrcode_line:before {
  content: "\f17f";
  color: #09244b;
}

.mgc_question_fill:before {
  content: "\f180";
  color: #09244b;
}

.mgc_question_line:before {
  content: "\f181";
  color: #09244b;
}

.mgc_quill_pen_ai_fill:before {
  content: "\f182";
  color: #09244b;
}

.mgc_quill_pen_ai_line:before {
  content: "\f183";
  color: #09244b;
}

.mgc_quill_pen_fill:before {
  content: "\f184";
  color: #09244b;
}

.mgc_quill_pen_line:before {
  content: "\f185";
  color: #09244b;
}

.mgc_quote_left_fill:before {
  content: "\f186";
  color: #09244b;
}

.mgc_quote_left_line:before {
  content: "\f187";
  color: #09244b;
}

.mgc_quote_right_fill:before {
  content: "\f188";
  color: #09244b;
}

.mgc_quote_right_line:before {
  content: "\f189";
  color: #09244b;
}

.mgc_rabbit_fill:before {
  content: "\f18a";
  color: #09244b;
}

.mgc_rabbit_line:before {
  content: "\f18b";
  color: #09244b;
}

.mgc_radar_2_fill:before {
  content: "\f18c";
  color: #09244b;
}

.mgc_radar_2_line:before {
  content: "\f18d";
  color: #09244b;
}

.mgc_radar_fill:before {
  content: "\f18e";
  color: #09244b;
}

.mgc_radar_line:before {
  content: "\f18f";
  color: #09244b;
}

.mgc_radio_fill:before {
  content: "\f190";
  color: #09244b;
}

.mgc_radio_line:before {
  content: "\f191";
  color: #09244b;
}

.mgc_radiobox_fill:before {
  content: "\f192";
  color: #09244b;
}

.mgc_radiobox_line:before {
  content: "\f193";
  color: #09244b;
}

.mgc_rain_fill:before {
  content: "\f194";
  color: #09244b;
}

.mgc_rain_line:before {
  content: "\f195";
  color: #09244b;
}

.mgc_rainbow_fill:before {
  content: "\f196";
  color: #09244b;
}

.mgc_rainbow_line:before {
  content: "\f197";
  color: #09244b;
}

.mgc_rainstorm_fill:before {
  content: "\f198";
  color: #09244b;
}

.mgc_rainstorm_line:before {
  content: "\f199";
  color: #09244b;
}

.mgc_rake_fill:before {
  content: "\f19a";
  color: #09244b;
}

.mgc_rake_line:before {
  content: "\f19b";
  color: #09244b;
}

.mgc_random_fill:before {
  content: "\f19c";
  color: #09244b;
}

.mgc_random_line:before {
  content: "\f19d";
  color: #09244b;
}

.mgc_rare_fog_lights_fill:before {
  content: "\f19e";
  color: #09244b;
}

.mgc_rare_fog_lights_line:before {
  content: "\f19f";
  color: #09244b;
}

.mgc_react_fill:before {
  content: "\f1a0";
  color: #09244b;
}

.mgc_react_line:before {
  content: "\f1a1";
  color: #09244b;
}

.mgc_rear_windshield_defroster_fill:before {
  content: "\f1a2";
  color: #09244b;
}

.mgc_rear_windshield_defroster_line:before {
  content: "\f1a3";
  color: #09244b;
}

.mgc_receive_money_fill:before {
  content: "\f1a4";
  color: #09244b;
}

.mgc_receive_money_line:before {
  content: "\f1a5";
  color: #09244b;
}

.mgc_record_mail_fill:before {
  content: "\f1a6";
  color: #09244b;
}

.mgc_record_mail_line:before {
  content: "\f1a7";
  color: #09244b;
}

.mgc_rectangle_fill:before {
  content: "\f1a8";
  color: #09244b;
}

.mgc_rectangle_line:before {
  content: "\f1a9";
  color: #09244b;
}

.mgc_rectangle_vertical_fill:before {
  content: "\f1aa";
  color: #09244b;
}

.mgc_rectangle_vertical_line:before {
  content: "\f1ab";
  color: #09244b;
}

.mgc_recycle_fill:before {
  content: "\f1ac";
  color: #09244b;
}

.mgc_recycle_line:before {
  content: "\f1ad";
  color: #09244b;
}

.mgc_red_packet_fill:before {
  content: "\f1ae";
  color: #09244b;
}

.mgc_red_packet_line:before {
  content: "\f1af";
  color: #09244b;
}

.mgc_red_packet_open_fill:before {
  content: "\f1b0";
  color: #09244b;
}

.mgc_red_packet_open_line:before {
  content: "\f1b1";
  color: #09244b;
}

.mgc_reddit_fill:before {
  content: "\f1b2";
  color: #09244b;
}

.mgc_reddit_line:before {
  content: "\f1b3";
  color: #09244b;
}

.mgc_refresh_1_fill:before {
  content: "\f1b4";
  color: #09244b;
}

.mgc_refresh_1_line:before {
  content: "\f1b5";
  color: #09244b;
}

.mgc_refresh_2_fill:before {
  content: "\f1b6";
  color: #09244b;
}

.mgc_refresh_2_line:before {
  content: "\f1b7";
  color: #09244b;
}

.mgc_refresh_3_fill:before {
  content: "\f1b8";
  color: #09244b;
}

.mgc_refresh_3_line:before {
  content: "\f1b9";
  color: #09244b;
}

.mgc_refresh_4_ai_fill:before {
  content: "\f1ba";
  color: #09244b;
}

.mgc_refresh_4_ai_line:before {
  content: "\f1bb";
  color: #09244b;
}

.mgc_refresh_4_fill:before {
  content: "\f1bc";
  color: #09244b;
}

.mgc_refresh_4_line:before {
  content: "\f1bd";
  color: #09244b;
}

.mgc_refresh_anticlockwise_1_fill:before {
  content: "\f1be";
  color: #09244b;
}

.mgc_refresh_anticlockwise_1_line:before {
  content: "\f1bf";
  color: #09244b;
}

.mgc_refund_cny_fill:before {
  content: "\f1c0";
  color: #09244b;
}

.mgc_refund_cny_line:before {
  content: "\f1c1";
  color: #09244b;
}

.mgc_refund_dollar_fill:before {
  content: "\f1c2";
  color: #09244b;
}

.mgc_refund_dollar_line:before {
  content: "\f1c3";
  color: #09244b;
}

.mgc_registered_fill:before {
  content: "\f1c4";
  color: #09244b;
}

.mgc_registered_line:before {
  content: "\f1c5";
  color: #09244b;
}

.mgc_remote_control_fill:before {
  content: "\f1c6";
  color: #09244b;
}

.mgc_remote_control_line:before {
  content: "\f1c7";
  color: #09244b;
}

.mgc_remote_fill:before {
  content: "\f1c8";
  color: #09244b;
}

.mgc_remote_line:before {
  content: "\f1c9";
  color: #09244b;
}

.mgc_repeat_fill:before {
  content: "\f1ca";
  color: #09244b;
}

.mgc_repeat_line:before {
  content: "\f1cb";
  color: #09244b;
}

.mgc_repeat_one_fill:before {
  content: "\f1cc";
  color: #09244b;
}

.mgc_repeat_one_line:before {
  content: "\f1cd";
  color: #09244b;
}

.mgc_report_fill:before {
  content: "\f1ce";
  color: #09244b;
}

.mgc_report_forms_fill:before {
  content: "\f1cf";
  color: #09244b;
}

.mgc_report_forms_line:before {
  content: "\f1d0";
  color: #09244b;
}

.mgc_report_line:before {
  content: "\f1d1";
  color: #09244b;
}

.mgc_rest_area_fill:before {
  content: "\f1d2";
  color: #09244b;
}

.mgc_rest_area_line:before {
  content: "\f1d3";
  color: #09244b;
}

.mgc_restore_fill:before {
  content: "\f1d4";
  color: #09244b;
}

.mgc_restore_line:before {
  content: "\f1d5";
  color: #09244b;
}

.mgc_rewind_backward_5_fill:before {
  content: "\f1d6";
  color: #09244b;
}

.mgc_rewind_backward_5_line:before {
  content: "\f1d7";
  color: #09244b;
}

.mgc_rewind_backward_10_fill:before {
  content: "\f1d8";
  color: #09244b;
}

.mgc_rewind_backward_10_line:before {
  content: "\f1d9";
  color: #09244b;
}

.mgc_rewind_backward_15_fill:before {
  content: "\f1da";
  color: #09244b;
}

.mgc_rewind_backward_15_line:before {
  content: "\f1db";
  color: #09244b;
}

.mgc_rewind_backward_30_fill:before {
  content: "\f1dc";
  color: #09244b;
}

.mgc_rewind_backward_30_line:before {
  content: "\f1dd";
  color: #09244b;
}

.mgc_rewind_backward_square_5_fill:before {
  content: "\f1de";
  color: #09244b;
}

.mgc_rewind_backward_square_5_line:before {
  content: "\f1df";
  color: #09244b;
}

.mgc_rewind_backward_square_10_fill:before {
  content: "\f1e0";
  color: #09244b;
}

.mgc_rewind_backward_square_10_line:before {
  content: "\f1e1";
  color: #09244b;
}

.mgc_rewind_backward_square_15_fill:before {
  content: "\f1e2";
  color: #09244b;
}

.mgc_rewind_backward_square_15_line:before {
  content: "\f1e3";
  color: #09244b;
}

.mgc_rewind_backward_square_30_fill:before {
  content: "\f1e4";
  color: #09244b;
}

.mgc_rewind_backward_square_30_line:before {
  content: "\f1e5";
  color: #09244b;
}

.mgc_rewind_forward_5_fill:before {
  content: "\f1e6";
  color: #09244b;
}

.mgc_rewind_forward_5_line:before {
  content: "\f1e7";
  color: #09244b;
}

.mgc_rewind_forward_10_fill:before {
  content: "\f1e8";
  color: #09244b;
}

.mgc_rewind_forward_10_line:before {
  content: "\f1e9";
  color: #09244b;
}

.mgc_rewind_forward_15_fill:before {
  content: "\f1ea";
  color: #09244b;
}

.mgc_rewind_forward_15_line:before {
  content: "\f1eb";
  color: #09244b;
}

.mgc_rewind_forward_30_fill:before {
  content: "\f1ec";
  color: #09244b;
}

.mgc_rewind_forward_30_line:before {
  content: "\f1ed";
  color: #09244b;
}

.mgc_rewind_forward_square_5_fill:before {
  content: "\f1ee";
  color: #09244b;
}

.mgc_rewind_forward_square_5_line:before {
  content: "\f1ef";
  color: #09244b;
}

.mgc_rewind_forward_square_10_fill:before {
  content: "\f1f0";
  color: #09244b;
}

.mgc_rewind_forward_square_10_line:before {
  content: "\f1f1";
  color: #09244b;
}

.mgc_rewind_forward_square_15_fill:before {
  content: "\f1f2";
  color: #09244b;
}

.mgc_rewind_forward_square_15_line:before {
  content: "\f1f3";
  color: #09244b;
}

.mgc_rewind_forward_square_30_fill:before {
  content: "\f1f4";
  color: #09244b;
}

.mgc_rewind_forward_square_30_line:before {
  content: "\f1f5";
  color: #09244b;
}

.mgc_riding_fill:before {
  content: "\f1f6";
  color: #09244b;
}

.mgc_riding_line:before {
  content: "\f1f7";
  color: #09244b;
}

.mgc_right_fill:before {
  content: "\f1f8";
  color: #09244b;
}

.mgc_right_line:before {
  content: "\f1f9";
  color: #09244b;
}

.mgc_right_small_fill:before {
  content: "\f1fa";
  color: #09244b;
}

.mgc_right_small_line:before {
  content: "\f1fb";
  color: #09244b;
}

.mgc_road_fill:before {
  content: "\f1fc";
  color: #09244b;
}

.mgc_road_line:before {
  content: "\f1fd";
  color: #09244b;
}

.mgc_rocket_2_fill:before {
  content: "\f1fe";
  color: #09244b;
}

.mgc_rocket_2_line:before {
  content: "\f1ff";
  color: #09244b;
}

.mgc_rocket_fill:before {
  content: "\f200";
  color: #09244b;
}

.mgc_rocket_line:before {
  content: "\f201";
  color: #09244b;
}

.mgc_rotate_to_horizontal_fill:before {
  content: "\f202";
  color: #09244b;
}

.mgc_rotate_to_horizontal_line:before {
  content: "\f203";
  color: #09244b;
}

.mgc_rotate_to_vertical_fill:before {
  content: "\f204";
  color: #09244b;
}

.mgc_rotate_to_vertical_line:before {
  content: "\f205";
  color: #09244b;
}

.mgc_rotate_x_fill:before {
  content: "\f206";
  color: #09244b;
}

.mgc_rotate_x_line:before {
  content: "\f207";
  color: #09244b;
}

.mgc_rotate_y_fill:before {
  content: "\f208";
  color: #09244b;
}

.mgc_rotate_y_line:before {
  content: "\f209";
  color: #09244b;
}

.mgc_round_fill:before {
  content: "\f20a";
  color: #09244b;
}

.mgc_round_line:before {
  content: "\f20b";
  color: #09244b;
}

.mgc_route_fill:before {
  content: "\f20c";
  color: #09244b;
}

.mgc_route_line:before {
  content: "\f20d";
  color: #09244b;
}

.mgc_router_modem_fill:before {
  content: "\f20e";
  color: #09244b;
}

.mgc_router_modem_line:before {
  content: "\f20f";
  color: #09244b;
}

.mgc_rows_2_fill:before {
  content: "\f210";
  color: #09244b;
}

.mgc_rows_2_line:before {
  content: "\f211";
  color: #09244b;
}

.mgc_rows_3_fill:before {
  content: "\f212";
  color: #09244b;
}

.mgc_rows_3_line:before {
  content: "\f213";
  color: #09244b;
}

.mgc_rows_4_fill:before {
  content: "\f214";
  color: #09244b;
}

.mgc_rows_4_line:before {
  content: "\f215";
  color: #09244b;
}

.mgc_rss_2_fill:before {
  content: "\f216";
  color: #09244b;
}

.mgc_rss_2_line:before {
  content: "\f217";
  color: #09244b;
}

.mgc_rss_fill:before {
  content: "\f218";
  color: #09244b;
}

.mgc_rss_line:before {
  content: "\f219";
  color: #09244b;
}

.mgc_rudder_fill:before {
  content: "\f21a";
  color: #09244b;
}

.mgc_rudder_line:before {
  content: "\f21b";
  color: #09244b;
}

.mgc_ruler_fill:before {
  content: "\f21c";
  color: #09244b;
}

.mgc_ruler_line:before {
  content: "\f21d";
  color: #09244b;
}

.mgc_run_fill:before {
  content: "\f21e";
  color: #09244b;
}

.mgc_run_line:before {
  content: "\f21f";
  color: #09244b;
}

.mgc_sad_fill:before {
  content: "\f220";
  color: #09244b;
}

.mgc_sad_line:before {
  content: "\f221";
  color: #09244b;
}

.mgc_safari_fill:before {
  content: "\f222";
  color: #09244b;
}

.mgc_safari_line:before {
  content: "\f223";
  color: #09244b;
}

.mgc_safe_alert_fill:before {
  content: "\f224";
  color: #09244b;
}

.mgc_safe_alert_line:before {
  content: "\f225";
  color: #09244b;
}

.mgc_safe_box_fill:before {
  content: "\f226";
  color: #09244b;
}

.mgc_safe_box_line:before {
  content: "\f227";
  color: #09244b;
}

.mgc_safe_flash_fill:before {
  content: "\f228";
  color: #09244b;
}

.mgc_safe_flash_line:before {
  content: "\f229";
  color: #09244b;
}

.mgc_safe_lock_fill:before {
  content: "\f22a";
  color: #09244b;
}

.mgc_safe_lock_line:before {
  content: "\f22b";
  color: #09244b;
}

.mgc_safe_shield_2_fill:before {
  content: "\f22c";
  color: #09244b;
}

.mgc_safe_shield_2_line:before {
  content: "\f22d";
  color: #09244b;
}

.mgc_safe_shield_fill:before {
  content: "\f22e";
  color: #09244b;
}

.mgc_safe_shield_line:before {
  content: "\f22f";
  color: #09244b;
}

.mgc_safety_certificate_fill:before {
  content: "\f230";
  color: #09244b;
}

.mgc_safety_certificate_line:before {
  content: "\f231";
  color: #09244b;
}

.mgc_Sagittarius_fill:before {
  content: "\f232";
  color: #09244b;
}

.mgc_Sagittarius_line:before {
  content: "\f233";
  color: #09244b;
}

.mgc_sailboat_fill:before {
  content: "\f234";
  color: #09244b;
}

.mgc_sailboat_line:before {
  content: "\f235";
  color: #09244b;
}

.mgc_sale_fill:before {
  content: "\f236";
  color: #09244b;
}

.mgc_sale_line:before {
  content: "\f237";
  color: #09244b;
}

.mgc_sandglass_2_fill:before {
  content: "\f238";
  color: #09244b;
}

.mgc_sandglass_2_line:before {
  content: "\f239";
  color: #09244b;
}

.mgc_sandglass_fill:before {
  content: "\f23a";
  color: #09244b;
}

.mgc_sandglass_line:before {
  content: "\f23b";
  color: #09244b;
}

.mgc_sandstorm_fill:before {
  content: "\f23c";
  color: #09244b;
}

.mgc_sandstorm_line:before {
  content: "\f23d";
  color: #09244b;
}

.mgc_save_2_fill:before {
  content: "\f23e";
  color: #09244b;
}

.mgc_save_2_line:before {
  content: "\f23f";
  color: #09244b;
}

.mgc_save_fill:before {
  content: "\f240";
  color: #09244b;
}

.mgc_save_line:before {
  content: "\f241";
  color: #09244b;
}

.mgc_scale_fill:before {
  content: "\f242";
  color: #09244b;
}

.mgc_scale_line:before {
  content: "\f243";
  color: #09244b;
}

.mgc_scan_2_fill:before {
  content: "\f244";
  color: #09244b;
}

.mgc_scan_2_line:before {
  content: "\f245";
  color: #09244b;
}

.mgc_scan_fill:before {
  content: "\f246";
  color: #09244b;
}

.mgc_scan_line:before {
  content: "\f247";
  color: #09244b;
}

.mgc_scarf_fill:before {
  content: "\f248";
  color: #09244b;
}

.mgc_scarf_line:before {
  content: "\f249";
  color: #09244b;
}

.mgc_schedule_fill:before {
  content: "\f24a";
  color: #09244b;
}

.mgc_schedule_line:before {
  content: "\f24b";
  color: #09244b;
}

.mgc_school_fill:before {
  content: "\f24c";
  color: #09244b;
}

.mgc_school_line:before {
  content: "\f24d";
  color: #09244b;
}

.mgc_science_fill:before {
  content: "\f24e";
  color: #09244b;
}

.mgc_science_line:before {
  content: "\f24f";
  color: #09244b;
}

.mgc_scissors_2_fill:before {
  content: "\f250";
  color: #09244b;
}

.mgc_scissors_2_line:before {
  content: "\f251";
  color: #09244b;
}

.mgc_scissors_3_fill:before {
  content: "\f252";
  color: #09244b;
}

.mgc_scissors_3_line:before {
  content: "\f253";
  color: #09244b;
}

.mgc_scissors_fill:before {
  content: "\f254";
  color: #09244b;
}

.mgc_scissors_line:before {
  content: "\f255";
  color: #09244b;
}

.mgc_scooter_fill:before {
  content: "\f256";
  color: #09244b;
}

.mgc_scooter_line:before {
  content: "\f257";
  color: #09244b;
}

.mgc_Scorpio_fill:before {
  content: "\f258";
  color: #09244b;
}

.mgc_Scorpio_line:before {
  content: "\f259";
  color: #09244b;
}

.mgc_screenshot_fill:before {
  content: "\f25a";
  color: #09244b;
}

.mgc_screenshot_line:before {
  content: "\f25b";
  color: #09244b;
}

.mgc_screwdriver_fill:before {
  content: "\f25c";
  color: #09244b;
}

.mgc_screwdriver_line:before {
  content: "\f25d";
  color: #09244b;
}

.mgc_seal_fill:before {
  content: "\f25e";
  color: #09244b;
}

.mgc_seal_line:before {
  content: "\f25f";
  color: #09244b;
}

.mgc_search_2_fill:before {
  content: "\f260";
  color: #09244b;
}

.mgc_search_2_line:before {
  content: "\f261";
  color: #09244b;
}

.mgc_search_3_fill:before {
  content: "\f262";
  color: #09244b;
}

.mgc_search_3_line:before {
  content: "\f263";
  color: #09244b;
}

.mgc_search_ai_fill:before {
  content: "\f264";
  color: #09244b;
}

.mgc_search_ai_line:before {
  content: "\f265";
  color: #09244b;
}

.mgc_search_fill:before {
  content: "\f266";
  color: #09244b;
}

.mgc_search_line:before {
  content: "\f267";
  color: #09244b;
}

.mgc_seat_fill:before {
  content: "\f268";
  color: #09244b;
}

.mgc_seat_heated_fill:before {
  content: "\f269";
  color: #09244b;
}

.mgc_seat_heated_line:before {
  content: "\f26a";
  color: #09244b;
}

.mgc_seat_line:before {
  content: "\f26b";
  color: #09244b;
}

.mgc_section_fill:before {
  content: "\f26c";
  color: #09244b;
}

.mgc_section_line:before {
  content: "\f26d";
  color: #09244b;
}

.mgc_sector_fill:before {
  content: "\f26e";
  color: #09244b;
}

.mgc_sector_line:before {
  content: "\f26f";
  color: #09244b;
}

.mgc_selector_horizontal_fill:before {
  content: "\f270";
  color: #09244b;
}

.mgc_selector_horizontal_line:before {
  content: "\f271";
  color: #09244b;
}

.mgc_selector_vertical_fill:before {
  content: "\f272";
  color: #09244b;
}

.mgc_selector_vertical_line:before {
  content: "\f273";
  color: #09244b;
}

.mgc_send_fill:before {
  content: "\f274";
  color: #09244b;
}

.mgc_send_line:before {
  content: "\f275";
  color: #09244b;
}

.mgc_send_plane_fill:before {
  content: "\f276";
  color: #09244b;
}

.mgc_send_plane_line:before {
  content: "\f277";
  color: #09244b;
}

.mgc_server_2_fill:before {
  content: "\f278";
  color: #09244b;
}

.mgc_server_2_line:before {
  content: "\f279";
  color: #09244b;
}

.mgc_server_fill:before {
  content: "\f27a";
  color: #09244b;
}

.mgc_server_line:before {
  content: "\f27b";
  color: #09244b;
}

.mgc_service_fill:before {
  content: "\f27c";
  color: #09244b;
}

.mgc_service_line:before {
  content: "\f27d";
  color: #09244b;
}

.mgc_settings_1_fill:before {
  content: "\f27e";
  color: #09244b;
}

.mgc_settings_1_line:before {
  content: "\f27f";
  color: #09244b;
}

.mgc_settings_2_fill:before {
  content: "\f280";
  color: #09244b;
}

.mgc_settings_2_line:before {
  content: "\f281";
  color: #09244b;
}

.mgc_settings_3_fill:before {
  content: "\f282";
  color: #09244b;
}

.mgc_settings_3_line:before {
  content: "\f283";
  color: #09244b;
}

.mgc_settings_4_fill:before {
  content: "\f284";
  color: #09244b;
}

.mgc_settings_4_line:before {
  content: "\f285";
  color: #09244b;
}

.mgc_settings_5_fill:before {
  content: "\f286";
  color: #09244b;
}

.mgc_settings_5_line:before {
  content: "\f287";
  color: #09244b;
}

.mgc_settings_6_fill:before {
  content: "\f288";
  color: #09244b;
}

.mgc_settings_6_line:before {
  content: "\f289";
  color: #09244b;
}

.mgc_settings_7_fill:before {
  content: "\f28a";
  color: #09244b;
}

.mgc_settings_7_line:before {
  content: "\f28b";
  color: #09244b;
}

.mgc_shadow_fill:before {
  content: "\f28c";
  color: #09244b;
}

.mgc_shadow_line:before {
  content: "\f28d";
  color: #09244b;
}

.mgc_share_2_fill:before {
  content: "\f28e";
  color: #09244b;
}

.mgc_share_2_line:before {
  content: "\f28f";
  color: #09244b;
}

.mgc_share_3_fill:before {
  content: "\f290";
  color: #09244b;
}

.mgc_share_3_line:before {
  content: "\f291";
  color: #09244b;
}

.mgc_share_forward_fill:before {
  content: "\f292";
  color: #09244b;
}

.mgc_share_forward_line:before {
  content: "\f293";
  color: #09244b;
}

.mgc_shield_fill:before {
  content: "\f294";
  color: #09244b;
}

.mgc_shield_line:before {
  content: "\f295";
  color: #09244b;
}

.mgc_shield_shape_fill:before {
  content: "\f296";
  color: #09244b;
}

.mgc_shield_shape_line:before {
  content: "\f297";
  color: #09244b;
}

.mgc_ship_fill:before {
  content: "\f298";
  color: #09244b;
}

.mgc_ship_line:before {
  content: "\f299";
  color: #09244b;
}

.mgc_shirt_fill:before {
  content: "\f29a";
  color: #09244b;
}

.mgc_shirt_line:before {
  content: "\f29b";
  color: #09244b;
}

.mgc_shoe_2_fill:before {
  content: "\f29c";
  color: #09244b;
}

.mgc_shoe_2_line:before {
  content: "\f29d";
  color: #09244b;
}

.mgc_shoe_fill:before {
  content: "\f29e";
  color: #09244b;
}

.mgc_shoe_line:before {
  content: "\f29f";
  color: #09244b;
}

.mgc_shop_fill:before {
  content: "\f2a0";
  color: #09244b;
}

.mgc_shop_line:before {
  content: "\f2a1";
  color: #09244b;
}

.mgc_shopping_bag_1_fill:before {
  content: "\f2a2";
  color: #09244b;
}

.mgc_shopping_bag_1_line:before {
  content: "\f2a3";
  color: #09244b;
}

.mgc_shopping_bag_2_fill:before {
  content: "\f2a4";
  color: #09244b;
}

.mgc_shopping_bag_2_line:before {
  content: "\f2a5";
  color: #09244b;
}

.mgc_shopping_bag_3_fill:before {
  content: "\f2a6";
  color: #09244b;
}

.mgc_shopping_bag_3_line:before {
  content: "\f2a7";
  color: #09244b;
}

.mgc_shopping_cart_1_fill:before {
  content: "\f2a8";
  color: #09244b;
}

.mgc_shopping_cart_1_line:before {
  content: "\f2a9";
  color: #09244b;
}

.mgc_shopping_cart_2_fill:before {
  content: "\f2aa";
  color: #09244b;
}

.mgc_shopping_cart_2_line:before {
  content: "\f2ab";
  color: #09244b;
}

.mgc_shorts_fill:before {
  content: "\f2ac";
  color: #09244b;
}

.mgc_shorts_line:before {
  content: "\f2ad";
  color: #09244b;
}

.mgc_shovel_fill:before {
  content: "\f2ae";
  color: #09244b;
}

.mgc_shovel_line:before {
  content: "\f2af";
  color: #09244b;
}

.mgc_shower_fill:before {
  content: "\f2b0";
  color: #09244b;
}

.mgc_shower_gel_fill:before {
  content: "\f2b1";
  color: #09244b;
}

.mgc_shower_gel_line:before {
  content: "\f2b2";
  color: #09244b;
}

.mgc_shower_line:before {
  content: "\f2b3";
  color: #09244b;
}

.mgc_showers_fill:before {
  content: "\f2b4";
  color: #09244b;
}

.mgc_showers_line:before {
  content: "\f2b5";
  color: #09244b;
}

.mgc_shuffle_2_fill:before {
  content: "\f2b6";
  color: #09244b;
}

.mgc_shuffle_2_line:before {
  content: "\f2b7";
  color: #09244b;
}

.mgc_shuffle_fill:before {
  content: "\f2b8";
  color: #09244b;
}

.mgc_shuffle_line:before {
  content: "\f2b9";
  color: #09244b;
}

.mgc_sick_fill:before {
  content: "\f2ba";
  color: #09244b;
}

.mgc_sick_line:before {
  content: "\f2bb";
  color: #09244b;
}

.mgc_signal_fill:before {
  content: "\f2bc";
  color: #09244b;
}

.mgc_signal_line:before {
  content: "\f2bd";
  color: #09244b;
}

.mgc_signature_fill:before {
  content: "\f2be";
  color: #09244b;
}

.mgc_signature_line:before {
  content: "\f2bf";
  color: #09244b;
}

.mgc_silent_fill:before {
  content: "\f2c0";
  color: #09244b;
}

.mgc_silent_line:before {
  content: "\f2c1";
  color: #09244b;
}

.mgc_siri_fill:before {
  content: "\f2c2";
  color: #09244b;
}

.mgc_siri_frame_fill:before {
  content: "\f2c3";
  color: #09244b;
}

.mgc_siri_frame_line:before {
  content: "\f2c4";
  color: #09244b;
}

.mgc_siri_line:before {
  content: "\f2c5";
  color: #09244b;
}

.mgc_sitemap_fill:before {
  content: "\f2c6";
  color: #09244b;
}

.mgc_sitemap_line:before {
  content: "\f2c7";
  color: #09244b;
}

.mgc_skateboard_fill:before {
  content: "\f2c8";
  color: #09244b;
}

.mgc_skateboard_line:before {
  content: "\f2c9";
  color: #09244b;
}

.mgc_skip_forward_fill:before {
  content: "\f2ca";
  color: #09244b;
}

.mgc_skip_forward_line:before {
  content: "\f2cb";
  color: #09244b;
}

.mgc_skip_previous_fill:before {
  content: "\f2cc";
  color: #09244b;
}

.mgc_skip_previous_line:before {
  content: "\f2cd";
  color: #09244b;
}

.mgc_skirt_fill:before {
  content: "\f2ce";
  color: #09244b;
}

.mgc_skirt_line:before {
  content: "\f2cf";
  color: #09244b;
}

.mgc_skull_fill:before {
  content: "\f2d0";
  color: #09244b;
}

.mgc_skull_line:before {
  content: "\f2d1";
  color: #09244b;
}

.mgc_sleep_fill:before {
  content: "\f2d2";
  color: #09244b;
}

.mgc_sleep_line:before {
  content: "\f2d3";
  color: #09244b;
}

.mgc_sleigh_fill:before {
  content: "\f2d4";
  color: #09244b;
}

.mgc_sleigh_line:before {
  content: "\f2d5";
  color: #09244b;
}

.mgc_snapchat_fill:before {
  content: "\f2d6";
  color: #09244b;
}

.mgc_snapchat_line:before {
  content: "\f2d7";
  color: #09244b;
}

.mgc_snow_fill:before {
  content: "\f2d8";
  color: #09244b;
}

.mgc_snow_line:before {
  content: "\f2d9";
  color: #09244b;
}

.mgc_snowflake_fill:before {
  content: "\f2da";
  color: #09244b;
}

.mgc_snowflake_line:before {
  content: "\f2db";
  color: #09244b;
}

.mgc_snowman_fill:before {
  content: "\f2dc";
  color: #09244b;
}

.mgc_snowman_line:before {
  content: "\f2dd";
  color: #09244b;
}

.mgc_snowstorm_2_fill:before {
  content: "\f2de";
  color: #09244b;
}

.mgc_snowstorm_2_line:before {
  content: "\f2df";
  color: #09244b;
}

.mgc_snowstorm_fill:before {
  content: "\f2e0";
  color: #09244b;
}

.mgc_snowstorm_line:before {
  content: "\f2e1";
  color: #09244b;
}

.mgc_sob_fill:before {
  content: "\f2e2";
  color: #09244b;
}

.mgc_sob_line:before {
  content: "\f2e3";
  color: #09244b;
}

.mgc_social_x_fill:before {
  content: "\f2e4";
  color: #09244b;
}

.mgc_social_x_line:before {
  content: "\f2e5";
  color: #09244b;
}

.mgc_sock_fill:before {
  content: "\f2e6";
  color: #09244b;
}

.mgc_sock_line:before {
  content: "\f2e7";
  color: #09244b;
}

.mgc_sofa_fill:before {
  content: "\f2e8";
  color: #09244b;
}

.mgc_sofa_line:before {
  content: "\f2e9";
  color: #09244b;
}

.mgc_solana_SOL_fill:before {
  content: "\f2ea";
  color: #09244b;
}

.mgc_solana_SOL_line:before {
  content: "\f2eb";
  color: #09244b;
}

.mgc_solar_panel_fill:before {
  content: "\f2ec";
  color: #09244b;
}

.mgc_solar_panel_line:before {
  content: "\f2ed";
  color: #09244b;
}

.mgc_sort_ascending_fill:before {
  content: "\f2ee";
  color: #09244b;
}

.mgc_sort_ascending_line:before {
  content: "\f2ef";
  color: #09244b;
}

.mgc_sort_descending_fill:before {
  content: "\f2f0";
  color: #09244b;
}

.mgc_sort_descending_line:before {
  content: "\f2f1";
  color: #09244b;
}

.mgc_sound_line_fill:before {
  content: "\f2f2";
  color: #09244b;
}

.mgc_sound_line_line:before {
  content: "\f2f3";
  color: #09244b;
}

.mgc_soup_pot_2_fill:before {
  content: "\f2f4";
  color: #09244b;
}

.mgc_soup_pot_2_line:before {
  content: "\f2f5";
  color: #09244b;
}

.mgc_soup_pot_fill:before {
  content: "\f2f6";
  color: #09244b;
}

.mgc_soup_pot_line:before {
  content: "\f2f7";
  color: #09244b;
}

.mgc_space_fill:before {
  content: "\f2f8";
  color: #09244b;
}

.mgc_space_line:before {
  content: "\f2f9";
  color: #09244b;
}

.mgc_spacing_horizontal_fill:before {
  content: "\f2fa";
  color: #09244b;
}

.mgc_spacing_horizontal_line:before {
  content: "\f2fb";
  color: #09244b;
}

.mgc_spacing_vertical_fill:before {
  content: "\f2fc";
  color: #09244b;
}

.mgc_spacing_vertical_line:before {
  content: "\f2fd";
  color: #09244b;
}

.mgc_spade_fill:before {
  content: "\f2fe";
  color: #09244b;
}

.mgc_spade_line:before {
  content: "\f2ff";
  color: #09244b;
}

.mgc_sparkles_2_fill:before {
  content: "\f300";
  color: #09244b;
}

.mgc_sparkles_2_line:before {
  content: "\f301";
  color: #09244b;
}

.mgc_sparkles_3_fill:before {
  content: "\f302";
  color: #09244b;
}

.mgc_sparkles_3_line:before {
  content: "\f303";
  color: #09244b;
}

.mgc_sparkles_fill:before {
  content: "\f304";
  color: #09244b;
}

.mgc_sparkles_line:before {
  content: "\f305";
  color: #09244b;
}

.mgc_spatula_fill:before {
  content: "\f306";
  color: #09244b;
}

.mgc_spatula_line:before {
  content: "\f307";
  color: #09244b;
}

.mgc_speaker_fill:before {
  content: "\f308";
  color: #09244b;
}

.mgc_speaker_line:before {
  content: "\f309";
  color: #09244b;
}

.mgc_speech_fill:before {
  content: "\f30a";
  color: #09244b;
}

.mgc_speech_line:before {
  content: "\f30b";
  color: #09244b;
}

.mgc_spoon_fill:before {
  content: "\f30c";
  color: #09244b;
}

.mgc_spoon_line:before {
  content: "\f30d";
  color: #09244b;
}

.mgc_spotify_fill:before {
  content: "\f30e";
  color: #09244b;
}

.mgc_spotify_line:before {
  content: "\f30f";
  color: #09244b;
}

.mgc_square_arrow_down_fill:before {
  content: "\f310";
  color: #09244b;
}

.mgc_square_arrow_down_line:before {
  content: "\f311";
  color: #09244b;
}

.mgc_square_arrow_left_fill:before {
  content: "\f312";
  color: #09244b;
}

.mgc_square_arrow_left_line:before {
  content: "\f313";
  color: #09244b;
}

.mgc_square_arrow_right_fill:before {
  content: "\f314";
  color: #09244b;
}

.mgc_square_arrow_right_line:before {
  content: "\f315";
  color: #09244b;
}

.mgc_square_arrow_up_fill:before {
  content: "\f316";
  color: #09244b;
}

.mgc_square_arrow_up_line:before {
  content: "\f317";
  color: #09244b;
}

.mgc_square_fill:before {
  content: "\f318";
  color: #09244b;
}

.mgc_square_line:before {
  content: "\f319";
  color: #09244b;
}

.mgc_star_2_fill:before {
  content: "\f31a";
  color: #09244b;
}

.mgc_star_2_line:before {
  content: "\f31b";
  color: #09244b;
}

.mgc_star_fill:before {
  content: "\f31c";
  color: #09244b;
}

.mgc_star_half_fill:before {
  content: "\f31d";
  color: #09244b;
}

.mgc_star_half_line:before {
  content: "\f31e";
  color: #09244b;
}

.mgc_star_line:before {
  content: "\f31f";
  color: #09244b;
}

.mgc_star_topper_fill:before {
  content: "\f320";
  color: #09244b;
}

.mgc_star_topper_line:before {
  content: "\f321";
  color: #09244b;
}

.mgc_statue_of_liberty_fill:before {
  content: "\f322";
  color: #09244b;
}

.mgc_statue_of_liberty_line:before {
  content: "\f323";
  color: #09244b;
}

.mgc_steering_wheel_fill:before {
  content: "\f324";
  color: #09244b;
}

.mgc_steering_wheel_line:before {
  content: "\f325";
  color: #09244b;
}

.mgc_stethoscope_fill:before {
  content: "\f326";
  color: #09244b;
}

.mgc_stethoscope_line:before {
  content: "\f327";
  color: #09244b;
}

.mgc_sticker_fill:before {
  content: "\f328";
  color: #09244b;
}

.mgc_sticker_line:before {
  content: "\f329";
  color: #09244b;
}

.mgc_stock_fill:before {
  content: "\f32a";
  color: #09244b;
}

.mgc_stock_line:before {
  content: "\f32b";
  color: #09244b;
}

.mgc_stop_circle_fill:before {
  content: "\f32c";
  color: #09244b;
}

.mgc_stop_circle_line:before {
  content: "\f32d";
  color: #09244b;
}

.mgc_stop_fill:before {
  content: "\f32e";
  color: #09244b;
}

.mgc_stop_line:before {
  content: "\f32f";
  color: #09244b;
}

.mgc_stopwatch_fill:before {
  content: "\f330";
  color: #09244b;
}

.mgc_stopwatch_line:before {
  content: "\f331";
  color: #09244b;
}

.mgc_storage_fill:before {
  content: "\f332";
  color: #09244b;
}

.mgc_storage_line:before {
  content: "\f333";
  color: #09244b;
}

.mgc_store_2_fill:before {
  content: "\f334";
  color: #09244b;
}

.mgc_store_2_line:before {
  content: "\f335";
  color: #09244b;
}

.mgc_store_fill:before {
  content: "\f336";
  color: #09244b;
}

.mgc_store_line:before {
  content: "\f337";
  color: #09244b;
}

.mgc_strikethrough_fill:before {
  content: "\f338";
  color: #09244b;
}

.mgc_strikethrough_line:before {
  content: "\f339";
  color: #09244b;
}

.mgc_stripe_fill:before {
  content: "\f33a";
  color: #09244b;
}

.mgc_stripe_line:before {
  content: "\f33b";
  color: #09244b;
}

.mgc_subtitle_fill:before {
  content: "\f33c";
  color: #09244b;
}

.mgc_subtitle_line:before {
  content: "\f33d";
  color: #09244b;
}

.mgc_subtract_fill:before {
  content: "\f33e";
  color: #09244b;
}

.mgc_subtract_line:before {
  content: "\f33f";
  color: #09244b;
}

.mgc_sugar_coated_haws_fill:before {
  content: "\f340";
  color: #09244b;
}

.mgc_sugar_coated_haws_line:before {
  content: "\f341";
  color: #09244b;
}

.mgc_suitcase_2_fill:before {
  content: "\f342";
  color: #09244b;
}

.mgc_suitcase_2_line:before {
  content: "\f343";
  color: #09244b;
}

.mgc_suitcase_fill:before {
  content: "\f344";
  color: #09244b;
}

.mgc_suitcase_line:before {
  content: "\f345";
  color: #09244b;
}

.mgc_sun_2_fill:before {
  content: "\f346";
  color: #09244b;
}

.mgc_sun_2_line:before {
  content: "\f347";
  color: #09244b;
}

.mgc_sun_cloudy_fill:before {
  content: "\f348";
  color: #09244b;
}

.mgc_sun_cloudy_line:before {
  content: "\f349";
  color: #09244b;
}

.mgc_sun_fill:before {
  content: "\f34a";
  color: #09244b;
}

.mgc_sun_fog_fill:before {
  content: "\f34b";
  color: #09244b;
}

.mgc_sun_fog_line:before {
  content: "\f34c";
  color: #09244b;
}

.mgc_sun_line:before {
  content: "\f34d";
  color: #09244b;
}

.mgc_sunflower_fill:before {
  content: "\f34e";
  color: #09244b;
}

.mgc_sunflower_line:before {
  content: "\f34f";
  color: #09244b;
}

.mgc_sunrise_fill:before {
  content: "\f350";
  color: #09244b;
}

.mgc_sunrise_line:before {
  content: "\f351";
  color: #09244b;
}

.mgc_sunset_fill:before {
  content: "\f352";
  color: #09244b;
}

.mgc_sunset_line:before {
  content: "\f353";
  color: #09244b;
}

.mgc_surfboard_fill:before {
  content: "\f354";
  color: #09244b;
}

.mgc_surfboard_line:before {
  content: "\f355";
  color: #09244b;
}

.mgc_surprise_fill:before {
  content: "\f356";
  color: #09244b;
}

.mgc_surprise_line:before {
  content: "\f357";
  color: #09244b;
}

.mgc_sweats_fill:before {
  content: "\f358";
  color: #09244b;
}

.mgc_sweats_line:before {
  content: "\f359";
  color: #09244b;
}

.mgc_swimming_pool_fill:before {
  content: "\f35a";
  color: #09244b;
}

.mgc_swimming_pool_line:before {
  content: "\f35b";
  color: #09244b;
}

.mgc_switch_fill:before {
  content: "\f35c";
  color: #09244b;
}

.mgc_switch_line:before {
  content: "\f35d";
  color: #09244b;
}

.mgc_sword_fill:before {
  content: "\f35e";
  color: #09244b;
}

.mgc_sword_line:before {
  content: "\f35f";
  color: #09244b;
}

.mgc_sydney_opera_house_fill:before {
  content: "\f360";
  color: #09244b;
}

.mgc_sydney_opera_house_line:before {
  content: "\f361";
  color: #09244b;
}

.mgc_t_shirt_2_fill:before {
  content: "\f362";
  color: #09244b;
}

.mgc_t_shirt_2_line:before {
  content: "\f363";
  color: #09244b;
}

.mgc_t_shirt_fill:before {
  content: "\f364";
  color: #09244b;
}

.mgc_t_shirt_line:before {
  content: "\f365";
  color: #09244b;
}

.mgc_table_2_fill:before {
  content: "\f366";
  color: #09244b;
}

.mgc_table_2_line:before {
  content: "\f367";
  color: #09244b;
}

.mgc_table_3_fill:before {
  content: "\f368";
  color: #09244b;
}

.mgc_table_3_line:before {
  content: "\f369";
  color: #09244b;
}

.mgc_table_fill:before {
  content: "\f36a";
  color: #09244b;
}

.mgc_table_line:before {
  content: "\f36b";
  color: #09244b;
}

.mgc_tag_2_fill:before {
  content: "\f36c";
  color: #09244b;
}

.mgc_tag_2_line:before {
  content: "\f36d";
  color: #09244b;
}

.mgc_tag_chevron_fill:before {
  content: "\f36e";
  color: #09244b;
}

.mgc_tag_chevron_line:before {
  content: "\f36f";
  color: #09244b;
}

.mgc_tag_fill:before {
  content: "\f370";
  color: #09244b;
}

.mgc_tag_line:before {
  content: "\f371";
  color: #09244b;
}

.mgc_taipei101_fill:before {
  content: "\f372";
  color: #09244b;
}

.mgc_taipei101_line:before {
  content: "\f373";
  color: #09244b;
}

.mgc_taj_mahal_fill:before {
  content: "\f374";
  color: #09244b;
}

.mgc_taj_mahal_line:before {
  content: "\f375";
  color: #09244b;
}

.mgc_tank_fill:before {
  content: "\f376";
  color: #09244b;
}

.mgc_tank_line:before {
  content: "\f377";
  color: #09244b;
}

.mgc_target_fill:before {
  content: "\f378";
  color: #09244b;
}

.mgc_target_line:before {
  content: "\f379";
  color: #09244b;
}

.mgc_task_2_fill:before {
  content: "\f37a";
  color: #09244b;
}

.mgc_task_2_line:before {
  content: "\f37b";
  color: #09244b;
}

.mgc_task_fill:before {
  content: "\f37c";
  color: #09244b;
}

.mgc_task_line:before {
  content: "\f37d";
  color: #09244b;
}

.mgc_Taurus_fill:before {
  content: "\f37e";
  color: #09244b;
}

.mgc_Taurus_line:before {
  content: "\f37f";
  color: #09244b;
}

.mgc_teacup_fill:before {
  content: "\f380";
  color: #09244b;
}

.mgc_teacup_line:before {
  content: "\f381";
  color: #09244b;
}

.mgc_telegram_fill:before {
  content: "\f382";
  color: #09244b;
}

.mgc_telegram_line:before {
  content: "\f383";
  color: #09244b;
}

.mgc_telescope_2_fill:before {
  content: "\f384";
  color: #09244b;
}

.mgc_telescope_2_line:before {
  content: "\f385";
  color: #09244b;
}

.mgc_telescope_fill:before {
  content: "\f386";
  color: #09244b;
}

.mgc_telescope_line:before {
  content: "\f387";
  color: #09244b;
}

.mgc_temple_of_heaven_fill:before {
  content: "\f388";
  color: #09244b;
}

.mgc_temple_of_heaven_line:before {
  content: "\f389";
  color: #09244b;
}

.mgc_tent_fill:before {
  content: "\f38a";
  color: #09244b;
}

.mgc_tent_line:before {
  content: "\f38b";
  color: #09244b;
}

.mgc_terminal_box_fill:before {
  content: "\f38c";
  color: #09244b;
}

.mgc_terminal_box_line:before {
  content: "\f38d";
  color: #09244b;
}

.mgc_terminal_fill:before {
  content: "\f38e";
  color: #09244b;
}

.mgc_terminal_line:before {
  content: "\f38f";
  color: #09244b;
}

.mgc_terror_fill:before {
  content: "\f390";
  color: #09244b;
}

.mgc_terror_line:before {
  content: "\f391";
  color: #09244b;
}

.mgc_test_tube_fill:before {
  content: "\f392";
  color: #09244b;
}

.mgc_test_tube_line:before {
  content: "\f393";
  color: #09244b;
}

.mgc_tether_USDT_fill:before {
  content: "\f394";
  color: #09244b;
}

.mgc_tether_USDT_line:before {
  content: "\f395";
  color: #09244b;
}

.mgc_text_2_fill:before {
  content: "\f396";
  color: #09244b;
}

.mgc_text_2_line:before {
  content: "\f397";
  color: #09244b;
}

.mgc_text_area_fill:before {
  content: "\f398";
  color: #09244b;
}

.mgc_text_area_line:before {
  content: "\f399";
  color: #09244b;
}

.mgc_text_color_fill:before {
  content: "\f39a";
  color: #09244b;
}

.mgc_text_color_line:before {
  content: "\f39b";
  color: #09244b;
}

.mgc_text_direction_left_fill:before {
  content: "\f39c";
  color: #09244b;
}

.mgc_text_direction_left_line:before {
  content: "\f39d";
  color: #09244b;
}

.mgc_text_direction_right_fill:before {
  content: "\f39e";
  color: #09244b;
}

.mgc_text_direction_right_line:before {
  content: "\f39f";
  color: #09244b;
}

.mgc_text_fill:before {
  content: "\f3a0";
  color: #09244b;
}

.mgc_text_line:before {
  content: "\f3a1";
  color: #09244b;
}

.mgc_textbox_ai_fill:before {
  content: "\f3a2";
  color: #09244b;
}

.mgc_textbox_ai_line:before {
  content: "\f3a3";
  color: #09244b;
}

.mgc_textbox_fill:before {
  content: "\f3a4";
  color: #09244b;
}

.mgc_textbox_line:before {
  content: "\f3a5";
  color: #09244b;
}

.mgc_thermometer_fill:before {
  content: "\f3a6";
  color: #09244b;
}

.mgc_thermometer_line:before {
  content: "\f3a7";
  color: #09244b;
}

.mgc_thought_fill:before {
  content: "\f3a8";
  color: #09244b;
}

.mgc_thought_line:before {
  content: "\f3a9";
  color: #09244b;
}

.mgc_threads_fill:before {
  content: "\f3aa";
  color: #09244b;
}

.mgc_threads_line:before {
  content: "\f3ab";
  color: #09244b;
}

.mgc_three_circles_fill:before {
  content: "\f3ac";
  color: #09244b;
}

.mgc_three_circles_line:before {
  content: "\f3ad";
  color: #09244b;
}

.mgc_thumb_down_2_fill:before {
  content: "\f3ae";
  color: #09244b;
}

.mgc_thumb_down_2_line:before {
  content: "\f3af";
  color: #09244b;
}

.mgc_thumb_down_fill:before {
  content: "\f3b0";
  color: #09244b;
}

.mgc_thumb_down_line:before {
  content: "\f3b1";
  color: #09244b;
}

.mgc_thumb_up_2_fill:before {
  content: "\f3b2";
  color: #09244b;
}

.mgc_thumb_up_2_line:before {
  content: "\f3b3";
  color: #09244b;
}

.mgc_thumb_up_fill:before {
  content: "\f3b4";
  color: #09244b;
}

.mgc_thumb_up_line:before {
  content: "\f3b5";
  color: #09244b;
}

.mgc_thunderstorm_fill:before {
  content: "\f3b6";
  color: #09244b;
}

.mgc_thunderstorm_line:before {
  content: "\f3b7";
  color: #09244b;
}

.mgc_ticket_fill:before {
  content: "\f3b8";
  color: #09244b;
}

.mgc_ticket_line:before {
  content: "\f3b9";
  color: #09244b;
}

.mgc_tiktok_fill:before {
  content: "\f3ba";
  color: #09244b;
}

.mgc_tiktok_line:before {
  content: "\f3bb";
  color: #09244b;
}

.mgc_time_duration_fill:before {
  content: "\f3bc";
  color: #09244b;
}

.mgc_time_duration_line:before {
  content: "\f3bd";
  color: #09244b;
}

.mgc_time_fill:before {
  content: "\f3be";
  color: #09244b;
}

.mgc_time_line:before {
  content: "\f3bf";
  color: #09244b;
}

.mgc_timeline_fill:before {
  content: "\f3c0";
  color: #09244b;
}

.mgc_timeline_line:before {
  content: "\f3c1";
  color: #09244b;
}

.mgc_to_do_fill:before {
  content: "\f3c2";
  color: #09244b;
}

.mgc_to_do_line:before {
  content: "\f3c3";
  color: #09244b;
}

.mgc_toggle_left_2_fill:before {
  content: "\f3c4";
  color: #09244b;
}

.mgc_toggle_left_2_line:before {
  content: "\f3c5";
  color: #09244b;
}

.mgc_toggle_left_fill:before {
  content: "\f3c6";
  color: #09244b;
}

.mgc_toggle_left_line:before {
  content: "\f3c7";
  color: #09244b;
}

.mgc_toggle_right_2_fill:before {
  content: "\f3c8";
  color: #09244b;
}

.mgc_toggle_right_2_line:before {
  content: "\f3c9";
  color: #09244b;
}

.mgc_toggle_right_fill:before {
  content: "\f3ca";
  color: #09244b;
}

.mgc_toggle_right_line:before {
  content: "\f3cb";
  color: #09244b;
}

.mgc_toilet_paper_fill:before {
  content: "\f3cc";
  color: #09244b;
}

.mgc_toilet_paper_line:before {
  content: "\f3cd";
  color: #09244b;
}

.mgc_tongue_fill:before {
  content: "\f3ce";
  color: #09244b;
}

.mgc_tongue_line:before {
  content: "\f3cf";
  color: #09244b;
}

.mgc_tool_fill:before {
  content: "\f3d0";
  color: #09244b;
}

.mgc_tool_line:before {
  content: "\f3d1";
  color: #09244b;
}

.mgc_tornado_2_fill:before {
  content: "\f3d2";
  color: #09244b;
}

.mgc_tornado_2_line:before {
  content: "\f3d3";
  color: #09244b;
}

.mgc_tornado_fill:before {
  content: "\f3d4";
  color: #09244b;
}

.mgc_tornado_line:before {
  content: "\f3d5";
  color: #09244b;
}

.mgc_tower_crane_fill:before {
  content: "\f3d6";
  color: #09244b;
}

.mgc_tower_crane_line:before {
  content: "\f3d7";
  color: #09244b;
}

.mgc_tower_fill:before {
  content: "\f3d8";
  color: #09244b;
}

.mgc_tower_line:before {
  content: "\f3d9";
  color: #09244b;
}

.mgc_toxophily_fill:before {
  content: "\f3da";
  color: #09244b;
}

.mgc_toxophily_line:before {
  content: "\f3db";
  color: #09244b;
}

.mgc_toy_horse_fill:before {
  content: "\f3dc";
  color: #09244b;
}

.mgc_toy_horse_line:before {
  content: "\f3dd";
  color: #09244b;
}

.mgc_traffic_cone_fill:before {
  content: "\f3de";
  color: #09244b;
}

.mgc_traffic_cone_line:before {
  content: "\f3df";
  color: #09244b;
}

.mgc_traffic_lights_fill:before {
  content: "\f3e0";
  color: #09244b;
}

.mgc_traffic_lights_line:before {
  content: "\f3e1";
  color: #09244b;
}

.mgc_train_2_fill:before {
  content: "\f3e2";
  color: #09244b;
}

.mgc_train_2_line:before {
  content: "\f3e3";
  color: #09244b;
}

.mgc_train_3_fill:before {
  content: "\f3e4";
  color: #09244b;
}

.mgc_train_3_line:before {
  content: "\f3e5";
  color: #09244b;
}

.mgc_train_4_fill:before {
  content: "\f3e6";
  color: #09244b;
}

.mgc_train_4_line:before {
  content: "\f3e7";
  color: #09244b;
}

.mgc_train_fill:before {
  content: "\f3e8";
  color: #09244b;
}

.mgc_train_line:before {
  content: "\f3e9";
  color: #09244b;
}

.mgc_transfer_2_fill:before {
  content: "\f3ea";
  color: #09244b;
}

.mgc_transfer_2_line:before {
  content: "\f3eb";
  color: #09244b;
}

.mgc_transfer_3_fill:before {
  content: "\f3ec";
  color: #09244b;
}

.mgc_transfer_3_line:before {
  content: "\f3ed";
  color: #09244b;
}

.mgc_transfer_4_fill:before {
  content: "\f3ee";
  color: #09244b;
}

.mgc_transfer_4_line:before {
  content: "\f3ef";
  color: #09244b;
}

.mgc_transfer_fill:before {
  content: "\f3f0";
  color: #09244b;
}

.mgc_transfer_horizontal_fill:before {
  content: "\f3f1";
  color: #09244b;
}

.mgc_transfer_horizontal_line:before {
  content: "\f3f2";
  color: #09244b;
}

.mgc_transfer_line:before {
  content: "\f3f3";
  color: #09244b;
}

.mgc_transfer_vertical_fill:before {
  content: "\f3f4";
  color: #09244b;
}

.mgc_transfer_vertical_line:before {
  content: "\f3f5";
  color: #09244b;
}

.mgc_transformation_fill:before {
  content: "\f3f6";
  color: #09244b;
}

.mgc_transformation_line:before {
  content: "\f3f7";
  color: #09244b;
}

.mgc_translate_2_ai_fill:before {
  content: "\f3f8";
  color: #09244b;
}

.mgc_translate_2_ai_line:before {
  content: "\f3f9";
  color: #09244b;
}

.mgc_translate_2_fill:before {
  content: "\f3fa";
  color: #09244b;
}

.mgc_translate_2_line:before {
  content: "\f3fb";
  color: #09244b;
}

.mgc_translate_fill:before {
  content: "\f3fc";
  color: #09244b;
}

.mgc_translate_line:before {
  content: "\f3fd";
  color: #09244b;
}

.mgc_tree_2_fill:before {
  content: "\f3fe";
  color: #09244b;
}

.mgc_tree_2_line:before {
  content: "\f3ff";
  color: #09244b;
}

.mgc_tree_3_fill:before {
  content: "\f400";
  color: #09244b;
}

.mgc_tree_3_line:before {
  content: "\f401";
  color: #09244b;
}

.mgc_tree_4_fill:before {
  content: "\f402";
  color: #09244b;
}

.mgc_tree_4_line:before {
  content: "\f403";
  color: #09244b;
}

.mgc_tree_fill:before {
  content: "\f404";
  color: #09244b;
}

.mgc_tree_line:before {
  content: "\f405";
  color: #09244b;
}

.mgc_trello_board_fill:before {
  content: "\f406";
  color: #09244b;
}

.mgc_trello_board_line:before {
  content: "\f407";
  color: #09244b;
}

.mgc_trending_down_fill:before {
  content: "\f408";
  color: #09244b;
}

.mgc_trending_down_line:before {
  content: "\f409";
  color: #09244b;
}

.mgc_trending_up_fill:before {
  content: "\f40a";
  color: #09244b;
}

.mgc_trending_up_line:before {
  content: "\f40b";
  color: #09244b;
}

.mgc_triangle_fill:before {
  content: "\f40c";
  color: #09244b;
}

.mgc_triangle_line:before {
  content: "\f40d";
  color: #09244b;
}

.mgc_triumphal_arch_fill:before {
  content: "\f40e";
  color: #09244b;
}

.mgc_triumphal_arch_line:before {
  content: "\f40f";
  color: #09244b;
}

.mgc_trophy_fill:before {
  content: "\f410";
  color: #09244b;
}

.mgc_trophy_line:before {
  content: "\f411";
  color: #09244b;
}

.mgc_trouser_fill:before {
  content: "\f412";
  color: #09244b;
}

.mgc_trouser_line:before {
  content: "\f413";
  color: #09244b;
}

.mgc_truck_fill:before {
  content: "\f414";
  color: #09244b;
}

.mgc_truck_line:before {
  content: "\f415";
  color: #09244b;
}

.mgc_trunk_fill:before {
  content: "\f416";
  color: #09244b;
}

.mgc_trunk_line:before {
  content: "\f417";
  color: #09244b;
}

.mgc_tunnel_fill:before {
  content: "\f418";
  color: #09244b;
}

.mgc_tunnel_line:before {
  content: "\f419";
  color: #09244b;
}

.mgc_tv_1_fill:before {
  content: "\f41a";
  color: #09244b;
}

.mgc_tv_1_line:before {
  content: "\f41b";
  color: #09244b;
}

.mgc_tv_2_fill:before {
  content: "\f41c";
  color: #09244b;
}

.mgc_tv_2_line:before {
  content: "\f41d";
  color: #09244b;
}

.mgc_TV_towe_fill:before {
  content: "\f41e";
  color: #09244b;
}

.mgc_TV_towe_line:before {
  content: "\f41f";
  color: #09244b;
}

.mgc_twitter_fill:before {
  content: "\f420";
  color: #09244b;
}

.mgc_twitter_line:before {
  content: "\f421";
  color: #09244b;
}

.mgc_typhoon_fill:before {
  content: "\f422";
  color: #09244b;
}

.mgc_typhoon_line:before {
  content: "\f423";
  color: #09244b;
}

.mgc_tyre_fill:before {
  content: "\f424";
  color: #09244b;
}

.mgc_tyre_line:before {
  content: "\f425";
  color: #09244b;
}

.mgc_UFO_2_fill:before {
  content: "\f426";
  color: #09244b;
}

.mgc_UFO_2_line:before {
  content: "\f427";
  color: #09244b;
}

.mgc_UFO_fill:before {
  content: "\f428";
  color: #09244b;
}

.mgc_UFO_line:before {
  content: "\f429";
  color: #09244b;
}

.mgc_umbrella_2_fill:before {
  content: "\f42a";
  color: #09244b;
}

.mgc_umbrella_2_line:before {
  content: "\f42b";
  color: #09244b;
}

.mgc_umbrella_fill:before {
  content: "\f42c";
  color: #09244b;
}

.mgc_umbrella_line:before {
  content: "\f42d";
  color: #09244b;
}

.mgc_unarchive_fill:before {
  content: "\f42e";
  color: #09244b;
}

.mgc_unarchive_line:before {
  content: "\f42f";
  color: #09244b;
}

.mgc_underline_fill:before {
  content: "\f430";
  color: #09244b;
}

.mgc_underline_line:before {
  content: "\f431";
  color: #09244b;
}

.mgc_unfold_horizontal_fill:before {
  content: "\f432";
  color: #09244b;
}

.mgc_unfold_horizontal_line:before {
  content: "\f433";
  color: #09244b;
}

.mgc_unfold_vertical_fill:before {
  content: "\f434";
  color: #09244b;
}

.mgc_unfold_vertical_line:before {
  content: "\f435";
  color: #09244b;
}

.mgc_unhappy_dizzy_fill:before {
  content: "\f436";
  color: #09244b;
}

.mgc_unhappy_dizzy_line:before {
  content: "\f437";
  color: #09244b;
}

.mgc_unhappy_fill:before {
  content: "\f438";
  color: #09244b;
}

.mgc_unhappy_line:before {
  content: "\f439";
  color: #09244b;
}

.mgc_union_fill:before {
  content: "\f43a";
  color: #09244b;
}

.mgc_union_line:before {
  content: "\f43b";
  color: #09244b;
}

.mgc_unlink_2_fill:before {
  content: "\f43c";
  color: #09244b;
}

.mgc_unlink_2_line:before {
  content: "\f43d";
  color: #09244b;
}

.mgc_unlink_fill:before {
  content: "\f43e";
  color: #09244b;
}

.mgc_unlink_line:before {
  content: "\f43f";
  color: #09244b;
}

.mgc_unlock_fill:before {
  content: "\f440";
  color: #09244b;
}

.mgc_unlock_line:before {
  content: "\f441";
  color: #09244b;
}

.mgc_up_fill:before {
  content: "\f442";
  color: #09244b;
}

.mgc_up_line:before {
  content: "\f443";
  color: #09244b;
}

.mgc_up_small_fill:before {
  content: "\f444";
  color: #09244b;
}

.mgc_up_small_line:before {
  content: "\f445";
  color: #09244b;
}

.mgc_upload_2_fill:before {
  content: "\f446";
  color: #09244b;
}

.mgc_upload_2_line:before {
  content: "\f447";
  color: #09244b;
}

.mgc_upload_3_fill:before {
  content: "\f448";
  color: #09244b;
}

.mgc_upload_3_line:before {
  content: "\f449";
  color: #09244b;
}

.mgc_upload_fill:before {
  content: "\f44a";
  color: #09244b;
}

.mgc_upload_line:before {
  content: "\f44b";
  color: #09244b;
}

.mgc_usb_fill:before {
  content: "\f44c";
  color: #09244b;
}

.mgc_usb_flash_disk_fill:before {
  content: "\f44d";
  color: #09244b;
}

.mgc_usb_flash_disk_line:before {
  content: "\f44e";
  color: #09244b;
}

.mgc_usb_line:before {
  content: "\f44f";
  color: #09244b;
}

.mgc_usd_coin_USDC_fill:before {
  content: "\f450";
  color: #09244b;
}

.mgc_usd_coin_USDC_line:before {
  content: "\f451";
  color: #09244b;
}

.mgc_user_1_fill:before {
  content: "\f452";
  color: #09244b;
}

.mgc_user_1_line:before {
  content: "\f453";
  color: #09244b;
}

.mgc_user_2_fill:before {
  content: "\f454";
  color: #09244b;
}

.mgc_user_2_line:before {
  content: "\f455";
  color: #09244b;
}

.mgc_user_3_fill:before {
  content: "\f456";
  color: #09244b;
}

.mgc_user_3_line:before {
  content: "\f457";
  color: #09244b;
}

.mgc_user_4_fill:before {
  content: "\f458";
  color: #09244b;
}

.mgc_user_4_line:before {
  content: "\f459";
  color: #09244b;
}

.mgc_user_5_fill:before {
  content: "\f45a";
  color: #09244b;
}

.mgc_user_5_line:before {
  content: "\f45b";
  color: #09244b;
}

.mgc_user_add_2_fill:before {
  content: "\f45c";
  color: #09244b;
}

.mgc_user_add_2_line:before {
  content: "\f45d";
  color: #09244b;
}

.mgc_user_add_fill:before {
  content: "\f45e";
  color: #09244b;
}

.mgc_user_add_line:before {
  content: "\f45f";
  color: #09244b;
}

.mgc_user_edit_fill:before {
  content: "\f460";
  color: #09244b;
}

.mgc_user_edit_line:before {
  content: "\f461";
  color: #09244b;
}

.mgc_user_follow_2_fill:before {
  content: "\f462";
  color: #09244b;
}

.mgc_user_follow_2_line:before {
  content: "\f463";
  color: #09244b;
}

.mgc_user_follow_fill:before {
  content: "\f464";
  color: #09244b;
}

.mgc_user_follow_line:before {
  content: "\f465";
  color: #09244b;
}

.mgc_user_forbid_fill:before {
  content: "\f466";
  color: #09244b;
}

.mgc_user_forbid_line:before {
  content: "\f467";
  color: #09244b;
}

.mgc_user_heart_fill:before {
  content: "\f468";
  color: #09244b;
}

.mgc_user_heart_line:before {
  content: "\f469";
  color: #09244b;
}

.mgc_user_hide_fill:before {
  content: "\f46a";
  color: #09244b;
}

.mgc_user_hide_line:before {
  content: "\f46b";
  color: #09244b;
}

.mgc_user_info_fill:before {
  content: "\f46c";
  color: #09244b;
}

.mgc_user_info_line:before {
  content: "\f46d";
  color: #09244b;
}

.mgc_user_lock_fill:before {
  content: "\f46e";
  color: #09244b;
}

.mgc_user_lock_line:before {
  content: "\f46f";
  color: #09244b;
}

.mgc_user_pin_fill:before {
  content: "\f470";
  color: #09244b;
}

.mgc_user_pin_line:before {
  content: "\f471";
  color: #09244b;
}

.mgc_user_question_fill:before {
  content: "\f472";
  color: #09244b;
}

.mgc_user_question_line:before {
  content: "\f473";
  color: #09244b;
}

.mgc_user_remove_2_fill:before {
  content: "\f474";
  color: #09244b;
}

.mgc_user_remove_2_line:before {
  content: "\f475";
  color: #09244b;
}

.mgc_user_remove_fill:before {
  content: "\f476";
  color: #09244b;
}

.mgc_user_remove_line:before {
  content: "\f477";
  color: #09244b;
}

.mgc_user_search_fill:before {
  content: "\f478";
  color: #09244b;
}

.mgc_user_search_line:before {
  content: "\f479";
  color: #09244b;
}

.mgc_user_security_fill:before {
  content: "\f47a";
  color: #09244b;
}

.mgc_user_security_line:before {
  content: "\f47b";
  color: #09244b;
}

.mgc_user_setting_fill:before {
  content: "\f47c";
  color: #09244b;
}

.mgc_user_setting_line:before {
  content: "\f47d";
  color: #09244b;
}

.mgc_user_star_fill:before {
  content: "\f47e";
  color: #09244b;
}

.mgc_user_star_line:before {
  content: "\f47f";
  color: #09244b;
}

.mgc_user_visible_fill:before {
  content: "\f480";
  color: #09244b;
}

.mgc_user_visible_line:before {
  content: "\f481";
  color: #09244b;
}

.mgc_user_warning_fill:before {
  content: "\f482";
  color: #09244b;
}

.mgc_user_warning_line:before {
  content: "\f483";
  color: #09244b;
}

.mgc_user_x_fill:before {
  content: "\f484";
  color: #09244b;
}

.mgc_user_x_line:before {
  content: "\f485";
  color: #09244b;
}

.mgc_vector_bezier_2_fill:before {
  content: "\f486";
  color: #09244b;
}

.mgc_vector_bezier_2_line:before {
  content: "\f487";
  color: #09244b;
}

.mgc_vector_bezier_3_fill:before {
  content: "\f488";
  color: #09244b;
}

.mgc_vector_bezier_3_line:before {
  content: "\f489";
  color: #09244b;
}

.mgc_vector_bezier_fill:before {
  content: "\f48a";
  color: #09244b;
}

.mgc_vector_bezier_line:before {
  content: "\f48b";
  color: #09244b;
}

.mgc_vector_group_fill:before {
  content: "\f48c";
  color: #09244b;
}

.mgc_vector_group_line:before {
  content: "\f48d";
  color: #09244b;
}

.mgc_version_fill:before {
  content: "\f48e";
  color: #09244b;
}

.mgc_version_line:before {
  content: "\f48f";
  color: #09244b;
}

.mgc_vest_fill:before {
  content: "\f490";
  color: #09244b;
}

.mgc_vest_line:before {
  content: "\f491";
  color: #09244b;
}

.mgc_viber_messenger_fill:before {
  content: "\f492";
  color: #09244b;
}

.mgc_viber_messenger_line:before {
  content: "\f493";
  color: #09244b;
}

.mgc_video_camera_2_fill:before {
  content: "\f494";
  color: #09244b;
}

.mgc_video_camera_2_line:before {
  content: "\f495";
  color: #09244b;
}

.mgc_video_camera_fill:before {
  content: "\f496";
  color: #09244b;
}

.mgc_video_camera_line:before {
  content: "\f497";
  color: #09244b;
}

.mgc_video_fill:before {
  content: "\f498";
  color: #09244b;
}

.mgc_video_line:before {
  content: "\f499";
  color: #09244b;
}

.mgc_VIP_1_fill:before {
  content: "\f49a";
  color: #09244b;
}

.mgc_VIP_1_line:before {
  content: "\f49b";
  color: #09244b;
}

.mgc_VIP_2_fill:before {
  content: "\f49c";
  color: #09244b;
}

.mgc_VIP_2_line:before {
  content: "\f49d";
  color: #09244b;
}

.mgc_VIP_3_fill:before {
  content: "\f49e";
  color: #09244b;
}

.mgc_VIP_3_line:before {
  content: "\f49f";
  color: #09244b;
}

.mgc_VIP_4_fill:before {
  content: "\f4a0";
  color: #09244b;
}

.mgc_VIP_4_line:before {
  content: "\f4a1";
  color: #09244b;
}

.mgc_Virgo_fill:before {
  content: "\f4a2";
  color: #09244b;
}

.mgc_Virgo_line:before {
  content: "\f4a3";
  color: #09244b;
}

.mgc_virus_fill:before {
  content: "\f4a4";
  color: #09244b;
}

.mgc_virus_line:before {
  content: "\f4a5";
  color: #09244b;
}

.mgc_visa_fill:before {
  content: "\f4a6";
  color: #09244b;
}

.mgc_visa_line:before {
  content: "\f4a7";
  color: #09244b;
}

.mgc_vison_pro_fill:before {
  content: "\f4a8";
  color: #09244b;
}

.mgc_vison_pro_line:before {
  content: "\f4a9";
  color: #09244b;
}

.mgc_vkontakte_fill:before {
  content: "\f4aa";
  color: #09244b;
}

.mgc_vkontakte_line:before {
  content: "\f4ab";
  color: #09244b;
}

.mgc_voice_2_fill:before {
  content: "\f4ac";
  color: #09244b;
}

.mgc_voice_2_line:before {
  content: "\f4ad";
  color: #09244b;
}

.mgc_voice_fill:before {
  content: "\f4ae";
  color: #09244b;
}

.mgc_voice_line:before {
  content: "\f4af";
  color: #09244b;
}

.mgc_volleyball_fill:before {
  content: "\f4b0";
  color: #09244b;
}

.mgc_volleyball_line:before {
  content: "\f4b1";
  color: #09244b;
}

.mgc_volume_fill:before {
  content: "\f4b2";
  color: #09244b;
}

.mgc_volume_line:before {
  content: "\f4b3";
  color: #09244b;
}

.mgc_volume_mute_fill:before {
  content: "\f4b4";
  color: #09244b;
}

.mgc_volume_mute_line:before {
  content: "\f4b5";
  color: #09244b;
}

.mgc_volume_off_fill:before {
  content: "\f4b6";
  color: #09244b;
}

.mgc_volume_off_line:before {
  content: "\f4b7";
  color: #09244b;
}

.mgc_vscode_fill:before {
  content: "\f4b8";
  color: #09244b;
}

.mgc_vscode_line:before {
  content: "\f4b9";
  color: #09244b;
}

.mgc_vue_fill:before {
  content: "\f4ba";
  color: #09244b;
}

.mgc_vue_line:before {
  content: "\f4bb";
  color: #09244b;
}

.mgc_walk_fill:before {
  content: "\f4bc";
  color: #09244b;
}

.mgc_walk_line:before {
  content: "\f4bd";
  color: #09244b;
}

.mgc_wallet_2_fill:before {
  content: "\f4be";
  color: #09244b;
}

.mgc_wallet_2_line:before {
  content: "\f4bf";
  color: #09244b;
}

.mgc_wallet_3_fill:before {
  content: "\f4c0";
  color: #09244b;
}

.mgc_wallet_3_line:before {
  content: "\f4c1";
  color: #09244b;
}

.mgc_wallet_4_fill:before {
  content: "\f4c2";
  color: #09244b;
}

.mgc_wallet_4_line:before {
  content: "\f4c3";
  color: #09244b;
}

.mgc_wallet_5_fill:before {
  content: "\f4c4";
  color: #09244b;
}

.mgc_wallet_5_line:before {
  content: "\f4c5";
  color: #09244b;
}

.mgc_wallet_fill:before {
  content: "\f4c6";
  color: #09244b;
}

.mgc_wallet_line:before {
  content: "\f4c7";
  color: #09244b;
}

.mgc_wardrobe_2_fill:before {
  content: "\f4c8";
  color: #09244b;
}

.mgc_wardrobe_2_line:before {
  content: "\f4c9";
  color: #09244b;
}

.mgc_wardrobe_fill:before {
  content: "\f4ca";
  color: #09244b;
}

.mgc_wardrobe_line:before {
  content: "\f4cb";
  color: #09244b;
}

.mgc_warning_fill:before {
  content: "\f4cc";
  color: #09244b;
}

.mgc_warning_line:before {
  content: "\f4cd";
  color: #09244b;
}

.mgc_wash_machine_fill:before {
  content: "\f4ce";
  color: #09244b;
}

.mgc_wash_machine_line:before {
  content: "\f4cf";
  color: #09244b;
}

.mgc_wastebasket_fill:before {
  content: "\f4d0";
  color: #09244b;
}

.mgc_wastebasket_line:before {
  content: "\f4d1";
  color: #09244b;
}

.mgc_watch_2_fill:before {
  content: "\f4d2";
  color: #09244b;
}

.mgc_watch_2_line:before {
  content: "\f4d3";
  color: #09244b;
}

.mgc_watch_fill:before {
  content: "\f4d4";
  color: #09244b;
}

.mgc_watch_line:before {
  content: "\f4d5";
  color: #09244b;
}

.mgc_watering_can_fill:before {
  content: "\f4d6";
  color: #09244b;
}

.mgc_watering_can_line:before {
  content: "\f4d7";
  color: #09244b;
}

.mgc_wave_fill:before {
  content: "\f4d8";
  color: #09244b;
}

.mgc_wave_line:before {
  content: "\f4d9";
  color: #09244b;
}

.mgc_web_fill:before {
  content: "\f4da";
  color: #09244b;
}

.mgc_web_line:before {
  content: "\f4db";
  color: #09244b;
}

.mgc_webhook_fill:before {
  content: "\f4dc";
  color: #09244b;
}

.mgc_webhook_line:before {
  content: "\f4dd";
  color: #09244b;
}

.mgc_wechat_fill:before {
  content: "\f4de";
  color: #09244b;
}

.mgc_wechat_line:before {
  content: "\f4df";
  color: #09244b;
}

.mgc_wechat_miniprogram_fill:before {
  content: "\f4e0";
  color: #09244b;
}

.mgc_wechat_miniprogram_line:before {
  content: "\f4e1";
  color: #09244b;
}

.mgc_wechat_pay_fill:before {
  content: "\f4e2";
  color: #09244b;
}

.mgc_wechat_pay_line:before {
  content: "\f4e3";
  color: #09244b;
}

.mgc_weibo_fill:before {
  content: "\f4e4";
  color: #09244b;
}

.mgc_weibo_line:before {
  content: "\f4e5";
  color: #09244b;
}

.mgc_wet_fill:before {
  content: "\f4e6";
  color: #09244b;
}

.mgc_wet_line:before {
  content: "\f4e7";
  color: #09244b;
}

.mgc_whatsapp_fill:before {
  content: "\f4e8";
  color: #09244b;
}

.mgc_whatsapp_line:before {
  content: "\f4e9";
  color: #09244b;
}

.mgc_wheel_fill:before {
  content: "\f4ea";
  color: #09244b;
}

.mgc_wheel_line:before {
  content: "\f4eb";
  color: #09244b;
}

.mgc_wheelchair_fill:before {
  content: "\f4ec";
  color: #09244b;
}

.mgc_wheelchair_line:before {
  content: "\f4ed";
  color: #09244b;
}

.mgc_whistle_fill:before {
  content: "\f4ee";
  color: #09244b;
}

.mgc_whistle_line:before {
  content: "\f4ef";
  color: #09244b;
}

.mgc_wifi_fill:before {
  content: "\f4f0";
  color: #09244b;
}

.mgc_wifi_line:before {
  content: "\f4f1";
  color: #09244b;
}

.mgc_wifi_off_fill:before {
  content: "\f4f2";
  color: #09244b;
}

.mgc_wifi_off_line:before {
  content: "\f4f3";
  color: #09244b;
}

.mgc_wind_fill:before {
  content: "\f4f4";
  color: #09244b;
}

.mgc_wind_line:before {
  content: "\f4f5";
  color: #09244b;
}

.mgc_windows_fill:before {
  content: "\f4f6";
  color: #09244b;
}

.mgc_windows_line:before {
  content: "\f4f7";
  color: #09244b;
}

.mgc_wine_fill:before {
  content: "\f4f8";
  color: #09244b;
}

.mgc_wine_line:before {
  content: "\f4f9";
  color: #09244b;
}

.mgc_wineglass_2_fill:before {
  content: "\f4fa";
  color: #09244b;
}

.mgc_wineglass_2_line:before {
  content: "\f4fb";
  color: #09244b;
}

.mgc_wineglass_fill:before {
  content: "\f4fc";
  color: #09244b;
}

.mgc_wineglass_line:before {
  content: "\f4fd";
  color: #09244b;
}

.mgc_wiper_fill:before {
  content: "\f4fe";
  color: #09244b;
}

.mgc_wiper_line:before {
  content: "\f4ff";
  color: #09244b;
}

.mgc_world_2_fill:before {
  content: "\f500";
  color: #09244b;
}

.mgc_world_2_line:before {
  content: "\f501";
  color: #09244b;
}

.mgc_world_fill:before {
  content: "\f502";
  color: #09244b;
}

.mgc_world_line:before {
  content: "\f503";
  color: #09244b;
}

.mgc_wreath_fill:before {
  content: "\f504";
  color: #09244b;
}

.mgc_wreath_line:before {
  content: "\f505";
  color: #09244b;
}

.mgc_x_skew_fill:before {
  content: "\f506";
  color: #09244b;
}

.mgc_x_skew_line:before {
  content: "\f507";
  color: #09244b;
}

.mgc_xbox_fill:before {
  content: "\f508";
  color: #09244b;
}

.mgc_xbox_line:before {
  content: "\f509";
  color: #09244b;
}

.mgc_xls_fill:before {
  content: "\f50a";
  color: #09244b;
}

.mgc_xls_line:before {
  content: "\f50b";
  color: #09244b;
}

.mgc_XRP_fill:before {
  content: "\f50c";
  color: #09244b;
}

.mgc_XRP_line:before {
  content: "\f50d";
  color: #09244b;
}

.mgc_y_skew_fill:before {
  content: "\f50e";
  color: #09244b;
}

.mgc_y_skew_line:before {
  content: "\f50f";
  color: #09244b;
}

.mgc_yinyang_fill:before {
  content: "\f510";
  color: #09244b;
}

.mgc_yinyang_line:before {
  content: "\f511";
  color: #09244b;
}

.mgc_youtube_fill:before {
  content: "\f512";
  color: #09244b;
}

.mgc_youtube_line:before {
  content: "\f513";
  color: #09244b;
}

.mgc_yuanbao_fill:before {
  content: "\f514";
  color: #09244b;
}

.mgc_yuanbao_line:before {
  content: "\f515";
  color: #09244b;
}

.mgc_ZA_sort_ascending_letters_fill:before {
  content: "\f516";
  color: #09244b;
}

.mgc_ZA_sort_ascending_letters_line:before {
  content: "\f517";
  color: #09244b;
}

.mgc_ZA_sort_descending_letters_fill:before {
  content: "\f518";
  color: #09244b;
}

.mgc_ZA_sort_descending_letters_line:before {
  content: "\f519";
  color: #09244b;
}

.mgc_zoom_in_fill:before {
  content: "\f51a";
  color: #09244b;
}

.mgc_zoom_in_line:before {
  content: "\f51b";
  color: #09244b;
}

.mgc_zoom_out_fill:before {
  content: "\f51c";
  color: #09244b;
}

.mgc_zoom_out_line:before {
  content: "\f51d";
  color: #09244b;
}

/* Theme Variables - Single source of truth for colors */

/**
 * Pink Theme Variables
 * Centralized color system for the Rally app
 * All colors are defined as CSS variables for easy theming
 */

:root {
  /* Rally Pink Palette */
  --color-pink-primary: rgb(248, 165, 194); /* Primary pink (audio toggle, affection, etc.) */
  --color-pink-secondary: #f4b3ef; /* Secondary pink (wallet strip, sidebar Start/New buttons) */
  /* Primary Pink Colors */
  /* Primary brand color (login/sidebar surfaces) */
  --theme-primary: var(--color-pink-primary);
  --theme-primary-dark: #e79de4; /* Slightly deeper for hover accents */
  --theme-primary-darker: #d66bd0; /* Darker companion */
  --theme-primary-muted: #cfa7c8; /* Muted companion */

  /* Secondary brand color (sidebar/wallet/buttons) */
  --theme-secondary: var(--color-pink-secondary);

  /* Background Colors */
  --theme-bg-main: rgb(246, 198, 220); /* Main pink background */
  --theme-bg-overlay-light: rgba(255, 255, 255, 0.1); /* Light overlay */
  --theme-bg-overlay-medium: rgba(255, 255, 255, 0.15); /* Medium overlay */
  --theme-bg-overlay-heavy: rgba(255, 255, 255, 0.2); /* Heavy overlay */
  --theme-bg-overlay-solid: rgba(255, 255, 255, 0.3); /* More solid overlay */

  /* Border Colors */
  --theme-border-light: rgba(255, 105, 180, 0.1); /* Very light border */
  --theme-border-medium: rgba(255, 105, 180, 0.15); /* Medium border */
  --theme-border-normal: rgba(255, 105, 180, 0.2); /* Normal border */
  --theme-border-strong: rgba(255, 105, 180, 0.3); /* Strong border */
  --theme-border-solid: #ff69b4; /* Solid pink border */

  /* Text Colors */
  --theme-text-primary: #374151; /* Main text color */
  --theme-text-secondary: #7f3651; /* Secondary text (pink tinted) */
  --theme-text-muted: #a67689; /* Muted text */
  --theme-text-accent: #d1477a; /* Accent text */
  --theme-text-white: #ffffff; /* White text */

  /* Interactive States */
  --theme-hover-bg: rgba(255, 255, 255, 0.1); /* Hover background */
  --theme-hover-border: #ff6b9d; /* Hover border */
  --theme-focus-shadow: rgba(255, 105, 180, 0.1); /* Focus shadow */
  --theme-active-bg: rgba(255, 107, 157, 0.12); /* Active state background */

  /* Component Specific */
  /* Primary surfaces use brand primary */
  --theme-button-primary-bg: var(--theme-primary);
  --theme-button-primary-hover: var(--theme-primary-dark);
  --theme-button-danger-bg: rgba(239, 68, 68, 0.1);
  --theme-button-danger-border: rgba(239, 68, 68, 0.3);
  --theme-button-danger-text: #dc2626;
  --theme-button-danger-hover: rgba(239, 68, 68, 0.2);

  /* Toggle/Switch Colors */
  --theme-toggle-bg: rgba(255, 255, 255, 0.2);
  --theme-toggle-border: rgba(255, 107, 157, 0.3);
  --theme-toggle-active-bg: #ff6b9d;
  --theme-toggle-thumb: #ffffff;

  /* Input/Select Colors */
  --theme-input-bg: rgba(255, 255, 255, 0.1);
  --theme-input-border: rgba(255, 105, 180, 0.2);
  --theme-input-hover-bg: rgba(255, 255, 255, 0.15);
  --theme-input-hover-border: #ff6b9d;
  --theme-input-focus-border: #ff6b9d;
  --theme-input-focus-shadow: 0 0 0 2px rgba(255, 105, 180, 0.1);

  /* Sidebar Specific */
  /* Sidebar surfaces (very light pink) */
  --theme-sidebar-surface: #fff9f9; /* Almost white, light pink */
  --theme-sidebar-bg: var(--theme-sidebar-surface);
  --theme-sidebar-header-bg: var(--theme-sidebar-surface);
  --theme-sidebar-wallet-bg: var(--theme-sidebar-surface);
  --theme-sidebar-wallet-avatar-bg: #fff4f6;

  /* Section Headers */
  --theme-section-title-color: #ff6b9d;
  --theme-section-title-size: 0.875rem;
  --theme-section-title-weight: 600;
  --theme-section-title-transform: uppercase;
  --theme-section-title-spacing: 0.05em;
  --theme-section-divider: 1px solid rgba(255, 105, 180, 0.15);

  /* Transitions */
  --theme-transition-fast: 0.15s ease;
  --theme-transition-normal: 0.2s ease;
  --theme-transition-slow: 0.3s ease;

  /* Spacing */
  --theme-spacing-xs: 0.25rem;
  --theme-spacing-sm: 0.5rem;
  --theme-spacing-md: 0.75rem;
  --theme-spacing-lg: 1rem;
  --theme-spacing-xl: 1.5rem;
  --theme-spacing-2xl: 2rem;

  /* Border Radius */
  --theme-radius-sm: 0.25rem;
  --theme-radius-md: 0.375rem;
  --theme-radius-lg: 0.5rem;
  --theme-radius-xl: 0.75rem;
  --theme-radius-full: 9999px;

  /* Shadows */
  --theme-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --theme-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --theme-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --theme-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
  --theme-shadow-pink-sm: 0 1px 3px rgba(255, 107, 157, 0.2);
  --theme-shadow-pink-md: 0 4px 12px rgba(255, 182, 193, 0.3);

  /* Gradients */
  --theme-gradient-primary: linear-gradient(135deg, #ff5a8b 0%, #b83e5a 100%);
  --theme-gradient-bg: linear-gradient(135deg, #fff6f9 0%, #f0e6ff 100%);
}

/* Dark mode overrides (if needed in future) */

@media (prefers-color-scheme: dark) {
  :root {
    /* Can override variables here for dark mode */
  }
}

/* Design System (includes all design tokens) */

/**
 * Design System - CSS Custom Properties
 * Centralized design tokens for consistent theming and maintainability
 */

:root {
  /* =============================================================================
     Color Palette - Semantic Colors
     ============================================================================= */

  /* Primary Brand Colors */
  --color-primary-50: #fef7f7;
  --color-primary-100: #fef2f2;
  --color-primary-200: #fecaca;
  --color-primary-300: #fca5a5;
  --color-primary-400: #f87171;
  --color-primary-500: #ef4444;
  --color-primary-600: #dc2626;
  --color-primary-700: #b91c1c;
  --color-primary-800: #991b1b;
  --color-primary-900: #7f1d1d;

  /* Accent Colors */
  --color-accent-50: #fdf4ff;
  --color-accent-100: #fae8ff;
  --color-accent-200: #f5d0fe;
  --color-accent-300: #f0abfc;
  --color-accent-400: #e879f9;
  --color-accent-500: #d946ef;
  --color-accent-600: #c026d3;
  --color-accent-700: #a21caf;
  --color-accent-800: #86198f;
  --color-accent-900: #701a75;

  /* Neutral Grays */
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;

  /* Success Colors */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;

  /* Warning Colors */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  /* Error Colors */
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;

  /* Info Colors */
  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-200: #bfdbfe;
  --color-info-300: #93c5fd;
  --color-info-400: #60a5fa;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;
  --color-info-800: #1e40af;
  --color-info-900: #1e3a8a;

  /* =============================================================================
     Typography
     ============================================================================= */

  /* Font Families */
  --font-family-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --font-family-mono:
    'JetBrains Mono', 'Fira Code', 'Roboto Mono', 'Monaco', 'Cascadia Code', 'Ubuntu Mono',
    monospace;
  --font-family-display: 'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Font Sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */
  --font-size-6xl: 3.75rem; /* 60px */
  --font-size-7xl: 4.5rem; /* 72px */
  --font-size-8xl: 6rem; /* 96px */
  --font-size-9xl: 8rem; /* 128px */

  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* =============================================================================
     Spacing & Layout
     ============================================================================= */

  /* Spacing Scale */
  --space-0: 0;
  --space-px: 1px;
  --space-0_5: 0.125rem; /* 2px */
  --space-1: 0.25rem; /* 4px */
  --space-1_5: 0.375rem; /* 6px */
  --space-2: 0.5rem; /* 8px */
  --space-2_5: 0.625rem; /* 10px */
  --space-3: 0.75rem; /* 12px */
  --space-3_5: 0.875rem; /* 14px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-7: 1.75rem; /* 28px */
  --space-8: 2rem; /* 32px */
  --space-9: 2.25rem; /* 36px */
  --space-10: 2.5rem; /* 40px */
  --space-11: 2.75rem; /* 44px */
  --space-12: 3rem; /* 48px */
  --space-14: 3.5rem; /* 56px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-28: 7rem; /* 112px */
  --space-32: 8rem; /* 128px */
  --space-36: 9rem; /* 144px */
  --space-40: 10rem; /* 160px */
  --space-44: 11rem; /* 176px */
  --space-48: 12rem; /* 192px */
  --space-52: 13rem; /* 208px */
  --space-56: 14rem; /* 224px */
  --space-60: 15rem; /* 240px */
  --space-64: 16rem; /* 256px */
  --space-72: 18rem; /* 288px */
  --space-80: 20rem; /* 320px */
  --space-96: 24rem; /* 384px */

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem; /* 2px */
  --radius-base: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-3xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* =============================================================================
     Shadows & Effects
     ============================================================================= */

  /* Box Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-none: 0 0 rgba(0, 0, 0, 0);

  /* Colored Shadows */
  --shadow-primary: 0 4px 14px 0 rgba(239, 68, 68, 0.15);
  --shadow-accent: 0 4px 14px 0 rgba(217, 70, 239, 0.15);
  --shadow-success: 0 4px 14px 0 rgba(34, 197, 94, 0.15);
  --shadow-warning: 0 4px 14px 0 rgba(245, 158, 11, 0.15);
  --shadow-error: 0 4px 14px 0 rgba(239, 68, 68, 0.15);

  /* =============================================================================
     Transitions & Animations
     ============================================================================= */

  /* Transition Durations */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* Transition Timing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Common Transitions */
  --transition-fast: all var(--duration-150) var(--ease-out);
  --transition-base: all var(--duration-200) var(--ease-out);
  --transition-slow: all var(--duration-300) var(--ease-out);
  --transition-color:
    color var(--duration-150) var(--ease-out), background-color var(--duration-150) var(--ease-out),
    border-color var(--duration-150) var(--ease-out);
  --transition-transform: transform var(--duration-200) var(--ease-out);
  --transition-opacity: opacity var(--duration-200) var(--ease-out);

  /* =============================================================================
     Z-Index Layers
     ============================================================================= */

  --z-base: 0;
  --z-content: 10;
  --z-header: 100;
  --z-overlay: 1000;
  --z-modal: 2000;
  --z-popover: 3000;
  --z-tooltip: 4000;
  --z-toast: 5000;

  /* =============================================================================
     Breakpoints (for JavaScript usage)
     ============================================================================= */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* =============================================================================
     Component-Specific Variables
     ============================================================================= */

  /* Button Variables */
  --button-height-sm: 2rem;
  --button-height-md: 2.5rem;
  --button-height-lg: 3rem;
  --button-padding-x-sm: var(--space-3);
  --button-padding-x-md: var(--space-4);
  --button-padding-x-lg: var(--space-6);

  /* Input Variables */
  --input-height-sm: 2rem;
  --input-height-md: 2.5rem;
  --input-height-lg: 3rem;
  --input-padding-x: var(--space-3);
  --input-border-width: 1px;

  /* Card Variables */
  --card-padding: var(--space-6);
  --card-radius: var(--radius-lg);
  --card-border-width: 1px;

  /* Modal Variables */
  --modal-backdrop: rgba(0, 0, 0, 0.5);
  --modal-max-width: 32rem;
  --modal-padding: var(--space-6);
  --modal-radius: var(--radius-lg);

  /* =============================================================================
     Semantic Theme Variables (Light Mode)
     ============================================================================= */

  /* Background Colors */
  --bg-page: var(--color-neutral-50);
  --bg-surface: white;
  --bg-surface-elevated: white;
  --bg-surface-hover: var(--color-neutral-100);
  --bg-surface-active: var(--color-neutral-200);

  /* Text Colors */
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-500);
  --text-inverse: white;
  --text-link: var(--color-primary-600);
  --text-link-hover: var(--color-primary-700);

  /* Border Colors */
  --border-primary: var(--color-neutral-200);
  --border-secondary: var(--color-neutral-300);
  --border-focus: var(--color-primary-500);
  --border-error: var(--color-error-500);
  --border-success: var(--color-success-500);

  /* Interactive Colors */
  --interactive-primary: var(--color-primary-600);
  --interactive-primary-hover: var(--color-primary-700);
  --interactive-primary-active: var(--color-primary-800);
  --interactive-secondary: var(--color-neutral-600);
  --interactive-secondary-hover: var(--color-neutral-700);
  --interactive-secondary-active: var(--color-neutral-800);
}

/* =============================================================================
   Dark Mode Theme
   ============================================================================= */

[data-theme='dark'] {
  /* Background Colors */
  --bg-page: var(--color-neutral-900);
  --bg-surface: var(--color-neutral-800);
  --bg-surface-elevated: var(--color-neutral-700);
  --bg-surface-hover: var(--color-neutral-700);
  --bg-surface-active: var(--color-neutral-600);

  /* Text Colors */
  --text-primary: var(--color-neutral-100);
  --text-secondary: var(--color-neutral-300);
  --text-tertiary: var(--color-neutral-400);
  --text-inverse: var(--color-neutral-900);
  --text-link: var(--color-primary-400);
  --text-link-hover: var(--color-primary-300);

  /* Border Colors */
  --border-primary: var(--color-neutral-700);
  --border-secondary: var(--color-neutral-600);
  --border-focus: var(--color-primary-500);
  --border-error: var(--color-error-500);
  --border-success: var(--color-success-500);

  /* Interactive Colors */
  --interactive-primary: var(--color-primary-500);
  --interactive-primary-hover: var(--color-primary-400);
  --interactive-primary-active: var(--color-primary-300);
  --interactive-secondary: var(--color-neutral-400);
  --interactive-secondary-hover: var(--color-neutral-300);
  --interactive-secondary-active: var(--color-neutral-200);

  /* Shadows (adjusted for dark mode) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* =============================================================================
   High Contrast Mode
   ============================================================================= */

[data-theme='high-contrast'] {
  /* Background Colors */
  --bg-page: black;
  --bg-surface: black;
  --bg-surface-elevated: #1a1a1a;
  --bg-surface-hover: #333333;
  --bg-surface-active: #4d4d4d;

  /* Text Colors */
  --text-primary: white;
  --text-secondary: #e6e6e6;
  --text-tertiary: #cccccc;
  --text-inverse: black;
  --text-link: #66b3ff;
  --text-link-hover: #99ccff;

  /* Border Colors */
  --border-primary: #666666;
  --border-secondary: #999999;
  --border-focus: #ffff00;
  --border-error: #ff6666;
  --border-success: #66ff66;

  /* Interactive Colors */
  --interactive-primary: #0066cc;
  --interactive-primary-hover: #0080ff;
  --interactive-primary-active: #0099ff;
  --interactive-secondary: #666666;
  --interactive-secondary-hover: #808080;
  --interactive-secondary-active: #999999;
}

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

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-75: 0ms;
    --duration-100: 0ms;
    --duration-150: 0ms;
    --duration-200: 0ms;
    --duration-300: 0ms;
    --duration-500: 0ms;
    --duration-700: 0ms;
    --duration-1000: 0ms;

    --transition-fast: none;
    --transition-base: none;
    --transition-slow: none;
    --transition-color: none;
    --transition-transform: none;
    --transition-opacity: none;
  }
}

/* =============================================================================
   Print Styles
   ============================================================================= */

@media print {
  :root {
    /* Optimize colors for print */
    --text-primary: black;
    --text-secondary: #333333;
    --text-tertiary: #666666;
    --bg-page: white;
    --bg-surface: white;
    --border-primary: #cccccc;

    /* Remove shadows for print */
    --shadow-sm: none;
    --shadow-base: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;
  }
}

/* Variables and Base Styles */

/* 
 * Rally Frontend-2 Design System Variables
 * Comprehensive theming system with consistent colors, fonts, and design tokens
 */

:root {
  /* Font System */
  --font-primary:
    'Urbanist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Maple Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  --font-display: 'Urbanist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Color Palette - Rally Theme */
  --color-primary-50: #fef7ff;
  --color-primary-100: #fce8ff;
  --color-primary-200: #f9d1ff;
  --color-primary-300: #f5a9ff;
  --color-primary-400: #ee70ff;
  --color-primary-500: #e338ff;
  --color-primary-600: #d016e8;
  --color-primary-700: #b00cc4;
  --color-primary-800: #8f0a9f;
  --color-primary-900: #760a82;

  /* Secondary Color - Purple */
  --color-secondary-50: #f3f0ff;
  --color-secondary-100: #e9e3ff;
  --color-secondary-200: #d5ccff;
  --color-secondary-300: #b8a5ff;
  --color-secondary-400: #9674ff;
  --color-secondary-500: #7c3aed;
  --color-secondary-600: #6d28d9;
  --color-secondary-700: #5b21b6;
  --color-secondary-800: #4c1d95;
  --color-secondary-900: #3c1a78;

  /* Accent Color - Pink */
  --color-accent-50: #fff0f6;
  --color-accent-100: #ffe3ee;
  --color-accent-200: #ffccd7;
  --color-accent-300: #ffa0b4;
  --color-accent-400: rgb(248, 165, 194);
  --color-accent-500: #ff1f7a;
  --color-accent-600: #e60965;
  --color-accent-700: #c2024e;
  --color-accent-800: #a10043;
  --color-accent-900: #8a003d;

  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  /* Success, Warning, Error Colors */
  --color-success-50: #f0fdf4;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;

  --color-warning-50: #fffbeb;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;

  --color-error-50: #fef2f2;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;

  /* Semantic Color Assignments */
  --color-background: var(--color-neutral-50);
  --color-background-secondary: var(--color-neutral-100);
  --color-surface: #ffffff;
  --color-surface-secondary: var(--color-neutral-50);

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-inverse: #ffffff;

  --color-border-light: var(--color-neutral-200);
  --color-border-medium: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-400);

  /* Interactive States */
  --color-interactive-primary: var(--color-accent-500);
  --color-interactive-primary-hover: var(--color-accent-600);
  --color-interactive-primary-active: var(--color-accent-700);
  --color-interactive-primary-disabled: var(--color-neutral-300);

  --color-interactive-secondary: var(--color-neutral-500);
  --color-interactive-secondary-hover: var(--color-neutral-600);
  --color-interactive-secondary-active: var(--color-neutral-700);

  /* Theme-specific hover states */
  --color-hover-light: var(--color-accent-50);
  --color-hover-medium: var(--color-accent-100);
  --color-hover-strong: var(--color-accent-200);
  --color-hover-text: var(--color-accent-700);

  /* Button Specific Colors */
  --color-button-primary-bg: var(--color-accent-500);
  --color-button-primary-hover: var(--color-accent-600);
  --color-button-primary-active: var(--color-accent-700);
  --color-button-primary-disabled: var(--color-neutral-300);
  --color-button-primary-text: var(--color-text-inverse);

  --color-button-secondary-bg: var(--color-neutral-200);
  --color-button-secondary-hover: var(--color-neutral-300);
  --color-button-secondary-active: var(--color-neutral-400);
  --color-button-secondary-text: var(--color-text-primary);

  /* Responsive Breakpoints */
  --breakpoint-xs: 360px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440px;

  /* Spacing Scale */
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem; /* 2px */
  --radius-base: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-3xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Colored Shadows */
  --shadow-primary: 0 4px 16px rgba(255, 107, 157, 0.3);
  --shadow-primary-lg: 0 8px 32px rgba(255, 107, 157, 0.4);
  --shadow-secondary: 0 4px 16px rgba(124, 58, 237, 0.3);
  --shadow-accent: 0 4px 16px rgba(255, 31, 122, 0.3);

  /* Z-Index Scale - Systematic layering */
  --z-background: -1;
  --z-base: 0;
  --z-content: 1;
  --z-header: 10;
  --z-overlay: 100;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  --z-debug: 9999;

  /* Component-specific z-indexes */
  --z-wallet: var(--z-header);
  --z-chat-input: calc(var(--z-header) + 1);
  --z-affection: var(--z-header);
  --z-actions-menu: calc(var(--z-header) + 2);
  --z-visual-novel: var(--z-overlay);
  --z-message-overlay: calc(var(--z-overlay) + 1);
  --z-settings-panel: var(--z-modal);

  /* Live2D positioning */
  --live2d-translate-y: -14%;

  /* Affection theme colors */
  --color-affection-outline: rgb(248, 165, 194);
  --color-gift-red: #ef4444; /* gift icon red */

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-all: all var(--transition-base);

  /* Common Transforms */
  --transform-scale-sm: scale(0.95);
  --transform-scale-base: scale(1);
  --transform-scale-md: scale(1.05);
  --transform-scale-lg: scale(1.1);
  --transform-lift-sm: translateY(-1px);
  --transform-lift-md: translateY(-2px);
  --transform-lift-lg: translateY(-4px);

  /* Layout System - Fixed Element Coordination */
  --layout-header-height: 60px;
  --layout-wallet-width: 200px;
  --layout-chat-input-height: 80px;
  --layout-affection-width: 120px;

  /* Safe areas to prevent overlap */
  --safe-area-top: calc(var(--layout-header-height) + var(--space-2));
  --safe-area-right: calc(var(--layout-wallet-width) + var(--space-3));
  --safe-area-bottom: calc(var(--layout-chat-input-height) + var(--space-2));
  --safe-area-left: calc(var(--layout-affection-width) + var(--space-3));

  /* Component Specific Variables */
  --input-height: 2.75rem;
  --button-height: 2.75rem;
  --button-height-sm: 2.25rem;
  --button-height-lg: 3rem;

  /* Chat Interface Specific */
  --chat-input-bg: rgba(255, 255, 255, 0.65);
  --chat-input-border: rgba(255, 255, 255, 0.4);
  --chat-bubble-user: var(--color-neutral-200);
  --chat-bubble-assistant: var(--color-accent-200);

  /* Panel Colors */
  --panel-bg: rgba(255, 255, 255, 0.95);
  --panel-border: rgba(255, 182, 193, 0.3);
  --panel-shadow: var(--shadow-primary);

  /* Glass Morphism Effects */
  --glass-bg-light: rgba(255, 255, 255, 0.14);
  --glass-bg-medium: rgba(255, 255, 255, 0.22);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-bg-ultra: rgba(255, 255, 255, 0.08);
  --glass-blur-light: blur(10px);
  --glass-blur-medium: blur(16px);
  --glass-blur-strong: blur(24px);
  --glass-border-light: rgba(255, 255, 255, 0.18);
  --glass-border-medium: rgba(255, 255, 255, 0.32);
  --glass-border-strong: rgba(255, 255, 255, 0.5);
  --glass-border-inner: rgba(255, 255, 255, 0.35);
  --glass-highlight: rgba(255, 255, 255, 0.28);
  --glass-shadow: rgba(0, 0, 0, 0.14);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 100%);

  /* Dropdown Theming */
  --dropdown-bg: var(--color-surface);
  --dropdown-border: var(--color-border-light);
  --dropdown-shadow: var(--shadow-lg);
  --dropdown-item-hover: var(--color-hover-light);
  --dropdown-item-hover-text: var(--color-hover-text);
  --dropdown-divider: var(--color-border-light);

  /* Danger/Logout States */
  --color-danger-bg: var(--color-error-50);
  --color-danger-hover: #fef2f2;
  --color-danger-text: var(--color-error-500);
  --color-danger-text-hover: var(--color-error-600);

  /* Common Shadows */
  --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-button-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-glass: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-pink-sm: 0 2px 8px rgba(255, 107, 157, 0.3);
  --shadow-pink-md: 0 4px 12px rgba(255, 182, 193, 0.2);

  /* Common Gradients */
  --gradient-background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  --gradient-pink: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
  --gradient-accent: linear-gradient(
    135deg,
    var(--color-accent-100) 0%,
    var(--color-accent-200) 100%
  );

  /* Global Font Assignment */
  font-family: var(--font-primary);
  color-scheme: light;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Legacy Support - Keep for backwards compatibility */
  --background-color: var(--color-background);
  --text-color: var(--color-text-primary);
  --primary-color: var(--color-accent-500);
  --secondary-color: var(--color-secondary-500);
  --accent-color: var(--color-accent-300);
  --border-light: var(--color-border-light);
  --border-medium: var(--color-border-medium);
  --border-dark: var(--color-border-strong);
  --button-background: var(--color-button-primary-bg);
  --button-text-color: var(--color-button-primary-text);
  --button-hover-bg: var(--color-button-primary-hover);
  --button-active-bg: var(--color-button-primary-active);
  --drop-shadow: var(--shadow-primary);
  --subtle-shadow: var(--shadow-sm);

  /* Additional legacy variables */
  --border-radius: var(--radius-xl);
  --button-radius: var(--radius-full);
  --card-radius: var(--radius-2xl);
  --card-padding: var(--space-6);
  --content-max-width: 1200px;
  --content-padding: var(--space-8);
}

/* Reusable Animations */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Global styles */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
  overflow-y: auto; /* Allow vertical scroll */
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* Minimum height, can expand */
  width: 100%;
  position: relative;
  background-color: var(--color-background);
  background-image: linear-gradient(
    135deg,
    rgba(248, 250, 252, 0.95) 0%,
    rgba(241, 245, 249, 0.95) 100%
  );
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-normal);
}

/* Ensure React root doesn't constrain height */

#root {
  min-height: 100vh;
  width: 100%;
  position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}

h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  background: linear-gradient(90deg, var(--color-accent-500), var(--color-secondary-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  letter-spacing: 0.05em;
}

h2 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-4);
  letter-spacing: 0.03em;
}

h3 {
  font-size: var(--font-size-xl);
  letter-spacing: 0.02em;
}

h4 {
  font-size: var(--font-size-lg);
}

h5 {
  font-size: var(--font-size-base);
}

h6 {
  font-size: var(--font-size-sm);
}

p {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
}

a {
  color: var(--color-accent-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-600);
}

/* Button styles */

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--button-radius);
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  letter-spacing: 0.02em;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  min-height: var(--button-height);
}

button:hover,
.button:hover {
  background: var(--color-button-primary-hover);
  transform: translateY(-1px);
  box-shadow: none;
}

button:active,
.button:active {
  background: var(--color-button-primary-active);
  transform: translateY(0);
  box-shadow: none;
}

button:disabled,
.button:disabled {
  background: var(--color-button-primary-disabled);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Input styles */

input,
textarea,
select {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

/* Monospace elements */

code,
pre,
.font-mono {
  font-family: var(--font-mono);
}

/* Custom Scrollbar */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 182, 193, 0.05); /* Very subtle pink track */
  border-radius: var(--radius-base);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 182, 193, 0.15); /* Subtle pink thumb */
  border-radius: var(--radius-base);
  transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 182, 193, 0.25); /* Slightly more visible on hover */
}

/* Firefox scrollbar */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 182, 193, 0.15) rgba(255, 182, 193, 0.05);
}

/* Layout */

/* 
 * Layout styles for landing page 
 */

/* Animated Text Background */

.animated-text-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
}

.animated-text-container {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  transform: rotate(var(--text-animation-angle));
  animation: moveTextBackground var(--text-animation-duration) linear infinite;
  overflow: visible;
}

.animated-text-line {
  position: absolute;
  white-space: nowrap;
  color: var(--text-animation-color);
  font-size: var(--text-animation-font-size);
  font-weight: 900;
  line-height: var(--text-animation-line-height);
  letter-spacing: var(--text-animation-spacing);
  text-transform: uppercase;
  width: 300%;
}

@keyframes moveTextBackground {
  0% {
    transform: rotate(var(--text-animation-angle)) translateY(0);
  }
  100% {
    transform: rotate(var(--text-animation-angle))
      translateY(calc(-1 * var(--text-animation-line-height)));
  }
}

/* Position lines for animated background */

.animated-text-line:nth-child(1) {
  top: 0%;
}

.animated-text-line:nth-child(2) {
  top: var(--text-animation-line-height);
}

.animated-text-line:nth-child(3) {
  top: calc(2 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(4) {
  top: calc(3 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(5) {
  top: calc(4 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(6) {
  top: calc(5 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(7) {
  top: calc(6 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(8) {
  top: calc(7 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(9) {
  top: calc(8 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(10) {
  top: calc(9 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(11) {
  top: calc(10 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(12) {
  top: calc(11 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(13) {
  top: calc(12 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(14) {
  top: calc(13 * var(--text-animation-line-height));
}

.animated-text-line:nth-child(15) {
  top: calc(14 * var(--text-animation-line-height));
}

/* Single page layout */

.landing-container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    'live2d info'
    'footer footer';
  gap: 0;
  padding: 0;
  overflow-y: auto;
  max-width: 100%;
}

/* Live2D showcase */

.live2d-showcase {
  grid-area: live2d;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  position: relative;
  min-height: 550px;
  height: auto;
  box-sizing: border-box;
  overflow: visible;
}

/* Info section */

.info-section {
  grid-area: info;
  padding: var(--content-padding);
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-height: 100vh;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
}

/* Navigation container */

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* Navigation links */

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.1rem;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

.nav-link:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--primary-color);
}

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

.nav-link.active {
  color: var(--primary-color);
  font-weight: 600;
}

.nav-link.active:after {
  width: 100%;
}

/* Content sections */

.content-section {
  display: none;
  opacity: 1;
  transition:
    opacity 0.3s ease,
    transform 0.4s ease;
}

.content-section.active {
  display: block;
}

/* Content section animations */

.content-enter {
  animation: contentEnter 0.5s ease forwards;
}

.content-exit {
  animation: contentExit 0.3s ease forwards;
}

@keyframes contentEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes contentExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Content container for large screens */

.content-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  width: 100%;
}

/* Footer */

footer {
  grid-area: footer;
  padding: 1.5rem 0;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 70px;
}

.footer-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0 var(--content-padding);
  /* Use the same grid layout as the main container */
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 100%;
}

.footer-logo {
  height: 30px;
  grid-column: 1;
  padding-left: 1.5rem;
}

.footer-logo img {
  height: 100%;
  width: auto;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 2rem;
  grid-column: 2;
  justify-self: end;
  padding-right: 1.5rem;
}

.footer-social {
  display: flex;
  gap: 1.5rem;
}

.footer-social a {
  color: #ffffff;
  opacity: 0.8;
  transition:
    opacity 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-social a img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.footer-social a:hover img {
  filter: brightness(0) invert(0.9) sepia(1) saturate(5) hue-rotate(300deg);
}

.footer-copyright {
  color: #ffffff;
  opacity: 0.7;
  font-size: 0.85rem;
}

/* For very large screens */

@media (min-width: 1921px) {
  .landing-container {
    max-width: 100%;
  }

  .live2d-showcase,
  .info-section {
    margin-left: auto;
    margin-right: auto;
  }

  .live2d-showcase {
    max-width: calc(var(--content-max-width) / 2);
  }

  .info-section {
    max-width: calc(var(--content-max-width) / 2);
  }

  footer {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .footer-content {
    max-width: 100%;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
}

/* Media queries for responsive design */

@media (max-width: 1024px) {
  .landing-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      'live2d'
      'info'
      'footer';
    height: auto;
    overflow-y: auto;
  }

  .live2d-showcase {
    height: 50vh;
    min-height: 500px;
    padding: 1rem;
  }

  .info-section {
    max-height: none;
    padding: 1.5rem 1rem;
  }

  .nav-container {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-links {
    justify-content: center;
    width: 100%;
  }

  .nav-buttons {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 768px) {
  /* Remove fixed height constraints for scrollable layout */
  html,
  body {
    overflow-y: auto;
    height: auto;
  }

  .landing-container {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  .live2d-showcase {
    min-height: 550px;
    height: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto 1rem;
    padding: 1rem;
    overflow: visible;
  }

  .info-section {
    padding: var(--content-padding);
    overflow-y: auto;
    height: auto;
    max-height: none;
    width: 100%;
    box-sizing: border-box;
  }

  footer {
    flex-shrink: 0;
    min-height: 70px;
    padding: 0.75rem 1rem;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .nav-links {
    gap: 1rem;
    font-size: 0.9rem;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    display: flex; /* Override grid for mobile */
  }

  .footer-logo {
    padding-left: 0;
  }

  .footer-right {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0;
    justify-self: center;
  }

  .footer-social {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .footer-social a {
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
  }

  .footer-copyright {
    text-align: center;
    font-size: 0.75rem;
  }
}

/* Mobile optimization for one-page aesthetic */

@media (max-width: 480px) {
  .live2d-showcase {
    padding: 0.75rem;
    margin: 0.5rem auto 1rem;
    width: 100%;
    min-height: 450px;
    max-height: 550px;
    overflow: visible;
    box-sizing: border-box;
  }

  .info-section {
    padding: 1rem 0.75rem;
  }

  footer {
    min-height: 60px;
    padding: 0.5rem;
    width: 100vw; /* Ensure full width */
  }

  .footer-logo {
    height: 24px;
  }

  .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .nav-link {
    font-size: 1rem;
  }

  /* Make content panels more compact */
  .panel {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .panel-header {
    margin-bottom: 1rem;
  }
}

/* Landscape mode optimizations */

@media (max-width: 1024px) and (orientation: landscape) {
  .landing-container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'live2d info'
      'footer footer';
    height: auto;
    min-height: 100vh;
  }

  .live2d-showcase {
    height: auto;
    min-height: 85vh;
    padding: 0.75rem;
    box-sizing: border-box;
    overflow: visible;
  }

  .info-section {
    max-height: none;
    padding: 1rem;
    overflow-y: auto;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .landing-container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'live2d info'
      'footer footer';
    height: auto;
    min-height: 100vh;
    display: grid;
  }

  .live2d-showcase {
    min-height: 85vh;
    height: auto;
    margin: 0;
    padding: 0.5rem;
    box-sizing: border-box;
    overflow: visible;
  }

  .info-section {
    height: calc(100vh - 70px);
    overflow-y: auto;
    padding: 1rem;
  }

  .panel {
    margin-bottom: 1rem;
  }

  footer {
    padding: 0.5rem var(--content-padding);
  }
}

/* Utilities */

/**
 * CSS Utility Classes
 * Shared utility classes to reduce duplication across components
 * Based on design system tokens and constants
 */

/* Layout Utilities */

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

/* Positioning */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-modal {
  z-index: var(--z-modal);
}

.z-tooltip {
  z-index: var(--z-tooltip);
}

.z-dropdown {
  z-index: var(--z-dropdown);
}

/* Spacing */

.p-0 {
  padding: 0;
}

.p-1 {
  padding: var(--space-1);
}

.p-2 {
  padding: var(--space-2);
}

.p-3 {
  padding: var(--space-3);
}

.p-4 {
  padding: var(--space-4);
}

.p-5 {
  padding: var(--space-5);
}

.px-1 {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.px-2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.px-3 {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.py-1 {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.py-2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.py-3 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: var(--space-1);
}

.m-2 {
  margin: var(--space-2);
}

.m-3 {
  margin: var(--space-3);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: var(--space-1);
}

.mb-2 {
  margin-bottom: var(--space-2);
}

.mb-3 {
  margin-bottom: var(--space-3);
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: var(--space-1);
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-3 {
  margin-top: var(--space-3);
}

/* Typography */

.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-base {
  font-size: var(--font-size-base);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

.font-light {
  font-weight: var(--font-weight-light);
}

.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-mono {
  font-family: var(--font-mono);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

.text-accent {
  color: var(--color-accent-500);
}

.text-error {
  color: var(--color-error-500);
}

.text-success {
  color: var(--color-success-500);
}

.text-warning {
  color: var(--color-warning-500);
}

/* Border Radius */

.rounded-none {
  border-radius: 0;
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.rounded-full {
  border-radius: 50%;
}

/* Borders */

.border {
  border: 1px solid var(--color-border-light);
}

.border-2 {
  border: 2px solid var(--color-border-light);
}

.border-none {
  border: none;
}

.border-accent {
  border-color: var(--color-accent-500);
}

.border-error {
  border-color: var(--color-error-500);
}

.border-success {
  border-color: var(--color-success-500);
}

/* Shadows */

.shadow-none {
  box-shadow: none;
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

/* Background Colors */

.bg-transparent {
  background-color: transparent;
}

.bg-surface {
  background-color: var(--color-surface);
}

.bg-surface-secondary {
  background-color: var(--color-surface-secondary);
}

.bg-accent {
  background-color: var(--color-accent-500);
}

.bg-accent-50 {
  background-color: var(--color-accent-50);
}

.bg-primary {
  background-color: var(--color-primary-500);
}

.bg-error {
  background-color: var(--color-error-500);
}

.bg-error-50 {
  background-color: var(--color-error-50);
}

.bg-success {
  background-color: var(--color-success-500);
}

.bg-warning {
  background-color: var(--color-warning-500);
}

/* Width & Height */

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.min-w-0 {
  min-width: 0;
}

.max-w-full {
  max-width: 100%;
}

/* Flex Utilities */

.flex-1 {
  flex: 1 1 0%;
}

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

.flex-grow {
  flex-grow: 1;
}

/* Overflow */

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

/* Cursor */

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* Opacity */

.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

/* Visibility */

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.hidden {
  display: none;
}

/* Transitions */

.transition {
  transition: all var(--transition-base);
}

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-slow {
  transition: all var(--transition-slow);
}

.transition-opacity {
  transition: opacity var(--transition-base);
}

.transition-transform {
  transition: transform var(--transition-base);
}

/* Transforms */

.scale-95 {
  transform: scale(0.95);
}

.scale-100 {
  transform: scale(1);
}

.scale-105 {
  transform: scale(1.05);
}

/* Interactive States */

.interactive {
  cursor: pointer;
  transition: all var(--transition-base);
}

.interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.interactive:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Button Base */

.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  border: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  outline: none;
  text-decoration: none;
}

.btn-base:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Variants */

.btn-primary {
  background: var(--color-primary-500);
  color: var(--color-text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-600);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-medium);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-surface);
  border-color: var(--color-border-dark);
}

.btn-accent {
  background: var(--color-accent-500);
  color: var(--color-text-inverse);
}

.btn-accent:hover:not(:disabled) {
  background: var(--color-accent-600);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-surface-secondary);
  border-color: var(--color-border-light);
}

/* Button Sizes */

.btn-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-lg);
}

/* Card Components */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-surface-secondary);
}

.card-body {
  padding: var(--space-4);
}

.card-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-surface-secondary);
}

/* Modal & Panel Utilities */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-surface-secondary);
}

.panel-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.panel-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.panel-close-btn:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

/* Input Utilities */

.input-base {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  transition: all var(--transition-base);
}

.input-base:focus {
  outline: none;
  border-color: var(--color-accent-500);
  box-shadow: 0 0 0 3px var(--color-accent-100);
}

.input-base:disabled {
  background: var(--color-surface-secondary);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Loading States */

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-light);
  border-top: 2px solid var(--color-accent-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-secondary) 25%,
    var(--color-border-light) 50%,
    var(--color-surface-secondary) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Responsive Utilities */

@media (max-width: 768px) {
  .sm\:hidden {
    display: none;
  }

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:p-2 {
    padding: var(--space-2);
  }

  .sm\:text-sm {
    font-size: var(--font-size-sm);
  }
}

@media (min-width: 769px) {
  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:p-4 {
    padding: var(--space-4);
  }
}

/* Accessibility */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus-ring {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-ring:focus-visible {
  outline: 2px solid var(--color-accent-300);
  outline-offset: 2px;
}

/* Visual Effects - Glass Morphism */

.glass-morphism {
  background: var(--glass-bg-light) !important;
  backdrop-filter: var(--glass-blur-medium);
  border: 1px solid var(--glass-border-medium) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.glass-morphism-strong {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

/* Animation Utilities */

.animate-fadeIn {
  animation: fadeIn var(--transition-base);
}

.animate-fadeOut {
  animation: fadeOut var(--transition-base);
}

.animate-slideUp {
  animation: slideUp var(--transition-slow);
}

.animate-slideDown {
  animation: slideDown var(--transition-slow);
}

.animate-scaleIn {
  animation: scaleIn var(--transition-base);
}

.animate-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Interactive State Utilities */

.interactive {
  transition: var(--transition-all);
  cursor: pointer;
}

.interactive:hover {
  transform: var(--transform-scale-md);
}

.interactive:active {
  transform: var(--transform-scale-sm);
}

.interactive-lift {
  transition: var(--transition-all);
  cursor: pointer;
}

.interactive-lift:hover {
  transform: var(--transform-lift-sm);
  box-shadow: var(--shadow-button-hover);
}

/* Button Base Styles */

.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--button-radius);
  font-weight: var(--font-weight-medium);
  transition: var(--transition-all);
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-glass {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur-medium);
  border: 1px solid var(--glass-border-medium);
  color: var(--color-text-primary);
}

.btn-glass:hover {
  background: var(--glass-bg-medium);
  border-color: var(--glass-border-strong);
}

/* Card Styles */

.card-base {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow-base);
}

.card-glass {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur-medium);
  border: 1px solid var(--glass-border-medium);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow-glass);
}

/* Icon Button Styles */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition-all);
  aspect-ratio: 1;
}

.icon-btn:hover {
  background: var(--color-hover-light);
  transform: var(--transform-scale-md);
}

.icon-btn:active {
  transform: var(--transform-scale-sm);
}

/* Print Utilities */

@media print {
  .print\:hidden {
    display: none;
  }
}

/* Features */

/**
 * Unified Settings Styles
 * Consolidates settings page, panel, and modal styles
 * Uses CSS custom properties for theming and variants
 */

/* ============================
   CSS Custom Properties
   ============================ */

:root {
  /* Settings Colors */
  --settings-bg: #ffffff;
  --settings-text: #1a1a1a;
  --settings-text-secondary: #6b7280;
  --settings-border: #e8e8e8;
  --settings-hover-bg: #f9f9f9;
  --settings-active-bg: #f5f5f5;
  --settings-accent: var(--color-accent-500, #ff6b9d);

  /* Settings Spacing */
  --settings-spacing-xs: 0.5rem;
  --settings-spacing-sm: 0.75rem;
  --settings-spacing-md: 1rem;
  --settings-spacing-lg: 1.5rem;
  --settings-spacing-xl: 2rem;

  /* Settings Dimensions */
  --settings-sidebar-width: 240px;
  --settings-modal-width: 600px;
  --settings-tab-height: 48px;

  /* Settings Transitions */
  --settings-transition-fast: 150ms ease;
  --settings-transition-normal: 200ms ease;
  --settings-transition-slow: 300ms ease;
}

/* Dark mode support */

[data-theme='dark'] {
  --settings-bg: #1a1a1a;
  --settings-text: #ffffff;
  --settings-text-secondary: #9ca3af;
  --settings-border: #333333;
  --settings-hover-bg: #2a2a2a;
  --settings-active-bg: #333333;
}

/* ============================
   Base Settings Container
   ============================ */

.settings-container {
  background: var(--settings-bg);
  color: var(--settings-text);
  font-family: var(--font-family-base);
  line-height: 1.6;
}

/* ============================
   Settings Variants
   ============================ */

/* Page variant - full screen with sidebar */

.settings-container--page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: settingsSlideIn var(--settings-transition-slow) ease-out;
}

/* Panel variant - for browser panels */

.settings-container--panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--settings-spacing-md);
}

/* Modal variant - overlay dialog */

.settings-container--modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--settings-spacing-lg);
  animation: fadeIn var(--settings-transition-normal);
}

/* Modal backdrop */

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* Modal dialog */

.settings-dialog {
  position: relative;
  width: 100%;
  max-width: var(--settings-modal-width);
  max-height: 80vh;
  background: var(--settings-bg);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  animation: slideUp var(--settings-transition-slow) ease-out;
}

/* ============================
   Settings Header
   ============================ */

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--settings-spacing-lg);
  border-bottom: 1px solid var(--settings-border);
  background: var(--settings-bg);
}

.settings-header--page {
  height: 60px;
  padding: 0 var(--settings-spacing-lg);
}

.settings-header--modal {
  padding: var(--settings-spacing-md) var(--settings-spacing-lg);
}

.settings-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.settings-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--settings-text-secondary);
  cursor: pointer;
  padding: var(--settings-spacing-xs);
  border-radius: 6px;
  transition: all var(--settings-transition-fast);
}

.settings-close-btn:hover {
  background: var(--settings-hover-bg);
  color: var(--settings-text);
}

/* ============================
   Settings Navigation/Tabs
   ============================ */

.settings-nav {
  display: flex;
  gap: var(--settings-spacing-xs);
}

/* Vertical tabs for page variant */

.settings-nav--vertical {
  flex-direction: column;
  width: var(--settings-sidebar-width);
  padding: var(--settings-spacing-md);
  border-right: 1px solid var(--settings-border);
  background: var(--settings-hover-bg);
  overflow-y: auto;
}

/* Horizontal tabs for panel/modal variants */

.settings-nav--horizontal {
  flex-direction: row;
  padding: var(--settings-spacing-md);
  border-bottom: 1px solid var(--settings-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.settings-nav--horizontal::-webkit-scrollbar {
  display: none;
}

/* Tab styles */

.settings-tab {
  display: flex;
  align-items: center;
  gap: var(--settings-spacing-sm);
  padding: var(--settings-spacing-sm) var(--settings-spacing-md);
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--settings-text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--settings-transition-fast);
  white-space: nowrap;
  text-align: left;
  width: 100%;
}

.settings-nav--horizontal .settings-tab {
  width: auto;
}

.settings-tab:hover {
  background: var(--settings-hover-bg);
  color: var(--settings-text);
}

.settings-tab--active {
  background: var(--settings-active-bg);
  color: var(--settings-accent);
  font-weight: 600;
}

.settings-tab-icon {
  font-size: 1.1rem;
  opacity: 0.8;
}

/* ============================
   Settings Content
   ============================ */

.settings-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.settings-body--page {
  /* Sidebar layout */
}

.settings-body--stacked {
  flex-direction: column;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--settings-spacing-lg);
}

.settings-content::-webkit-scrollbar {
  width: 8px;
}

.settings-content::-webkit-scrollbar-track {
  background: var(--settings-hover-bg);
}

.settings-content::-webkit-scrollbar-thumb {
  background: var(--settings-border);
  border-radius: 4px;
}

/* ============================
   Settings Sections
   ============================ */

.settings-section {
  margin-bottom: var(--settings-spacing-xl);
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--settings-text);
  margin: 0 0 var(--settings-spacing-md);
  padding-bottom: var(--settings-spacing-sm);
  border-bottom: 1px solid var(--settings-border);
}

.settings-group {
  background: var(--settings-hover-bg);
  border-radius: 8px;
  padding: var(--settings-spacing-md);
  margin-bottom: var(--settings-spacing-md);
}

.settings-group-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--settings-text-secondary);
  margin: 0 0 var(--settings-spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================
   Settings Items
   ============================ */

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--settings-spacing-md) 0;
  border-bottom: 1px solid var(--settings-border);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
  margin-right: var(--settings-spacing-lg);
}

.setting-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--settings-text);
  margin: 0 0 0.25rem;
}

.setting-description {
  font-size: 0.8rem;
  color: var(--settings-text-secondary);
  margin: 0;
  line-height: 1.4;
}

.setting-control {
  flex-shrink: 0;
}

/* ============================
   Form Controls
   ============================ */

/* Toggle Switch */

.settings-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.settings-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d1d5db;
  border-radius: 24px;
  transition: background var(--settings-transition-fast);
}

.settings-toggle-slider:before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform var(--settings-transition-fast);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.settings-toggle input:checked + .settings-toggle-slider {
  background: var(--settings-accent);
}

.settings-toggle input:checked + .settings-toggle-slider:before {
  transform: translateX(20px);
}

/* Select Dropdown */

.settings-select {
  appearance: none;
  background: var(--settings-bg);
  border: 1px solid var(--settings-border);
  border-radius: 6px;
  padding: var(--settings-spacing-xs) var(--settings-spacing-md);
  padding-right: 2.5rem;
  font-size: 0.875rem;
  color: var(--settings-text);
  cursor: pointer;
  transition: all var(--settings-transition-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.settings-select:hover {
  border-color: var(--settings-text-secondary);
}

.settings-select:focus {
  outline: none;
  border-color: var(--settings-accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
}

/* Range Slider */

.settings-range {
  width: 100%;
  height: 6px;
  background: var(--settings-border);
  border-radius: 3px;
  outline: none;
  appearance: none;
}

.settings-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--settings-accent);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--settings-transition-fast);
}

.settings-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.settings-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--settings-accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* Checkbox */

.settings-checkbox {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.settings-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
}

.settings-checkbox-mark {
  position: absolute;
  inset: 0;
  background: var(--settings-bg);
  border: 2px solid var(--settings-border);
  border-radius: 4px;
  transition: all var(--settings-transition-fast);
}

.settings-checkbox input:checked + .settings-checkbox-mark {
  background: var(--settings-accent);
  border-color: var(--settings-accent);
}

.settings-checkbox-mark:after {
  content: '';
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.settings-checkbox input:checked + .settings-checkbox-mark:after {
  display: block;
}

/* ============================
   Special Sections
   ============================ */

/* Wallet Section */

.settings-wallet {
  background: var(--settings-hover-bg);
  border-radius: 8px;
  padding: var(--settings-spacing-lg);
  margin-bottom: var(--settings-spacing-lg);
}

.settings-wallet-address {
  font-family: var(--font-family-mono);
  font-size: 0.875rem;
  color: var(--settings-text-secondary);
  word-break: break-all;
}

.settings-wallet-balance {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--settings-text);
  margin: var(--settings-spacing-sm) 0;
}

/* ============================
   Animations
   ============================ */

@keyframes settingsSlideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================
   Responsive Design
   ============================ */

@media (max-width: 768px) {
  .settings-container--page {
    flex-direction: column;
  }

  .settings-nav--vertical {
    width: 100%;
    flex-direction: row;
    padding: var(--settings-spacing-sm);
    border-right: none;
    border-bottom: 1px solid var(--settings-border);
    overflow-x: auto;
  }

  .settings-body--page {
    flex-direction: column;
  }

  .settings-dialog {
    max-height: 100vh;
    border-radius: 0;
  }

  .settings-content {
    padding: var(--settings-spacing-md);
  }
}

/* ============================
   Accessibility
   ============================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  .settings-container {
    --settings-border: #000000;
    --settings-hover-bg: #f0f0f0;
    --settings-text-secondary: #404040;
  }
}

/* Focus visible for keyboard navigation */

.settings-tab:focus-visible,
.settings-close-btn:focus-visible,
.settings-select:focus-visible {
  outline: 2px solid var(--settings-accent);
  outline-offset: 2px;
}

/**
 * Unified Wallet Styles
 * Consolidates wallet button, panel, account page, and settings styles
 * Uses CSS custom properties for theming and variants
 */

/* ============================
   CSS Custom Properties
   ============================ */

:root {
  /* Wallet Colors - Using theme variables */
  --wallet-bg: var(--theme-bg-overlay-light);
  --wallet-border: var(--theme-border-normal);
  --wallet-text: var(--theme-text-accent);
  --wallet-text-secondary: var(--theme-text-secondary);
  --wallet-shadow: var(--theme-focus-shadow);
  --wallet-hover-shadow: rgba(255, 105, 180, 0.25);

  /* Wallet Button States */
  --wallet-button-bg-disconnected: var(--theme-bg-overlay-light);
  --wallet-button-bg-connected: var(--theme-secondary);
  --wallet-button-bg-hover: var(--theme-hover-bg);
  --wallet-button-border-disconnected: var(--theme-border-normal);
  --wallet-button-border-connected: var(--theme-secondary);

  /* Wallet Dimensions */
  --wallet-button-height: 40px;
  --wallet-panel-width: 320px;
  --wallet-dropdown-width: 280px;

  /* Wallet Transitions */
  --wallet-transition: var(--theme-transition-fast);
}

/* Dark mode support - Using theme variables */

[data-theme='dark'] {
  --wallet-bg: var(--theme-bg-overlay-light);
  --wallet-border: var(--theme-border-normal);
  --wallet-text: var(--theme-primary);
  --wallet-text-secondary: var(--theme-text-muted);
  --wallet-shadow: var(--theme-focus-shadow);
  --wallet-hover-shadow: rgba(255, 155, 190, 0.2);
  --wallet-button-bg-hover: var(--theme-hover-bg);
}

/* ============================
   Wallet Button Component
   ============================ */

.wallet-button-container {
  position: relative;
  display: inline-block;
}

.wallet-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  height: var(--wallet-button-height);
  background: var(--wallet-button-bg-disconnected);
  border: 1px solid var(--wallet-button-border-disconnected);
  border-radius: 24px;
  color: var(--wallet-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--wallet-transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  will-change: transform;
  transform: translateZ(0); /* Enable hardware acceleration */
  backface-visibility: hidden; /* Prevent flickering */
}

/* Pink themed connect/login button */

.wallet-button.connect {
  /* Always use theme secondary to match sidebar */
  background: var(--theme-secondary);
  border: 1px solid var(--theme-secondary);
  color: var(--theme-text-primary);
  position: relative;
  right: 0.5rem;
  font-family: var(--font-primary);
  text-transform: none;
  letter-spacing: normal;
}

.wallet-button.connect:hover {
  /* Keep hover identical to default per spec */
  background: var(--theme-secondary);
}

.wallet-button:hover {
  background: var(--wallet-button-bg-hover);
  box-shadow: none;
  transform: translate3d(0, -1px, 0);
}

.wallet-button:active {
  transform: translate3d(0, 0, 0);
  box-shadow: none;
}

/* Connected state - pink background to match disconnected */

.wallet-button.connected {
  /* Match login button styling even when connected */
  background: var(--wallet-button-bg-connected);
  border: 1px solid var(--wallet-button-border-connected);
  color: var(--theme-text-primary);
  box-shadow: none;
}

.wallet-button.connected:hover {
  /* Keep hover consistent with connected background */
  background: var(--theme-secondary);
  box-shadow: none;
}

/* Loading state */

.wallet-button.loading {
  cursor: wait;
  opacity: 0.7;
}

.wallet-button.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
  will-change: transform;
  transform: translateZ(0);
}

@keyframes shimmer {
  to {
    transform: translateX(200%);
  }
}

/* Logout variant - simple button for account settings */

.wallet-button.logout-variant {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--theme-primary);
  border: none;
  border-radius: 30px;
  color: var(--theme-text-white);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: 'Urbanist', sans-serif;
}

.wallet-button.logout-variant:hover {
  background: var(--theme-primary-dark);
  transform: translateY(-2px);
}

.wallet-button.logout-variant:active {
  transform: translateY(0);
}

.wallet-button.logout-variant:focus-visible {
  outline: 2px solid var(--wallet-text);
  outline-offset: 2px;
}

/* Wallet button layout */

.wallet-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* No avatar icon in the compact top-right wallet pill */

.wallet-button-container .user-avatar { display: none; }

/* Wallet button icon */

.wallet-icon {
  font-size: 1rem;
  color: inherit;
}

/* Wallet address text */

.wallet-address {
  font-family: var(--font-family-mono, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.025em;
  line-height: 16px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

/* ============================
   Wallet Dropdown
   ============================ */

.wallet-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: var(--wallet-dropdown-width);
  background: var(--theme-bg-overlay-solid);
  border: 1px solid var(--theme-border-strong);
  border-radius: var(--theme-radius-xl);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: var(--theme-spacing-lg);
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--wallet-transition),
    transform var(--wallet-transition);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.wallet-dropdown.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wallet-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--wallet-border);
}

.dropdown-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--wallet-bg);
  border-radius: 50%;
  color: var(--wallet-text);
}

.dropdown-address-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.dropdown-address {
  font-family: var(--font-family-mono, monospace);
  font-size: 0.875rem;
  color: var(--wallet-text);
  font-weight: 500;
}

.copy-address-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: var(--wallet-text-secondary);
  cursor: pointer;
  border-radius: 4px;
  transition: all var(--wallet-transition);
}

.copy-address-btn:hover {
  background: var(--wallet-bg);
  color: var(--wallet-text);
}

.wallet-dropdown-divider {
  height: 1px;
  background: var(--wallet-border);
  margin: 0.75rem 0;
}

.wallet-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--wallet-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--wallet-transition);
  text-decoration: none;
  margin-bottom: 0.25rem;
  will-change: background-color;
}

.wallet-dropdown-item:hover {
  background: var(--wallet-bg);
}

.wallet-dropdown-item.logout {
  color: var(--theme-button-danger-text);
}

.wallet-dropdown-item.logout:hover {
  background: var(--theme-button-danger-bg);
}

.wallet-dropdown-item.documentation {
  position: relative;
}

.external-link-icon {
  margin-left: auto;
  opacity: 0.6;
}

.wallet-dropdown-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wallet-text);
  margin: 0;
}

.wallet-dropdown-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--wallet-text-secondary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all var(--wallet-transition);
}

.wallet-dropdown-close:hover {
  background: var(--wallet-bg);
}

/* ============================
   Wallet Info Section
   ============================ */

.wallet-info {
  margin-bottom: 0rem;
}

.wallet-details {
  background: var(--wallet-bg);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.wallet-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.wallet-balance-label {
  font-size: 0.875rem;
  color: var(--wallet-text-secondary);
  font-weight: 500;
}

.wallet-balance-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wallet-text);
  font-family: var(--font-family-mono, monospace);
}

.wallet-network {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--wallet-text-secondary);
}

.wallet-network-indicator {
  width: 8px;
  height: 8px;
  background: var(--theme-primary);
  border-radius: 50%;
}

/* ============================
   Wallet Actions
   ============================ */

.wallet-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wallet-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--wallet-bg);
  border: 1px solid var(--wallet-border);
  border-radius: 8px;
  color: var(--wallet-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--wallet-transition);
  text-decoration: none;
}

.wallet-action-btn:hover {
  background: var(--wallet-button-bg-hover);
  border-color: var(--wallet-text-secondary);
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 4px 12px var(--wallet-hover-shadow);
}

.wallet-action-btn--primary {
  background: var(--theme-button-primary-bg);
  color: var(--theme-text-white);
  border-color: var(--theme-button-primary-bg);
}

.wallet-action-btn--primary:hover {
  background: var(--theme-button-primary-hover);
  border-color: var(--theme-button-primary-hover);
}

.wallet-action-btn--danger {
  color: var(--theme-button-danger-text);
  border-color: var(--theme-button-danger-border);
}

.wallet-action-btn--danger:hover {
  background: var(--theme-button-danger-hover);
  border-color: var(--theme-button-danger-text);
}

/* ============================
   Wallet Panel (Browser Panel)
   ============================ */

.wallet-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--theme-spacing-lg);
  background: var(--theme-bg-main);
}

.wallet-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wallet-border);
}

.wallet-panel-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--wallet-text);
  margin: 0;
}

.wallet-panel-content {
  flex: 1;
  overflow-y: auto;
}

.wallet-panel-section {
  margin-bottom: 2rem;
}

.wallet-panel-section:last-child {
  margin-bottom: 0;
}

.wallet-panel-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wallet-text);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--wallet-border);
}

/* ============================
   Account Page Wallet Styles
   ============================ */

.account-page .wallet-section {
  background: var(--wallet-bg);
  border: 1px solid var(--wallet-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.account-page .wallet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.account-page .wallet-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.account-page .wallet-status--connected {
  color: var(--theme-primary);
}

.account-page .wallet-status--disconnected {
  color: var(--wallet-text-secondary);
}

.account-page .wallet-item {
  display: flex;
  flex-direction: column;
  gap: var(--theme-spacing-md);
  padding: var(--theme-spacing-lg);
  background: var(--theme-bg-overlay-light);
  border: 1px solid var(--theme-border-normal);
  border-radius: var(--theme-radius-lg);
  margin-bottom: var(--theme-spacing-lg);
}

.account-page .wallet-item:last-child {
  margin-bottom: 0;
}

/* Wallet loading states */

.wallet-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--wallet-text-secondary);
  font-size: 0.875rem;
}

.wallet-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--wallet-border);
  border-top-color: var(--wallet-text);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 0.5rem;
}

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

/* Wallet disconnect info */

.wallet-disconnected-info {
  text-align: center;
  padding: 2rem;
  color: var(--wallet-text-secondary);
}

.wallet-disconnected-info h3 {
  font-size: 1.1rem;
  color: var(--wallet-text);
  margin: 0 0 0.5rem;
}

.wallet-disconnected-info p {
  font-size: 0.875rem;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

/* Connect wallet button */

.connect-wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-spacing-sm);
  padding: var(--theme-spacing-md) var(--theme-spacing-xl);
  background: var(--theme-button-primary-bg);
  color: var(--theme-text-white);
  border: none;
  border-radius: var(--theme-radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--wallet-transition);
  text-decoration: none;
}

.connect-wallet-btn:hover {
  background: var(--theme-button-primary-hover);
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 4px 12px var(--wallet-hover-shadow);
}

/* Disconnect wallet button */

.disconnect-wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-spacing-sm);
  padding: var(--theme-spacing-sm) var(--theme-spacing-lg);
  background: var(--theme-button-danger-bg);
  color: var(--theme-button-danger-text);
  border: 1px solid var(--theme-button-danger-border);
  border-radius: var(--theme-radius-md);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--wallet-transition);
}

.disconnect-wallet-btn:hover {
  background: var(--theme-button-danger-hover);
  border-color: var(--theme-button-danger-text);
}

/* ============================
   Wallet Features Section
   ============================ */

.wallet-features-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.wallet-feature {
  background: var(--theme-bg-overlay-light);
  border: 1px solid var(--theme-border-normal);
  border-radius: var(--theme-radius-lg);
  padding: var(--theme-spacing-lg);
  text-align: center;
}

.wallet-feature-icon {
  font-size: 2rem;
  color: var(--wallet-text);
  margin-bottom: 0.5rem;
}

.wallet-feature-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wallet-text);
  margin: 0 0 0.25rem;
}

.wallet-feature-description {
  font-size: 0.8rem;
  color: var(--wallet-text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* ============================
   Settings Panel Wallet Styles
   ============================ */

.settings-panel .wallet-info {
  background: var(--wallet-bg);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.settings-panel .wallet-address {
  font-family: var(--font-family-mono, monospace);
  font-size: 0.875rem;
  color: var(--wallet-text-secondary);
  word-break: break-all;
  margin: 0.5rem 0;
}

.settings-panel .wallet-type {
  font-size: 0.8rem;
  color: var(--wallet-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.settings-panel .no-wallet {
  text-align: center;
  color: var(--wallet-text-secondary);
  font-size: 0.875rem;
  padding: 1.5rem;
}

/* ============================
   Responsive Design
   ============================ */

@media (max-width: 768px) {
  .wallet-dropdown {
    width: calc(100vw - 2rem);
    max-width: var(--wallet-dropdown-width);
    left: 1rem;
    right: 1rem;
  }

  .wallet-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .wallet-address {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wallet-features-section {
    grid-template-columns: 1fr;
  }

  .wallet-panel {
    padding: 0.75rem;
  }

  .wallet-action-btn {
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .wallet-button {
    min-width: auto;
  }

  .wallet-button .wallet-address {
    display: none;
  }

  .account-page .wallet-item {
    padding: 0.75rem;
  }

  .wallet-panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ============================
   Accessibility
   ============================ */

.wallet-button:focus-visible,
.wallet-action-btn:focus-visible {
  outline: 2px solid var(--wallet-text);
  outline-offset: 2px;
}

/* Login/connect button focus ring should use theme secondary */

.wallet-button.connect:focus-visible {
  outline: 2px solid var(--theme-secondary);
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .wallet-button,
  .wallet-action-btn,
  .wallet-dropdown {
    transition: none;
  }

  .wallet-loading::before {
    animation: none;
  }

  @keyframes shimmer {
    to {
      left: 0;
    }
  }
}

/* Components */

/**
 * Affection Meter Component Styles
 * Vertical meter design for tracking affection points
 */

/* Container for the meter */

.affection-meter-container {
  position: relative;
  height: clamp(220px, 32vh, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main meter */

.affection-meter {
  position: relative;
  width: 60px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* Tooltip for affection meter */

.affection-meter[data-tooltip] { position: relative; }

.affection-meter[data-tooltip]:hover::after,
.affection-meter[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 100%;
  margin-right: 8px;
  top: 50%; /* center of meter bar */
  transform: translateY(calc(-50% - 20px)); /* lift up ~20px */
  background: var(--color-accent-200);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.1;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(20px);
  z-index: var(--z-tooltip);
}

/* Focus visible outline for accessible nav */

.affection-meter:focus-visible { outline: 2px solid var(--color-accent-100); outline-offset: 4px; }

/* Mobile: slimmer meter */

@media (max-width: 480px) {
  .affection-meter {
    width: 30px;
  }
  .affection-meter-container {
    height: 225px;
  }
}

.affection-meter:hover {
  transform: scale(1.02);
}

/* Meter background track */

.meter-background {
  position: relative;
  width: 8px;
  height: calc(100% - 100px);
  background: var(--glass-bg-ultra);
  border: 1px solid var(--color-affection-outline);
  border-radius: 6px;
  overflow: hidden;
  backdrop-filter: var(--glass-blur-strong) saturate(125%);
  -webkit-backdrop-filter: var(--glass-blur-strong) saturate(125%);
  /* Remove outer drop shadow for a flatter look */
  box-shadow: inset 0 1px 0 var(--glass-border-inner);
  transition:
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

/* Meter fill */

.meter-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 4px;
  transition:
    height 0.5s ease,
    background-color 0.5s ease;
}

/* Base wave animation for 0 state */

.meter-base-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 4px;
  opacity: 0.6;
  animation: subtleWave 3s ease-in-out infinite;
}

@keyframes subtleWave {
  0%,
  100% {
    height: 4px;
    opacity: 0.4;
  }
  50% {
    height: 8px;
    opacity: 0.7;
  }
}

/* Zero state specific styling */

.meter-fill-zero {
  display: none;
}

/* Heart icon */

.meter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none !important; /* ensure no background */
  border: none;            /* remove outline circle */
  border-radius: 0;
  transition: all 0.3s ease;
  box-shadow: none;
}

/* Ensure no decorative pseudo-elements render on the heart */

.meter-icon::before,
.meter-icon::after {
  content: none !important;
  display: none !important;
}

/* Ensure heart icon has no stroke/outline */

.meter-icon svg { stroke: none !important; }

/* Subtle icon shadow to match text legibility when background image is active */

body.bg-image-active .meter-icon svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* sheen hover removed */

.affection-meter:hover .meter-icon {
  background: transparent;
  border-color: transparent;
}

/* Points display */

.meter-points {
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  transition: color 0.3s ease;
}

/* Floating delta layer and animation */

.meter-deltas-layer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 34px; /* roughly below the points text */
  pointer-events: none;
}

.meter-delta-floater {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  font-size: 0.8rem;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  animation: meterDeltaRise 1.1s ease-out forwards;
}

.meter-delta-floater.delta-positive { color: var(--color-success-500); }

.meter-delta-floater.delta-negative { color: var(--color-danger-500); }

.meter-delta-floater.delta-neutral { color: var(--color-neutral-400); }

@keyframes meterDeltaRise {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.96); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(1); }
}

/* Improve meter points readability on image backgrounds */

body.bg-image-active .meter-points {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Divider removed per latest direction */

/* Streak indicator */

.meter-streak {
  position: absolute;
  bottom: -30px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 1rem;
  backdrop-filter: blur(10px);
}

/* Details Popup */

.affection-details-popup {
  position: fixed;
  top: 40%;
  left: 100px;
  transform: translateY(-50%);
  width: 320px;
  background: var(--glass-bg-ultra);
  backdrop-filter: var(--glass-blur-strong) saturate(125%);
  -webkit-backdrop-filter: var(--glass-blur-strong) saturate(125%);
  border: 1px solid var(--glass-border-strong);
  border-radius: 1rem;
  box-shadow: 0 2px 8px var(--glass-shadow);
  z-index: 1000;
  animation: slideInLeft 0.3s ease;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.popup-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.popup-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
}

.popup-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.popup-content {
  padding: 1.25rem;
}

.level-info {
  text-align: center;
  margin-bottom: 1.5rem;
}

.level-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.5rem 0 0.25rem;
}

.level-number {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0;
}

.progress-section {
  margin-bottom: 1.5rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #d1d5db;
  margin-bottom: 0.5rem;
}

.progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 1rem;
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 0.5rem;
}

.stat-header svg {
  color: #f59e0b;
}

.stat-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.vacation-mode-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 0.5rem;
  color: #60a5fa;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.tips-section {
  font-size: 0.75rem;
  color: #9ca3af;
  line-height: 1.5;
}

.tips-section p {
  margin: 0.25rem 0;
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .affection-meter-container {
    height: 250px;
  }

  .meter-background {
    height: 160px;
    width: 6px;
  }

  .meter-icon {
    width: 36px;
    height: 36px;
  }

  .affection-details-popup {
    left: 80px;
    width: 280px;
  }
}

@media (max-width: 480px) {
  .affection-meter-container {
    height: 225px;
  }

  .meter-background {
    height: 140px;
    width: 5px;
  }

  .meter-icon {
    width: 32px;
    height: 32px;
  }

  .meter-points {
    font-size: 0.75rem;
  }

  .affection-details-popup {
    left: 60px;
    width: 260px;
  }
}

@supports (backdrop-filter: url(#frosted)) {
  .meter-background,
  .meter-icon,
  .affection-details-popup {
    backdrop-filter: url(#frosted);
    -webkit-backdrop-filter: url(#frosted);
  }
}

/**
 * Reusable Browser Panel Component Styles
 * Pink theme styling to match media gallery
 */

.browser-panel-container {
  position: fixed;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 1rem;
  border: 1px solid rgba(255, 182, 193, 0.3);
  box-shadow: 0 12px 40px rgba(255, 182, 193, 0.3);
  z-index: 2000;
  overflow: hidden;
  transition: all 0.2s ease;
  user-select: none;
  min-width: 300px;
  min-height: 250px;
  animation: slideInPanel 0.3s ease forwards;
}

@keyframes slideInPanel {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.browser-panel-container.dragging {
  cursor: grabbing;
  transform: scale(1.02);
  box-shadow: 0 20px 60px rgba(255, 182, 193, 0.4);
}

.browser-panel-container.resizing {
  transition: none;
}

.browser-panel-container.swiping {
  transition: none;
  opacity: 0.8;
}

/* Browser Window Header */

.browser-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(236, 72, 153, 0.2);
  cursor: grab;
  min-height: 2.5rem;
  gap: 1rem; /* Add gap between title and close button */
}

.browser-panel-header:active {
  cursor: grabbing;
}

/* Window Title */

.window-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f2937;
  padding-left: 0.5rem; /* Add more left padding */
}

.window-title svg {
  color: #ff69b4;
}

/* Close Button */

.panel-close-btn {
  width: 2rem;
  height: 2rem;
  min-width: 2rem; /* Ensure it stays circular */
  min-height: 2rem; /* Ensure it stays circular */
  border-radius: 6px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0; /* Prevent button from shrinking */
  margin-left: auto; /* Push button to the right */
  padding: 0; /* Remove default button padding */
  position: relative;
  z-index: 10; /* Ensure it's above drag area */
}

.panel-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #dc2626;
}

.panel-close-btn:active {
  background: rgba(255, 182, 193, 0.25);
}

/* Ensure close button icon is visible */

.panel-close-btn svg {
  width: 18px !important;
  height: 18px !important;
  color: #8b5a8c !important;
}

/* Panel Content */

.browser-panel-content {
  height: calc(100% - 2.5rem);
  overflow: auto;
  background: #ffffff;
}

/* Resize Handle */

.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.75rem;
  height: 0.75rem;
  cursor: se-resize;
  background: rgba(255, 182, 193, 0.2);
  border-top-left-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 182, 193, 0.6);
  transition: all 0.2s ease;
  opacity: 0.7;
}

.resize-handle:hover {
  background: rgba(255, 182, 193, 0.3);
  color: rgba(255, 182, 193, 0.8);
  opacity: 1;
}

/* Content Area Styles */

.browser-panel-content {
  padding: 1rem;
  height: calc(100% - 2.5rem);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Empty State */

.panel-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #64748b;
  gap: 1rem;
}

.panel-empty-state h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
}

.panel-empty-state p {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}

/* Responsive Design */

@media (max-width: 768px) {
  .browser-panel-container {
    /* Transform to mobile-friendly slide-up panel */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 80vh !important;
    max-height: 600px;
    border-radius: 1rem 1rem 0 0;
    border: none;
    box-shadow: 0 -8px 32px rgba(255, 182, 193, 0.4);
    animation: slideUpPanel 0.3s ease forwards;
    min-width: unset;
    min-height: unset;
    margin: 0 auto; /* Center horizontally */
    transform: translateX(0); /* Ensure no horizontal offset */
  }

  @keyframes slideUpPanel {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .browser-panel-header {
    padding: 1rem 1.5rem;
    min-height: 3rem;
    background: rgba(255, 182, 193, 0.15);
    border-bottom: 2px solid rgba(255, 182, 193, 0.3);
    position: relative;
    display: flex;
    justify-content: center; /* Center the header content */
    align-items: center;
  }

  /* Add a drag handle indicator */
  .browser-panel-header::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 0.25rem;
    background: rgba(255, 182, 193, 0.5);
    border-radius: 0.125rem;
  }

  .window-title {
    font-size: 1rem;
    font-weight: 700;
    gap: 0.75rem;
    text-align: center; /* Center the title text */
  }

  .window-title svg {
    width: 20px;
    height: 20px;
  }

  .panel-close-btn {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    background: rgba(255, 182, 193, 0.3);
    border-radius: 50%;
    position: absolute;
    right: 1rem; /* Position from right edge */
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
    padding: 0;
    z-index: 20; /* Higher z-index for mobile */
  }

  .panel-close-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  .browser-panel-content {
    height: calc(100% - 3rem);
    padding: 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center; /* Center content by default */
  }

  /* Add character interaction hints */
  .browser-panel-container::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%; /* Center the arrow */
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid rgba(255, 182, 193, 0.2);
    pointer-events: none;
  }

  /* Mobile-specific character interaction styles */
  .browser-panel-container {
    /* Add subtle glow effect to suggest character presence */
    box-shadow:
      0 -8px 32px rgba(255, 182, 193, 0.4),
      0 0 20px rgba(255, 105, 180, 0.1);
  }

  /* Animated border to suggest character interaction */
  .browser-panel-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 105, 180, 0.5), transparent);
    animation: characterPulse 3s ease-in-out infinite;
  }

  @keyframes characterPulse {
    0%,
    100% {
      opacity: 0.3;
      transform: scaleX(0.8);
    }
    50% {
      opacity: 0.8;
      transform: scaleX(1);
    }
  }

  /* Enhanced swipe feedback */
  .browser-panel-container.swiping {
    box-shadow:
      0 -4px 16px rgba(255, 182, 193, 0.2),
      0 0 10px rgba(255, 105, 180, 0.05);
  }
}

@media (max-width: 480px) {
  .browser-panel-container {
    height: 85vh !important;
    max-height: 500px;
  }

  .browser-panel-header {
    padding: 0.75rem 1rem;
    min-height: 2.5rem;
  }

  .browser-panel-header::before {
    width: 1.5rem;
    height: 0.2rem;
  }

  .window-title {
    font-size: 0.9rem;
    gap: 0.5rem;
  }

  .window-title svg {
    width: 18px;
    height: 18px;
  }

  .panel-close-btn {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    margin-right: 0.25rem;
    padding: 0;
    z-index: 20;
  }

  .browser-panel-content {
    height: calc(100% - 2.5rem);
    padding: 1rem;
  }

  /* Hide resize handle on mobile */
  .resize-handle {
    display: none;
  }
}

/* Scrollbar styling for panel content */

.browser-panel-content::-webkit-scrollbar {
  width: 0.375rem;
}

.browser-panel-content::-webkit-scrollbar-track {
  background: rgba(255, 182, 193, 0.05);
  border-radius: 0.25rem;
}

.browser-panel-content::-webkit-scrollbar-thumb {
  background: rgba(255, 182, 193, 0.2);
  border-radius: 0.25rem;
}

.browser-panel-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 182, 193, 0.3);
}

/* 
 * Button Component Styles 
 */

/* Holographic launch button */

.launch-button {
  border: 2px solid transparent;
  background: var(--purple-main);
  position: relative;
  padding: 0.85rem 2rem;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: none;
}

.launch-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--holo-color-1),
    var(--holo-color-2),
    var(--holo-color-3),
    var(--holo-color-4),
    var(--holo-color-1)
  );
  background-size: 300% 300%;
  border-radius: 30px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  box-shadow: none;
}

.launch-button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0s;
}

.launch-button:hover {
  transform: translateY(0);
  border: 2px solid #000;
  animation: borderPulse 1.5s infinite;
}

.launch-button:hover::before {
  opacity: 0;
}

.launch-button:hover::after {
  opacity: 1;
  animation: holographicShine 3s ease-in-out infinite;
}

.launch-button:active {
  transform: translateY(0);
  background: var(--purple-dark);
  border-color: #000;
  animation: none;
}

@keyframes borderPulse {
  0% {
    border-color: rgba(0, 0, 0, 0.3);
  }
  50% {
    border-color: rgba(0, 0, 0, 1);
  }
  100% {
    border-color: rgba(0, 0, 0, 0.3);
  }
}

@keyframes holographicShine {
  0% {
    left: -100%;
    opacity: 0;
  }
  20% {
    left: 100%;
    opacity: 0.5;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Common button styles */

.primary-button,
.secondary-button {
  padding: 0.8rem 1.8rem;
  border: none;
  border-radius: 30px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  letter-spacing: 0.5px;
  box-shadow: none;
}

.primary-button {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

.secondary-button {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-color);
  border: 1px solid var(--glass-border);
}

.secondary-button:hover {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}

/* Demo buttons container */

.demo-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* Responsive Design */

@media (max-width: 1200px) {
  .launch-button {
    font-size: 1rem;
    padding: 0.75rem 1.8rem;
  }
}

@media (max-width: 1024px) {
  .launch-button {
    font-size: 0.95rem;
    padding: 0.7rem 1.6rem;
  }
}

@media (max-width: 768px) {
  .demo-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .launch-button {
    font-size: 0.9rem;
    padding: 0.65rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .launch-button {
    width: 100%;
    font-size: 0.85rem;
    padding: 0.6rem 1.4rem;
  }
}

/**
 * Character Health Bar Component Styles
 * Simplified character stats display
 */

.character-status-bar {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  min-width: 140px;
  max-width: 220px;
}

/* Improve contrast when a background image is active */

/* Subtle readability treatment over images: prefer text shadows over panels */

body.bg-image-active .character-status-bar {
  background: transparent;
  border: none;
  box-shadow: none;
}

body.bg-image-active .character-name-text,
body.bg-image-active .character-mood-text,
body.bg-image-active .hp-label,
body.bg-image-active .hp-value,
body.bg-image-active .mp-label,
body.bg-image-active .mp-value {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Apply same readability treatment to the voice language toggle */

body.bg-image-active .voice-lang-toggle { color: #ffffff !important; }

body.bg-image-active .voice-lang-toggle span { color: inherit !important; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }

body.bg-image-active .voice-lang-toggle svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)) drop-shadow(0 0 2px rgba(0,0,0,0.25)); }

.character-stats-layout {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto; /* avatar | name+mood | HP | MP | audio */
  align-items: center;
  column-gap: 0.3rem; /* tighter gaps */
  width: 100%;
}

.character-avatar-col {
  display: flex;
  align-items: center;
}

.character-name-mood-col {
  display: flex;
  flex-direction: column;
  align-items: center; /* center stack */
  text-align: center; /* center text */
  line-height: 1.1;
}

.character-header-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
}

.character-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Grid layout: first row is avatar | name, second row centers mood */

.character-header-grid {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.5rem;
}

.character-header-grid .mood-row {
  grid-column: 1 / span 2;
  justify-self: center;
}

.mood-section {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mood-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* Photo avatar for mood */

.mood-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  border: 1px solid var(--color-affection-outline);
}

.mood-avatar-lg {
  width: 40px;
  height: 40px;
}

.stats-section { display: none; }

.character-name-text {
  font-weight: 700;
  color: #1e293b;
  font-size: 0.9rem;
}

.character-mood-text {
  font-size: 0.78rem;
  color: #1e293b;
  font-weight: 500; /* less bold */
  line-height: 1;
  font-family: var(--font-mono);
}

.stat-values {
  display: flex;
  gap: 0.75rem;
}

.stat-value {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.character-mp {
  padding-left: 0.25rem; /* tighter separation from HP */
  display: flex;
  flex-direction: column;
  align-items: center; /* center stack */
  text-align: center; /* center text */
  position: relative;
  overflow: visible;
}

/* HP stack mirrors MP stack and carries left divider */

.character-hp {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-left: 1px solid var(--color-affection-outline);
  margin-left: 0.2rem;
  padding-left: 0.5375rem; /* add another ~1px gap */
}

.mp-label {
  font-size: 0.65rem;
  color: #64748b;
  font-weight: 600;
}

.mp-value {
  font-size: 0.78rem;
  line-height: 1;
  font-family: var(--font-mono, monospace);
}

/* Increase specificity to ensure MP smaller than stat default */

.character-mp .mp-value {
  font-size: 0.78rem;
}

/* HP styles mirror MP */

.hp-label {
  font-size: 0.65rem;
  color: #64748b;
  font-weight: 600;
}

.hp-value {
  font-size: 0.78rem;
  line-height: 1;
  font-family: var(--font-mono, monospace);
}

.character-mp .hp-value {
  font-size: 0.78rem;
}

/* Spacing between HP and MP stacks */

.hp-value + .mp-label {
  margin-top: 0.15rem;
}

/* Responsive Design */

@media (max-width: 768px) {
  .character-status-bar {
    padding: 0.5rem;
    min-width: 120px;
    max-width: 180px;
  }

  .character-stats-layout {
    gap: 0.5rem;
  }

  .mood-indicator {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .mood-avatar {
    width: 20px;
    height: 20px;
  }
  .mood-avatar-lg {
    width: 32px;
    height: 32px;
  }

  .character-name-text {
    font-size: 0.85rem;
  }

  .character-mood-text {
    font-size: 0.7rem;
  }

  .stat-value {
    font-size: 0.65rem;
  }

  .stat-values {
    gap: 0.5rem;
  }

  .mp-value {
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) {
  .character-status-bar {
    padding: 0.4rem;
    min-width: 110px;
    max-width: 160px;
  }

  .character-stats-layout {
    gap: 0.4rem;
  }

  .mood-indicator {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }

  .mood-avatar {
    width: 18px;
    height: 18px;
  }
  .mood-avatar-lg {
    width: 30px;
    height: 30px;
  }

  .character-name-text {
    font-size: 0.8rem;
  }

  .character-mood-text {
    font-size: 0.65rem;
  }

  .stat-value {
    font-size: 0.6rem;
  }

  .stat-values {
    gap: 0.4rem;
  }

  .mp-value {
    font-size: 0.55rem;
  }
}

/* Audio icon container alignment */

.character-audio {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.3125rem; /* +1px vs prior */
}

/* Floating mana delta animation */

.mp-delta {
  position: absolute;
  bottom: -10px; /* start below the value */
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-family: var(--font-mono, monospace);
  line-height: 1;
  pointer-events: none;
  animation: mpFloatUp 900ms ease forwards;
  text-shadow: var(--theme-shadow-sm);
}

.mp-delta.neg { color: #ef4444; }

.mp-delta.pos { color: #22c55e; }

@keyframes mpFloatUp {
  0% { opacity: 0; transform: translate(-50%, 10px); }
  20% { opacity: 1; transform: translate(-50%, 2px); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/**
 * Chat Interface Component Styles
 * Streamlined and lightweight design for Rally Frontend-2
 */

/* Live2D Main Container - Simplified */

.live2d-main-container {
  position: fixed;
  inset: 0; /* Shorthand for top/right/bottom/left: 0 */
  width: 100vw;
  height: 100vh;
  background: var(--gradient-background);
  pointer-events: none;
  isolation: isolate; /* Create new stacking context to prevent layout shifts */
}

/* Subscription (Wallet tab) */

.subscription-section { margin: 16px 0 20px; }

.subscription-section h4 { margin: 0 0 8px; color: var(--color-neutral-800); }

.subscription-card {
  border-radius: 14px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border-strong);
  box-shadow: 0 10px 26px var(--glass-shadow);
}

.subscription-status { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }

.subscription-status .badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }

.subscription-status .badge.active { color: #fff; background: var(--theme-secondary, var(--color-affection-outline)); }

.subscription-status .badge.inactive { color: var(--color-neutral-800); background: var(--color-neutral-100); }

.subscription-status .period { font-size: 12px; color: var(--color-neutral-700); }

.subscription-body { padding: 8px 12px 12px; }

.subscription-body .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }

.subscription-body .plan { border-radius: 12px; padding: 10px 12px; text-align: left; border: 1px solid var(--glass-border); background: var(--glass-bg); }

.subscription-body .plan.selected { border-color: var(--theme-secondary, var(--color-affection-outline)); box-shadow: 0 8px 20px var(--glass-shadow); }

.subscription-body .plan-title { font-weight: 700; font-size: 13px; color: var(--color-neutral-900); }

.subscription-body .plan-price { font-weight: 800; font-size: 14px; color: var(--color-neutral-900); }

.subscription-body .plan-desc { font-size: 12px; color: var(--color-neutral-700); }

.subscription-body .cta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }

.subscription-body .subscribe-btn { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--glass-border-strong); background: var(--theme-secondary, var(--color-affection-outline)); color: #fff; font-weight: 700; }

.subscription-body .subscribe-btn:disabled { opacity: 0.7; }

.subscription-body .credits-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg); font-size: 12px; }

/* Live2D Canvas Container - Fixed positioning */

#live2d-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh; /* Full viewport height */
  z-index: var(--z-content);
  pointer-events: none; /* Disable all pointer events */
  will-change: transform; /* Optimize for GPU rendering */
  transform: translateZ(0); /* GPU layer */
  overflow: hidden; /* Prevent scrolling */
  touch-action: none; /* Disable touch gestures */
  user-select: none; /* Prevent selection */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#canvas-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Disable interactions */
  overflow: hidden;
  touch-action: none;
}

#live2d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  /* Ensure canvas renders above any ancestor backgrounds */
  z-index: calc(var(--z-content) + 1);
}

/* UI Overlay Layer - Isolates UI from canvas */

.ui-overlay-layer {
  position: fixed;
  inset: 0;
  pointer-events: none; /* Allow clicks through to canvas */
  z-index: var(--z-overlay);
  isolation: isolate; /* Prevent layout interactions with canvas */
}

.ui-overlay-layer > * {
  pointer-events: auto; /* Re-enable for child elements */
}

/* Adventure Overlay */

.adventure-overlay {
  position: fixed;
  left: 50%;
  bottom: 7rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: var(--z-overlay);
  max-width: min(90vw, 720px);
}

.adventure-dialogue {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur-medium);
  border: 1px solid var(--glass-border-medium);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  color: var(--theme-text-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.adventure-speaker {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-accent-700);
  margin-bottom: 0.25rem;
}

.adventure-text {
  font-size: 0.95rem;
}

.adventure-subtext {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-neutral-600);
}

.adventure-choices {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.adventure-choice {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-medium);
  color: var(--color-text-primary);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    transform var(--transition-base),
    background var(--transition-base);
}

.adventure-choice:hover {
  background: var(--color-accent-100);
  transform: var(--transform-scale-md);
}

/* Top Controls */

.top-controls {
  position: absolute;
  top: 0rem;
  left: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: var(--z-header);
  pointer-events: auto;
}

.top-controls > * {
  pointer-events: auto;
}

.character-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-neutral-900);
  text-shadow: var(--theme-shadow-sm);
  margin: 0;
}

/* Affection Container - Right Side Lower */

.affection-container {
  position: fixed;
  top: 48%;
  right: 0rem;
  transform: translateY(-50%);
  z-index: var(--z-header);
  pointer-events: auto;
}

/* Shift affection container left when sidebar is open on desktop */

@media (min-width: 769px) {
  body.sidebar-open .affection-container { right: 480px; top: 48% !important; transform: translateY(-50%) !important; }
  /* Ensure VN and chat input stay within visible content when sidebar is open */
  body.sidebar-open .visual-novel-message-box {
    width: calc(100% - 480px - 2rem);
    transform: translateX(calc(-50% - 240px));
  }
  /* Keep chat input fixed and centered; adjust its max-width only */
  body.sidebar-open .chat-input-wrapper { max-width: min(700px, calc(100vw - 480px - 2rem)); }
}

/* HUD Controls Container - Left Side Lower (mirrors affection on right) */

.hud-controls-left {
  position: fixed;
  top: 48%;
  left: 0.75rem;
  transform: translateY(-50%);
  z-index: var(--z-header);
  pointer-events: auto;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.hud-controls-left .hud-icon-btn { width: 28px; height: 28px; }

.hud-controls-left:hover,
.hud-controls-left:focus-within { opacity: 1; }

/* When a background image is active, add a subtle glass panel behind the right-side controls */

/* Prefer minimal treatment: remove panel, rely on shadows and slight icon chips */

body.bg-image-active .affection-container > div {
  background: transparent !important;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Give each small icon button a circular chip for contrast when bg is active */

/* Use same minimal treatment as top HUD: no chip, no drop-shadow. */

body.bg-image-active .affection-container button {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
}

/* Improve legibility of status text when bg image is active */

body.bg-image-active .voice-status-chip {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Apply the same subtle legibility shadow to control icons */

body.bg-image-active .affection-container button svg,
body.bg-image-active .top-controls svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* Apply subtle text-shadow to font-based icons (MingCute webfont) */

body.bg-image-active .affection-container button span[class^="mgc_"],
body.bg-image-active .affection-container button span[class*=" mgc_"],
body.bg-image-active .top-controls span[class^="mgc_"],
body.bg-image-active .top-controls span[class*=" mgc_"] {
  /* Use drop-shadow like SVG icons for consistent look */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* (Removed) bottom drawer styles */

/* Omok stones pulse animation */

.omok-stone { will-change: transform; }

.omok-stone--new { animation: omokPulse 320ms ease-out; }

@keyframes omokPulse {
  0% { transform: scale(0.7); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  60% { transform: scale(1.12); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}

/* Go stones pulse animation (reuse Omok animation) */

.go-stone { will-change: transform; }

.go-stone--new { animation: omokPulse 320ms ease-out; }

/* Thin low-credits badge under top-left HUD */

.low-credits-badge {
  background: #fecaca; /* pastel red for OOM */
  border: 1px solid #fca5a5;
  border-radius: 4px; /* slightly rounded per latest design */
  padding: 0px 10px; /* very thin vertically, slightly wider horizontally */
  font-size: 9px;
  line-height: 1;
  color: var(--color-text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); /* subtler shadow */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%; /* match HUD stack width */
  justify-content: center; /* center text within full width */
  height: 25px; /* fixed height as requested */
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.low-credits-badge .label { opacity: 0.85; }

.low-credits-badge .manage-link {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 0 2px;
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 9px;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}

.low-credits-badge .manage-link:focus:not(:focus-visible),
.low-credits-badge .manage-link:active {
  outline: none !important;
  box-shadow: none !important;
}

.low-credits-badge .manage-link:hover { opacity: 0.85; }

.low-credits-badge .manage-link:active { opacity: 0.6; transition: opacity 120ms ease; }

.low-credits-badge .close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

body.bg-image-active .low-credits-badge { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }

.low-credits-badge.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Shake animation when user bumps against OOM */

@keyframes oomshake {
  10% { transform: translateX(-2px); }
  20% { transform: translateX(2px); }
  30% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  50% { transform: translateX(-1px); }
  60% { transform: translateX(1px); }
  70% { transform: translateX(0); }
}

.low-credits-badge.shake {
  animation: oomshake 0.35s ease-in-out;
}

/* Unified HUD notices (stack below HUD) */

.hud-notices-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.hud-notice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 25px;
  padding: 0 10px; /* match OOM badge horizontal padding */
  font-size: 10px;
  line-height: 1;
  border-radius: 4px; /* slightly rounded per latest design */
  border: 1px solid rgba(255,255,255,0.32);
  background: var(--theme-primary-light); /* solid base */
  color: var(--color-text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hud-notice .text { opacity: 0.9; }

.hud-notice .close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}

.hud-notice.info { background: var(--color-accent-200); }

.hud-notice.success { background: #bbf7d0; border-color: #86efac; color: var(--color-text-primary); }

.hud-notice.warning { background: #fef3c7; border-color: #fde68a; color: var(--color-text-primary); }

.hud-notice.error { background: #fecaca; border-color: #fca5a5; color: var(--color-text-primary); }

/* Right-side HUD icon buttons: size matches affection heart exactly */

.hud-icon-btn {
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  box-shadow: none;
  color: #94a3b8;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  position: relative; /* ensure tooltip positions relative to button */
  overflow: visible;  /* allow tooltip to extend outside */
}

/* Color-only hover behavior (no background) */

.hud-icon-btn:hover { color: var(--color-affection-outline); background: transparent !important; }

.hud-icon-btn:active { background: transparent !important; }

.hud-icon-btn:focus-visible { outline: 2px solid var(--color-accent-100); outline-offset: 2px; }

/* If active, invert hover to gray */

.hud-icon-btn[aria-pressed='true'] { color: var(--color-affection-outline); }

.hud-icon-btn[aria-pressed='true']:hover { color: #94a3b8; }

/* Tiny label tooltip on hover */

/* Markup-based tooltip for reliability */

.hud-icon-btn .hud-tooltip {
  position: absolute;
  right: 100%;
  margin-right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-accent-200);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.1;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(20px);
  z-index: var(--z-tooltip);
  display: none;
  pointer-events: none;
}

.hud-icon-btn:hover .hud-tooltip,
.hud-icon-btn:focus-visible .hud-tooltip { display: inline-block; }

/* Reuse the same VN tooltip style for top-left audio toggle and input buttons */

.audio-toggle,
.actions-toggle,
.tip-button { position: relative; overflow: visible; }

.audio-toggle .hud-tooltip,
.actions-toggle .hud-tooltip,
.tip-button .hud-tooltip {
  position: absolute;
  /* Positioning set per-button below */
  background: var(--color-accent-200);
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.1;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(20px);
  z-index: var(--z-tooltip);
  display: none;
  pointer-events: none;
}

.audio-toggle .hud-tooltip {
  left: 100%;
  margin-left: 8px;
  top: 50%;
  transform: translateY(-50%);
  right: auto;
  padding: 8px 10px; /* match VN bubble vertical padding */
}

.actions-toggle .hud-tooltip,
.tip-button .hud-tooltip { bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); top: auto; right: auto; margin: 0; }

.audio-toggle:hover .hud-tooltip,
.audio-toggle:focus-visible .hud-tooltip,
.actions-toggle:hover .hud-tooltip,
.actions-toggle:focus-visible .hud-tooltip,
.tip-button:hover .hud-tooltip,
.tip-button:focus-visible .hud-tooltip {
  display: inline-block;
}

/* Removed bottom-center SystemToasts (replaced by HUD notices) */

/* Active/selected coloring for toggles */

.music-toggle-btn[aria-pressed='true'],
.mic-toggle-btn[aria-pressed='true'] {
  color: var(--color-affection-outline);
}

@media (max-width: 768px) {
  .hud-icon-btn {
    width: 26px; /* nudge smaller on tablet */
    height: 26px;
  }
  .affection-container { right: 0rem; }
}

@media (max-width: 480px) {
  .hud-icon-btn { width: 20px; height: 20px; }
}

@media (max-width: 480px) {
  .affection-container {
    right: 0.25rem;
  }
}

/* Wallet Container - Top Right */

.wallet-container {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: calc(var(--z-overlay) + 10); /* Always above overlays */
  pointer-events: auto;
  display: flex;
  align-items: center; /* Center vertically with other top elements */
}

/* Bottom Chat Input - Clean and Minimal */

.chat-input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: transparent;
  z-index: var(--z-chat-input);
  pointer-events: auto; /* Allow interactions with chat input */
}

.chat-input-wrapper {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  pointer-events: auto;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  isolation: isolate; /* ensure filter pseudo-element isolates backdrop */
  background: var(--glass-bg-ultra) !important;
  background-image: var(--glass-sheen);
  backdrop-filter: var(--glass-blur-strong) saturate(125%);
  -webkit-backdrop-filter: var(--glass-blur-strong) saturate(125%);
  border-radius: 3rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 1px 2px var(--glass-shadow) !important; /* lighter drop shadow */
  border: 1px solid var(--glass-border-strong) !important;
  transition: all var(--transition-slow);
}

/* Hover matches default — no separate hover visuals */

.input-group::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 var(--glass-border-inner);
}

/* Removed hover effect - no upward movement */

.input-group:focus-within {
  box-shadow: 0 2px 6px var(--glass-shadow) !important; /* lighter focus shadow */
  border-color: var(--glass-border-strong) !important;
}

/* Reduce space specifically between gift and send (even tighter) */

.tip-button + .send-button {
  margin-left: -0.75rem;
}

/* Frosted default; revert to standard blur on hover/focus/typing for clarity */

@supports (backdrop-filter: url(#frosted)) {
  .input-group {
    backdrop-filter: url(#frosted);
    -webkit-backdrop-filter: url(#frosted);
  }
  .input-group:focus-within,
  .input-group.typing {
    backdrop-filter: var(--glass-blur-strong) saturate(125%);
    -webkit-backdrop-filter: var(--glass-blur-strong) saturate(125%);
  }
}

.message-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  color: var(--color-neutral-900);
  padding: 0.5rem 0;
  font-weight: 500;
  caret-color: var(--color-neutral-900);
}

.message-input:focus {
  outline: none;
}

.message-input::placeholder {
  color: var(--color-neutral-500);
  font-weight: 400;
}

/* Mic level bars while recording */

.mic-level {
  position: absolute;
  left: 4.6rem; /* after actions button */
  right: 5.6rem; /* before gift/send */
  top: 50%;
  transform: translateY(-50%);
  height: 1.2rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  align-items: end;
  pointer-events: none;
}

.mic-bar {
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
  background: linear-gradient(180deg, rgba(255,107,157,0.85), rgba(255,107,157,0.35));
  border-radius: 2px;
  opacity: 0.85;
}

/* Waveform canvas overlay */

.waveform-canvas {
  position: absolute;
  left: 4.6rem; /* after actions button */
  right: 5.6rem; /* before gift/send */
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  pointer-events: none;
}

/* Processing overlay rendered on top of the input while STT is running */

.processing-overlay {
  position: absolute;
  left: 4.5rem; /* leave room for actions button */
  right: 5.5rem; /* leave room for gift + send */
  pointer-events: none;
  display: inline-flex;
  gap: 0.02rem;
  align-items: center;
  height: 2rem;
  line-height: 2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-neutral-500);
  filter: brightness(0.95);
  user-select: none;
  white-space: nowrap;
}

@keyframes procPulseShift {
  0% { opacity: 0.55; transform: translateX(0); filter: brightness(0.9); }
  30% { opacity: 0.9; transform: translateX(-1px); filter: brightness(1.0); }
  60% { opacity: 1; transform: translateX(-2px); filter: brightness(1.1); }
  100% { opacity: 0.55; transform: translateX(0); filter: brightness(0.9); }
}

.processing-char {
  display: inline-block;
  animation: procPulseShift 1.4s ease-in-out infinite;
}

/* Cancel button next to processing overlay */

.processing-cancel {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  cursor: pointer;
  /* Prevent global button hover transforms from shifting position */
  transition: color var(--transition-fast), background var(--transition-fast);
}

.processing-cancel:hover {
  color: var(--color-neutral-900);
  background: rgba(0,0,0,0.04);
  transform: translateY(-50%);
}

/* Input Buttons - Enhanced for Better Icon Visibility */

.image-button,
.settings-button,
.actions-toggle,
.tip-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
  color: var(--color-neutral-900);
  background: var(--color-affection-outline);
  font-weight: var(--font-weight-medium);
  position: relative;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.image-button:hover,
.settings-button:hover {
  background: rgba(248, 165, 194, 0.85);
  border: none;
  color: var(--color-neutral-900);
  transform: var(--transform-scale-md);
}

.actions-toggle:hover {
  background: transparent;
  color: var(--color-neutral-900);
  transform: var(--transform-scale-md);
}

.image-button:active,
.settings-button:active,
.tip-button:active {
  background: rgba(248, 165, 194, 0.75);
  border: none;
  color: var(--color-neutral-900);
  transform: var(--transform-scale-sm);
}

.image-button:disabled,
.settings-button:disabled,
.actions-toggle:disabled,
.tip-button:disabled {
  background: rgba(248, 165, 194, 0.4);
  border: none;
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  transform: none;
}

/* Actions Container - Only button inside input */

.actions-container {
  position: relative;
  overflow: visible; /* Allow badges to show outside */
}

.actions-toggle {
  background: transparent;
  /* Match send icon default color */
  color: var(--color-text-secondary);
}

.actions-toggle.active {
  background: transparent;
  color: var(--color-affection-outline);
}

/* Actions Menu Wrapper - Positioned outside input group */

.actions-menu-wrapper {
  position: absolute;
  bottom: 100%;
  left: 0.5rem; /* Align with the plus button position inside input group */
  margin-bottom: 0.5rem;
  z-index: var(--z-actions-menu);
}

.actions-menu {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg-ultra);
  background-image: var(--glass-sheen);
  /* Default: frosted, match interaction panel */
  backdrop-filter: var(--glass-blur-strong) saturate(125%);
  -webkit-backdrop-filter: var(--glass-blur-strong) saturate(125%);
  border-radius: 2rem;
  box-shadow: 0 1px 5px var(--glass-shadow);
  border: 1px solid var(--glass-border-strong);
  padding: 0.5rem;
  display: flex;
  gap: 0.5rem;
  animation: slideUp var(--transition-slow) forwards;
  overflow: visible; /* Allow badges to show outside */
}

.actions-menu:hover {
  box-shadow: 0 1px 3px var(--glass-shadow);
}

/* Refraction/Glass layering */

.actions-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 var(--glass-border-inner);
}

/* Frosted default; revert to standard blur on hover/focus for clarity */

@supports (backdrop-filter: url(#frosted)) {
  .actions-menu {
    backdrop-filter: url(#frosted);
    -webkit-backdrop-filter: url(#frosted);
  }
  .actions-menu:hover,
  .actions-menu:focus-within {
    backdrop-filter: var(--glass-blur-strong) saturate(125%);
    -webkit-backdrop-filter: var(--glass-blur-strong) saturate(125%);
  }
}

/* sheen hover removed */

.action-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
  color: var(--color-neutral-800);
  background: transparent;
  font-weight: var(--font-weight-medium);
  aspect-ratio: 1;
  flex-shrink: 0;
}

.action-item:hover {
  background: #ffffff;
  color: var(--color-neutral-900);
  transform: var(--transform-scale-md);
}

.action-item:active {
  background: var(--color-accent-400); /* nice pink for icon active */
  color: var(--color-text-inverse);
}

.action-item.active {
  background: var(--color-affection-outline);
  color: var(--color-neutral-900);
}

.action-item.message-view-action {
  background: transparent;
  border: 1px solid transparent;
  transition: var(--transition-all);
}

.action-item.message-view-action:hover {
  background: var(--color-accent-100);
  border-color: var(--color-accent-300);
}

.action-item.message-view-action.active {
  background: var(--gradient-pink);
  border-color: var(--color-accent-400);
  color: white;
  box-shadow: var(--shadow-pink-sm);
}

.action-item.message-view-action.active:hover {
  background: var(--theme-gradient-primary);
  transform: var(--transform-scale-md);
}

.action-item.mic-action {
  background: transparent;
  border: 1px solid transparent;
  transition: var(--transition-all);
}

.action-item.mic-action:hover {
  background: #ffffff;
  border-color: transparent;
}

.action-item.mic-action.active {
  background: var(--color-affection-outline);
  border-color: var(--color-affection-outline);
  color: var(--color-neutral-900);
  box-shadow: var(--shadow-pink-sm);
  animation: pulse 1.5s ease-in-out infinite;
}

.action-item.mic-action.active:hover {
  background: var(--theme-gradient-primary);
  transform: var(--transform-scale-md);
}

/* Voice status chip (shown under mic icon in affection column) */

.voice-status-chip {
  margin-top: 0.125rem;
  padding: 2px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-neutral-700);
  background: var(--glass-bg-ultra);
  border: 1px solid var(--glass-border-strong);
  border-radius: 999px;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
}

.voice-status-chip.listening { color: var(--color-neutral-700); }

.voice-status-chip.detecting { color: var(--color-accent-700); }

.voice-status-chip.processing { color: var(--color-accent-700); }

.voice-status-chip.speaking { color: var(--color-neutral-900); }

/* Icon styling for better visibility */

.image-button svg,
.settings-button svg,
.actions-toggle svg,
.action-item svg,
.tip-button svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  display: block;
  flex-shrink: 0;
}

/* Plus (actions) icon – slightly faded by default */

.actions-toggle svg {
  opacity: 0.8;
  transition: opacity var(--transition-base);
}

/* Spin animation for loading icon inside the actions (plus) button while processing */

.actions-toggle .spinning {
  animation: spin 1s linear infinite;
}

/* Ensure active state colors the icon with theme outline pink */

.actions-toggle:active,
.actions-toggle.active {
  background: transparent;
  /* Active icon should use dark blackish */
  color: var(--color-neutral-900);
}

/* Gift (tip) button: faded by default, no background changes */

.tip-button {
  background: transparent;
}

.tip-button:hover,
.tip-button:active,
.tip-button:disabled {
  background: transparent;
}

.tip-button svg {
  /* Match send icon default color, slightly faded */
  color: var(--color-text-secondary);
  opacity: 0.8;
  transition: color var(--transition-base), opacity var(--transition-base);
}

.tip-button:hover svg {
  color: var(--color-neutral-900);
  opacity: 1;
}

.tip-button:active svg,
.tip-button.active svg {
  /* Active icon uses dark blackish */
  color: var(--color-neutral-900);
}

/* Match actions-toggle behavior: active = pink-secondary */

.tip-button:active svg,
.tip-button.active svg {
  color: var(--theme-secondary);
}

/* Ensure disabled/hover backgrounds remain transparent */

.actions-toggle:disabled {
  background: transparent;
}

/* Fallback for missing icons */

.image-button:empty::before,
.settings-button:empty::before,
.actions-toggle:empty::before,
.action-item:empty::before,
.tip-button:empty::before {
  content: '•';
  font-size: 16px;
  font-weight: bold;
}

.actions-toggle:empty::before {
  content: '+';
}

.action-item.history-action {
  position: relative;
}

/* Attachment Button Badge */

.actions-menu {
  position: relative;
}

.action-item.file-action {
  position: relative;
  overflow: visible; /* Allow badge to show outside button */
}

.attachment-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.attachment-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--gradient-pink);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.125rem 0.3rem;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  border: 2px solid white;
  z-index: calc(var(--z-header) + 5);
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.2s ease;
}

.attachment-badge:hover {
  transform: var(--transform-scale-lg);
}

/* Inline Attachment Display */

.attachment-display {
  margin-bottom: 0.75rem;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--theme-border-strong);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--theme-shadow-md);
  transition: var(--transition-all);
  position: relative;
}

.attachment-display:hover {
  box-shadow: var(--shadow-lg);
}

.attachment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--theme-border-normal);
}

.attachment-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-neutral-900);
  text-shadow: var(--theme-shadow-xs);
}

/* Panel Switcher */

.panel-switcher {
  display: flex;
  gap: 0.25rem;
}

.panel-switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--theme-border-strong);
  background: transparent;
  border-radius: 6px;
  color: var(--color-neutral-500);
  font-size: 0.75rem;
  cursor: pointer;
  transition: var(--transition-all);
  min-width: 2rem;
  height: 1.75rem;
}

.panel-switch-btn:hover {
  background: var(--theme-bg-overlay-light);
  border-color: var(--theme-border-strong);
  color: var(--color-accent-700);
}

.panel-switch-btn.active {
  background: var(--theme-bg-overlay-medium);
  color: var(--color-accent-700);
  border-color: var(--color-accent-400);
  box-shadow: var(--theme-shadow-pink-sm);
}

.panel-switch-btn.active:hover {
  background: var(--theme-bg-overlay-heavy);
}

/* Visual Novel Panel Content */

.visual-novel-panel-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vn-panel-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--color-accent-50);
  border: 1px solid var(--color-accent-200);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--color-neutral-500);
}

.vn-panel-info svg {
  color: var(--color-accent-700);
  flex-shrink: 0;
}

.vn-panel-controls {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
}

.vn-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--theme-border-strong);
  background: var(--glass-bg-strong);
  border-radius: 6px;
  color: var(--color-neutral-500);
  cursor: pointer;
  transition: var(--transition-all);
}

.vn-control-btn:hover {
  background: var(--theme-bg-overlay-light);
  border-color: var(--theme-border-strong);
  color: var(--color-accent-700);
  transform: translateY(-1px);
}

.vn-control-btn:active {
  transform: translateY(0);
}

/* Visual Novel Quick Responses */

.vn-quick-responses {
  margin: 0.75rem 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-accent-100);
}

.vn-quick-responses .quick-response-panel.embedded {
  margin: 0;
}

.vn-quick-responses .quick-response-list.compact {
  gap: 0.375rem;
}

.vn-quick-responses .quick-response-item.compact {
  background: var(--color-accent-50);
  border: 1px solid var(--color-accent-200);
  color: var(--theme-text-primary);
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
}

.vn-quick-responses .quick-response-item.compact:hover {
  background: var(--color-accent-100);
  border-color: var(--theme-border-strong);
  transform: none;
  box-shadow: none;
}

.vn-quick-responses .response-hotkey.compact {
  background: var(--theme-bg-overlay-medium);
  border: 1px solid var(--color-accent-300);
  color: var(--color-accent-700);
  font-size: 0.6rem;
  min-width: 1.25rem;
  height: 1rem;
}

/* Quick Response Panel */

.quick-response-panel {
  margin: 0 auto; /* center the panel */
  width: min(90vw, 720px);
  max-width: 720px;
  background: var(--glass-bg-light);
  /* Default: frosted to match interaction panel; fallback to blur on unsupported */
  backdrop-filter: var(--glass-blur-medium);
  border: 1px solid var(--glass-border-medium);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--theme-shadow-md);
  transition: all var(--transition-base);
  position: relative;
}

.quick-response-panel:hover {
  box-shadow: var(--theme-shadow-md);
}

/* Frosted default; revert to standard blur on hover/focus for clarity */

@supports (backdrop-filter: url(#frosted)) {
  .quick-response-panel {
    backdrop-filter: url(#frosted);
    -webkit-backdrop-filter: url(#frosted);
  }
  .quick-response-panel:hover,
  .quick-response-panel:focus-within {
    backdrop-filter: var(--glass-blur-medium) saturate(125%);
    -webkit-backdrop-filter: var(--glass-blur-medium) saturate(125%);
  }
}

.quick-response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--theme-border-normal);
}

.quick-response-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-neutral-900);
  text-shadow: var(--theme-shadow-xs);
}

.quick-response-title svg {
  color: var(--color-accent-700);
}

.quick-response-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.response-generating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--color-neutral-500);
  font-size: 0.875rem;
}

.response-generating .spinning {
  animation: spin 1s linear infinite;
  color: var(--color-accent-700);
}

.quick-response-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--glass-border-light);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: left;
  width: 100%;
}

.quick-response-item:hover {
  background: var(--glass-bg-medium);
  border-color: var(--glass-border-medium);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.quick-response-item:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(255, 107, 157, 0.2);
}

.response-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.response-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  background: rgba(255, 182, 193, 0.1);
  color: var(--color-accent-700);
  flex-shrink: 0;
}

.response-text {
  font-size: 0.875rem;
  color: var(--theme-text-primary);
  line-height: 1.4;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.response-hotkey {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.5rem;
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border-medium);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.quick-response-footer {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 155, 190, 0.15);
}

.response-hint {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-neutral-500);
}

.response-hint svg {
  color: var(--color-accent-700);
}

/* Compact Quick Response Panel */

.quick-response-panel.compact {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur-medium);
  border: 1px solid var(--glass-border-medium);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  /* Slightly wider suggestions */
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}

@supports (backdrop-filter: url(#frosted)) {
  .quick-response-panel.compact {
    backdrop-filter: url(#frosted);
    -webkit-backdrop-filter: url(#frosted);
  }
  .quick-response-panel.compact:hover,
  .quick-response-panel.compact:focus-within {
    backdrop-filter: var(--glass-blur-medium) saturate(125%);
    -webkit-backdrop-filter: var(--glass-blur-medium) saturate(125%);
  }
}

.quick-response-panel.embedded {
  margin: 0 auto; /* center embedded as well */
  width: min(90vw, 720px);
  max-width: 720px;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.quick-response-header.compact {
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255, 155, 190, 0.15);
}

.quick-response-title-compact {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-neutral-500);
}

.quick-response-title-compact svg {
  color: var(--color-accent-700);
}

.refresh-responses-btn.compact {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 3px;
}

.refresh-responses-btn.compact.inline {
  flex: 0 0 auto;
  margin-left: 0.25rem;
  align-self: flex-start;
}

.quick-response-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.quick-response-list.compact {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0;
  flex-wrap: nowrap; /* Keep on single line */
  align-items: center;
  overflow: hidden; /* Hide overflow */
  padding-bottom: 0;
  flex: 1;
}

.quick-response-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: none !important;
  color: var(--color-pink-200);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.quick-response-refresh:hover,
.quick-response-refresh:focus,
.quick-response-refresh:focus-visible,
.quick-response-refresh:active {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--theme-primary);
}

.quick-response-refresh:active svg { animation: spin 0.6s linear; }

/* Removed scrollbar styles since we're not using horizontal scroll anymore */

.quick-response-item.compact {
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  font-size: 0.75rem;
  min-height: auto;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border-light);
}

.quick-response-item.compact:hover {
  background: var(--glass-bg-medium);
  border-color: var(--glass-border-medium);
  transform: translateY(-0.5px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.response-text.compact {
  font-size: 0.75rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}

.response-hotkey.compact {
  min-width: 1.5rem;
  height: 1.25rem;
  font-size: 0.625rem;
  margin-left: 0.25rem;
  border-radius: 3px;
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border-medium);
  color: var(--color-text-secondary);
}

.response-generating.compact {
  padding: 0.5rem;
  font-size: 0.75rem;
  justify-content: flex-start;
}

.attachment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.attachment-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 8px;
  min-height: 60px;
  position: relative;
  transition: var(--transition-all);
  cursor: pointer;
  background: rgba(249, 250, 251, 0.8);
}

.attachment-slot.filled {
  background: rgba(255, 182, 193, 0.05);
  border-color: var(--theme-border-strong);
  cursor: default;
}

.attachment-slot.empty:hover {
  background: rgba(255, 182, 193, 0.1);
  border-color: rgba(255, 182, 193, 0.4);
  transform: translateY(-1px);
}

.attachment-icon {
  margin-bottom: 0.25rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-slot.filled .attachment-icon {
  color: var(--color-accent-700);
}

.attachment-slot.empty .attachment-icon {
  color: #9ca3af;
}

.attachment-filename {
  font-size: 0.65rem;
  font-weight: 500;
  text-align: center;
  color: var(--theme-text-primary);
  line-height: 1.2;
}

.attachment-slot.empty .attachment-filename {
  color: #9ca3af;
}

.attachment-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: var(--transition-all);
}

.attachment-remove:hover {
  background: #dc2626;
  transform: var(--transform-scale-lg);
}

.attachment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(229, 231, 235, 0.3);
}

.attachment-info {
  font-size: 0.625rem;
  color: #6b7280;
  line-height: 1.3;
}

.clear-all-attachments {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 1rem;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-all);
  min-width: 120px;
  justify-content: center;
}

.clear-all-attachments:hover {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.5);
}

/* Send Button */

.send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  font-weight: var(--font-weight-medium);
  position: relative;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.send-button:hover {
  background: transparent;
  color: var(--theme-secondary);
  transform: var(--transform-scale-md);
}

.send-button:active {
  background: transparent;
  color: var(--color-accent-600);
  transform: var(--transform-scale-sm);
}

.send-button:disabled {
  background: transparent;
  color: var(--color-neutral-300);
  cursor: not-allowed;
  transform: none;
}

.send-button svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  display: block;
  flex-shrink: 0;
  transition: all var(--transition-base);
}

/* Fallback for missing icons */

.send-button:empty::before {
  content: '→';
  font-size: 20px;
  font-weight: bold;
}

.settings-button.active {
  background: var(--color-secondary-500);
  color: var(--color-text-inverse);
}

/* Tip Button - align with transparent icon-only style */

.tip-button {
  background: transparent;
  color: inherit;
  border: none;
}

.tip-button:hover {
  background: transparent;
  color: inherit;
  border: none;
  transform: var(--transform-scale-md);
}

.tip-button:active {
  background: transparent;
  color: inherit;
  transform: var(--transform-scale-sm);
}

/* Message Controls */

.message-controls {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  z-index: var(--z-header);
  pointer-events: auto;
}

.message-overlay-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-all);
  color: var(--color-neutral-900);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.message-overlay-toggle:hover {
  background: rgba(255, 255, 255, 1);
  transform: var(--transform-scale-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.message-overlay-toggle.active {
  background: var(--gradient-pink);
  color: white;
  box-shadow: 0 4px 16px rgba(255, 107, 157, 0.3);
}

/* Responsive Design */

@media (max-width: 1024px) {
  body {
    font-size: 14px;
  }

  .live2d-main-container {
    height: 100vh;
  }

  .top-controls { top: 0rem; left: 0.5rem; }

  .character-name {
    font-size: 1.3rem;
  }

  .chat-input-container {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .live2d-main-container {
    height: 100vh;
  }

  #live2d-container {
    height: 100vh; /* Mobile uses standard height */
  }

  .top-controls { top: 0rem; left: 0.5rem; gap: 0.5rem; }

  .affection-container {
    top: 48%;
    right: 0.5rem;
    transform: translateY(-50%);
  }

  .wallet-container { top: 0.75rem; right: 0.5rem; }

  .character-name {
    font-size: 1.2rem;
  }

  .chat-input-container {
    padding: 1rem;
  }

  .input-group {
    padding: 0.75rem 1rem;
  }

  .message-input {
    font-size: 0.9rem;
  }

  .image-button,
  .send-button,
  .settings-button,
  .actions-toggle,
  .tip-button {
    width: 2rem;
    height: 2rem;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 13px;
  }

  .live2d-main-container {
    height: 100vh;
  }

  .top-controls { top: 0rem; left: 0.5rem; gap: 0.25rem; }

  .affection-container {
    top: 48%;
    right: 0.5rem;
    transform: translateY(-50%);
  }

  .wallet-container { top: 0.75rem; right: 0.5rem; }

  .character-name {
    font-size: 1.1rem;
  }

  .chat-input-container {
    padding: 0.75rem;
  }

  .input-group {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .message-input {
    font-size: 0.85rem;
    padding: 0.25rem 0;
  }

  .image-button,
  .send-button,
  .settings-button,
  .actions-toggle,
  .tip-button {
    width: 2rem;
    height: 2rem;
  }

  .image-button svg,
  .send-button svg,
  .settings-button svg,
  .actions-toggle svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .live2d-main-container {
    height: 100vh;
  }

  .top-controls {
    top: 0.5rem;
    left: 0.5rem;
  }

  .wallet-container {
    top: 0.75rem;
    right: 0.5rem;
  }

  .character-name {
    font-size: 1rem;
  }

  .chat-input-container {
    padding: 0.5rem;
  }
}

@media (max-width: 360px) {
  .top-controls {
    top: 0.5rem;
    left: 0.5rem;
  }

  .wallet-container {
    top: 0.75rem;
    right: 0.5rem;
  }

  .character-name {
    font-size: 1rem;
  }

  .chat-input-container {
    padding: 0.5rem;
  }

  .input-group {
    padding: 0.5rem;
  }

  .image-button,
  .send-button,
  .settings-button,
  .actions-toggle,
  .tip-button {
    width: 1.75rem;
    height: 1.75rem;
  }

  .image-button svg,
  .send-button svg,
  .settings-button svg,
  .actions-toggle svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 768px) {
  .message-controls {
    bottom: 1rem;
    right: 1rem;
    gap: 0.5rem;
  }

  .message-overlay-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Refraction overlay removed */

/* Refraction overlay removed */

/* Gift icon specific: align with new colorway */

.tip-button {
  background: transparent;
}

.tip-button:hover {
  background: transparent;
  color: inherit;
}

.tip-button:active,
.tip-button.active {
  background: transparent;
  color: inherit;
}

/**
 * Error Boundary Component Styles
 * Comprehensive styling for error display and recovery
 */

.error-boundary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 1.25rem;
  background: var(--glass-bg-ultra);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid var(--glass-border-strong);
  box-shadow: 0 8px 24px var(--glass-shadow);
  margin: 1rem;
}

.error-boundary-content { text-align: center; max-width: 640px; width: 100%; }

.error-boundary h2 { color: var(--text-primary); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }

.error-boundary h2::before { content: ''; }

.error-message { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; }

.error-details { text-align: left; margin: 1rem 0; background: var(--glass-bg-light); border-radius: 10px; border: 1px solid var(--glass-border-strong); }

.error-details summary { padding: 0.75rem 1rem; cursor: pointer; font-weight: 600; color: var(--text-secondary); border-radius: 10px; transition: background 0.2s ease; }

.error-details summary:hover { background: var(--glass-bg-ultra); }

.error-info { padding: 0.75rem 1rem; border-top: 1px solid var(--glass-border-strong); }

.error-info p { margin: 0.25rem 0; color: var(--text-secondary); }

.error-info strong { color: var(--text-primary); }

.error-stack, .component-stack { background: var(--color-neutral-900); color: #f9fafb; padding: 0.75rem; border-radius: 8px; font-family: var(--font-family-mono, monospace); font-size: 0.8rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; margin: 0.5rem 0; max-height: 200px; overflow-y: auto; }

.error-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

/* Button styles aligned with HUD theme */

.error-button { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; }

.error-button-primary { background: var(--theme-secondary, var(--color-affection-outline)); color: #fff; border: 1px solid var(--glass-border-strong); box-shadow: 0 8px 20px var(--glass-shadow); }

.error-button-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px var(--glass-shadow); }

.error-button-secondary { background: var(--glass-bg-light); color: var(--text-primary); border: 1px solid var(--glass-border-strong); }

.error-button-secondary:hover { background: var(--glass-bg-ultra); }

.retry-button {
  background: #059669;
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.retry-button:hover {
  background: #047857;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.retry-button:active {
  transform: translateY(0);
}

.reload-button {
  background: white;
  color: #374151;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.reload-button:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.reload-button:active {
  transform: translateY(0);
}

/* Responsive design */

@media (max-width: 768px) {
  .error-boundary {
    padding: 1rem;
    margin: 0.5rem;
    min-height: 300px;
  }

  .error-boundary h2 {
    font-size: 1.25rem;
  }

  .error-message {
    font-size: 0.9rem;
  }

  .error-actions {
    flex-direction: column;
    align-items: center;
  }

  .retry-button,
  .reload-button {
    width: 100%;
    max-width: 200px;
  }

  .error-stack,
  .component-stack {
    font-size: 0.75rem;
    max-height: 150px;
  }
}

/* Dark mode support */

@media (prefers-color-scheme: dark) { .error-boundary { background: var(--glass-bg-ultra); } }

/* High contrast mode support */

@media (prefers-contrast: high) {
  .error-boundary {
    border-width: 2px;
    border-color: #dc2626;
  }

  .retry-button,
  .reload-button {
    border-width: 2px;
  }

  .retry-button {
    border-color: #059669;
  }

  .reload-button {
    border-color: #374151;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .retry-button,
  .reload-button {
    transition: none;
  }

  .retry-button:hover,
  .reload-button:hover {
    transform: none;
  }

  .retry-button:active,
  .reload-button:active {
    transform: none;
  }
}

/* 
 * Live2D Component Styles 
 */

/* FaceTime macOS window styling */

.facetime-window {
  width: 90%;
  height: 90%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--frame-background);
  box-shadow: 0 10px 25px rgba(212, 165, 196, 0.2);
  border: 2px solid #000000;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin: 0 auto;
  max-width: 800px;
  display: flex;
  flex-direction: column;
}

.window-titlebar {
  position: relative;
  height: 30px;
  background: #000000;
  border-bottom: 1px solid #222222;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  flex-shrink: 0;
}

.window-controls {
  display: flex;
  gap: 6px;
  z-index: 2;
}

.window-button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
}

.window-close {
  background-color: #ff5f57;
  border: 1px solid #e04343;
}

.window-minimize {
  background-color: #ffbd2e;
  border: 1px solid #e0a92e;
}

.window-maximize {
  background-color: #28c941;
  border: 1px solid #1ea835;
}

.window-title {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  z-index: 1;
}

.window-content {
  height: calc(100% - 30px);
  width: 100%;
  position: relative;
  overflow: visible;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.live2d-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

#live2d-canvas {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  /* transform is set via chat.css using --live2d-translate-y */
  pointer-events: none; /* Disable all user interactions */
  user-select: none; /* Prevent selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Lip sync toggle button */

.lip-sync-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.lip-sync-button svg {
  width: 22px;
  height: 22px;
}

.lip-sync-button:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.05);
}

.lip-sync-button.active {
  background: rgba(255, 155, 190, 0.8);
  border-color: white;
}

/* Model info styling */

.model-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10;
}

.model-name {
  opacity: 0.9;
}

/* Volume control styling */

.volume-control {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  padding: 8px 4px 4px; /* Reduced bottom padding */
  z-index: 10;
  height: 150px; /* Height for the container */
  width: 36px; /* Narrower width */
}

/* Custom styling for the volume slider */

input[type='range']#volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100px; /* Height when rotated becomes width */
  height: 20px; /* Width when rotated becomes height */
  margin: 0 0 10px;
  padding: 0;
  cursor: pointer;
  transform: rotate(-90deg);
  background: transparent;
  position: relative;
  top: 40px; /* Centers the slider vertically in container */
}

/* Styling the track */

input[type='range']#volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  border: none;
}

input[type='range']#volume-slider::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  border: none;
}

/* Styling the thumb */

input[type='range']#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  margin-top: -4px; /* Center thumb on track */
  border: none;
}

input[type='range']#volume-slider::-moz-range-thumb {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: none;
}

input[type='range']#volume-slider:focus {
  outline: none;
}

/* Better mute button styling */

.mute-button {
  position: relative;
  bottom: 0; /* Remove negative bottom value */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  margin-bottom: 4px; /* Add small margin to prevent touching edge */
}

.mute-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mute-button.muted::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 2px;
  background-color: white;
  transform: rotate(-45deg);
  top: 11px;
  left: 1px;
}

/* Media queries for responsive design */

@media (max-width: 1024px) {
  .facetime-window {
    width: 90%;
    height: 90%;
    max-height: none;
    border-width: 2px;
  }

  .live2d-container {
    height: 100%;
    overflow: hidden;
  }

  #live2d-canvas {
    transform: none;
  }
}

@media (max-width: 768px) {
  .facetime-window {
    width: 90%;
    height: 90%;
    border-radius: 14px;
    border-width: 2px;
    margin: 0 auto;
    max-width: 700px;
  }

  .lip-sync-button {
    bottom: 15px;
    right: 15px;
  }

  .live2d-showcase {
    padding: 1rem;
    height: 60vh; /* Increase height to show more of the model */
    min-height: 400px; /* Minimum height to ensure visibility */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .window-titlebar {
    height: 25px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .window-content {
    height: calc(100% - 25px);
  }

  #live2d-canvas {
    transform: none;
  }

  .volume-control {
    bottom: 15px;
    right: 15px;
    padding: 5px 3px 3px; /* Reduced bottom padding */
    height: 120px;
    width: 30px; /* Narrower width for tablet */
  }

  input[type='range']#volume-slider {
    width: 80px;
    top: 30px;
    margin-bottom: 8px;
  }

  .model-info {
    bottom: 15px;
    left: 15px;
    padding: 5px 10px;
    font-size: 12px;
  }

  .mute-button {
    bottom: 0;
    margin-bottom: 3px;
  }
}

@media (max-width: 480px) {
  .window-button {
    width: 10px;
    height: 10px;
  }

  .window-titlebar {
    height: 22px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
  }

  .window-content {
    height: calc(100% - 22px);
  }

  .live2d-showcase {
    padding: 0.75rem;
    height: 50vh; /* Appropriate height for mobile */
    min-height: 300px; /* Ensure minimum height */
    max-height: 500px; /* Cap maximum height */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .facetime-window {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    border-width: 1px;
    max-width: 450px;
    margin: 0 auto;
  }

  #live2d-canvas {
    transform: none;
  }

  .volume-control {
    bottom: 10px;
    right: 10px;
    padding: 4px 2px 2px; /* Reduced bottom padding */
    height: 100px;
    width: 26px; /* Narrower width for mobile */
  }

  input[type='range']#volume-slider {
    width: 70px;
    top: 25px;
    margin-bottom: 5px;
  }

  .mute-button {
    bottom: 0;
    margin-bottom: 2px;
    width: 20px;
    height: 20px;
  }

  .mute-button.muted::after {
    width: 18px;
    top: 9px;
    left: 1px;
  }
}

/* Landscape mode adjustments to ensure model is fully visible */

@media (max-width: 1024px) and (orientation: landscape) {
  .live2d-container {
    height: 100%;
    overflow: hidden;
  }

  .live2d-showcase {
    height: 80vh;
    min-height: 300px;
  }

  .facetime-window {
    width: 85%;
    height: 85%;
    border-radius: 12px;
    border-width: 1px;
  }

  #live2d-canvas {
    transform: none;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .live2d-container {
    height: 100%;
    overflow: hidden;
  }

  .live2d-showcase {
    height: 85vh;
    min-height: 280px;
    padding: 0.5rem;
  }

  .facetime-window {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    border-width: 1px;
  }

  #live2d-canvas {
    transform: none;
  }
}

/**
 * Message History Component Styles
 * Styles for the message history browser panel
 */

/* Message History Panel Specific Styles */

.message-history-panel .browser-panel-content {
  padding: 0;
}

/* Messages List */

.messages-list,
.sidebar-panel .messages-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem;
  height: 100%;
  overflow-y: auto;
  /* Hide scrollbar entirely but keep scrollability */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

/* WebKit-based browsers */

.messages-list::-webkit-scrollbar,
.sidebar-panel .messages-list::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

.messages-list::-webkit-scrollbar-track,
.sidebar-panel .messages-list::-webkit-scrollbar-track { background: transparent !important; }

.messages-list::-webkit-scrollbar-thumb,
.sidebar-panel .messages-list::-webkit-scrollbar-thumb { background: transparent !important; }

.messages-list::-webkit-scrollbar-corner,
.sidebar-panel .messages-list::-webkit-scrollbar-corner { background: transparent !important; }

/* Message Group */

.message-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Date Separator */

/* Minimal day label (replace old bubble) */

.day-label {
  display: block;
  text-align: center;
  margin: 0.5rem 0 0.25rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  font-weight: 600;
}

/* History Message */

.history-message {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.history-message:hover {
  background: #f8fafc;
}

.history-message.user {
  flex-direction: row-reverse;
  background: rgba(148, 163, 184, 0.22); /* Brighter for readability */
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.history-message.user:hover {
  background: rgba(148, 163, 184, 0.26);
  border-color: rgba(148, 163, 184, 0.4);
}

.history-message.assistant {
  background: rgba(255, 107, 157, 0.12); /* Pastel pink translucency */
  border: 1px solid rgba(255, 107, 157, 0.2);
}

.history-message.assistant:hover {
  background: rgba(255, 107, 157, 0.18);
  border-color: rgba(255, 107, 157, 0.28);
}

/* Improve text visibility within message cards */

.history-message.user .message-text,
.history-message.assistant .message-text,
.history-message.system .message-text { color: var(--theme-text-primary); }

/* Sender label clearer on dark */

.message-sender { color: rgba(255,255,255,0.78); }

/* System notification styling (tool completions, etc.) */

.history-message.system {
  background: var(--theme-primary-dark);
  border: 1px solid var(--theme-primary-darker);
}

.history-message.system:hover { filter: brightness(0.98); }

/* System failure variant */

.history-message.system.failed {
  background: linear-gradient(0deg, rgba(239,68,68,0.16), rgba(239,68,68,0.16)), var(--theme-primary-dark);
  border: 1px solid rgba(239,68,68,0.35);
}

.history-message.system.failed:hover { filter: brightness(0.97); }

/* Message Avatar */

.message-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.history-message.user .message-avatar {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  color: white;
}

.history-message.assistant .message-avatar {
  background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
  color: white;
}

/* Message Content */

.message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem; /* tighter to avoid odd spacing between name/time and text */
  min-width: 0;
}

.history-message.user .message-content {
  align-items: flex-end;
  text-align: right;
}

.message-sender {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.message-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #374151;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Name/time spacing */

.message-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem; /* increase gap between name and time */
}

.message-text .message-attachments {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.message-text .attachment-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
  background: #f8fafc;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  width: fit-content;
}

.message-time {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

.message-date { color: rgba(255,255,255,0.55); margin-left: 4px; display: none; }

.message-time:hover .message-date { display: inline; }

/* Message History Toggle Button */

.message-history-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #1e293b;
  background: rgba(30, 41, 59, 0.08);
  font-weight: 500;
}

.message-history-toggle:hover {
  background: rgba(30, 41, 59, 0.15);
  color: #0f172a;
  transform: scale(1.05);
}

.message-history-toggle.active {
  background: var(--color-accent-500);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 31, 122, 0.3);
}

/* Responsive Design */

@media (max-width: 768px) {
  .messages-list { padding: 0.25rem; gap: 0.375rem; }

  .history-message {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .message-avatar {
    width: 1.75rem;
    height: 1.75rem;
  }

  .message-text {
    font-size: 0.85rem;
  }

  .message-sender {
    font-size: 0.7rem;
  }

  .message-time {
    font-size: 0.65rem;
  }

  .date-separator {
    margin: 0.75rem 0 0.375rem;
  }

  .date-separator span {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .messages-list { padding: 0.25rem; gap: 0.25rem; }

  .history-message {
    padding: 0.375rem;
    gap: 0.375rem;
  }

  .message-avatar {
    width: 1.5rem;
    height: 1.5rem;
  }

  .message-text {
    font-size: 0.8rem;
  }

  .message-sender {
    font-size: 0.65rem;
  }

  .message-time {
    font-size: 0.6rem;
  }

  .date-separator {
    margin: 0.5rem 0 0.25rem;
  }

  .date-separator span {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
  }
}

/* Custom scrollbar legacy overrides retained only for .message-history-content (not used by messages list) */

.message-history-content::-webkit-scrollbar { width: 4px; }

.message-history-content::-webkit-scrollbar-track { background: rgba(255, 182, 193, 0.05); border-radius: 2px; }

.message-history-content::-webkit-scrollbar-thumb { background: rgba(255, 182, 193, 0.15); border-radius: 2px; transition: background 0.2s ease; }

.message-history-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 182, 193, 0.25); }

.message-history-content { scrollbar-width: thin; scrollbar-color: rgba(255, 182, 193, 0.15) rgba(255, 182, 193, 0.05); }

/**
 * Message Overlay Styles
 * Styles for canvas message overlays and speech bubbles
 */

/* Message Overlay Styles */

.message-overlay {
  pointer-events: none;
  z-index: var(--z-message-overlay);
  max-width: 350px;
}

.message-overlay-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.message-bubble {
  max-width: 320px;
  padding: 1rem 1.25rem;
  border-radius: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 500;
  position: relative;
  opacity: 0;
  transform: translateX(20px);
  animation: slideInMessage 0.4s ease forwards;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.message-bubble.user {
  background: rgba(229, 231, 235, 0.95);
  color: #374151;
  align-self: flex-end;
  margin-left: 2rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(209, 213, 219, 0.5);
}

.message-bubble.assistant {
  background: var(--color-accent-200);
  color: var(--color-text-primary);
  align-self: flex-start;
  margin-right: 2rem;
  border-radius: 1.5rem;
}

.message-bubble.active {
  opacity: 1;
  transform: translateX(0);
}

.message-bubble.inactive {
  opacity: 0.7;
  transform: translateX(10px);
}

.message-content {
  margin-bottom: 0.5rem;
  word-wrap: break-word;
}

.message-image-wrapper {
  margin-top: 0.5rem;
}

.message-image {
  max-width: 100%;
  border-radius: 0.75rem;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.message-attachments {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.attachment-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.message-timestamp {
  font-size: 0.7rem;
  opacity: 0.8;
  font-weight: 400;
  text-align: right;
}

.message-bubble.user .message-timestamp {
  text-align: right;
}

.message-bubble.assistant .message-timestamp {
  text-align: left;
}

/* Animation for message appearance */

@keyframes slideInMessage {
  0% {
    opacity: 0;
    transform: translateX(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Message View Toggle Button */

.message-view-toggle {
  position: fixed;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1500;
}

.message-view-toggle:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

.message-view-toggle.overlay {
  background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
  color: white;
}

.message-view-toggle.container {
  background: var(--color-accent-500);
  color: white;
}

/* Audio Notification Styles */

.audio-notification {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  background: var(--color-accent-500);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(255, 31, 122, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 10000;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.audio-notification.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.audio-notification-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.audio-notification-content {
  flex: 1;
}

.audio-notification-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.audio-notification-message {
  font-size: 0.75rem;
  opacity: 0.9;
  line-height: 1.3;
}

.audio-notification-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.audio-notification-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.audio-notification-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
  opacity: 0.7;
}

.audio-notification-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* Responsive Design - Mobile-first approach for better space utilization */

@media (max-width: 768px) {
  .message-overlay {
    max-width: 240px; /* Reduced to match scrollable container */
  }

  .message-overlay-container {
    gap: 0.4rem; /* Reduced gap */
    padding: 0.5rem; /* Reduced padding */
    /* Keep flex column with normal alignment */
  }

  .message-bubble {
    max-width: 220px;
    padding: 0.75rem 0.9rem; /* Reduced padding */
    font-size: 0.8rem;
    /* Keep default alignment */
    margin-left: 0;
    margin-right: 0;
  }

  .message-bubble.user {
    background: rgba(229, 231, 235, 0.95);
    border-radius: 1rem; /* Fully rounded, no tail for user messages */
    margin-left: 0; /* Remove left margin */
  }

  .message-bubble.assistant {
    background: rgba(255, 182, 193, 0.9); /* Match scrollable container */
    border-radius: 1rem 1rem 0.25rem 1rem; /* Tail points right at bottom-right */
    margin-right: 0; /* Remove right margin */
    align-self: flex-start; /* Assistant messages on left */
  }

  /* All timestamps align right */
  .message-timestamp {
    text-align: right;
  }

  .message-bubble.user .message-timestamp,
  .message-bubble.assistant .message-timestamp {
    text-align: right;
  }

  .message-view-toggle {
    right: 1.5rem;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .message-overlay {
    max-width: 200px; /* Further reduced */
  }

  .message-bubble {
    max-width: 180px;
    padding: 0.6rem 0.8rem;
    font-size: 0.75rem;
  }

  .message-overlay-container {
    gap: 0.3rem;
    padding: 0.4rem;
  }

  .message-view-toggle {
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }
}

/* Dark mode support */

@media (prefers-color-scheme: dark) {
  .message-view-toggle {
    background: rgba(30, 30, 30, 0.9);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .message-view-toggle:hover {
    background: rgba(40, 40, 40, 0.95);
  }
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .message-bubble {
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .message-view-toggle {
    border-width: 2px;
  }

  .audio-notification {
    border-width: 2px;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .message-bubble {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .message-view-toggle,
  .audio-notification-button,
  .audio-notification-close {
    transition: none;
  }

  .audio-notification {
    transition: opacity 0.2s ease;
  }
}

/* 
 * Modal Component Styles 
 */

.modal-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-container.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  background-color: white;
  border-radius: var(--card-radius);
  border: 2px solid var(--border-dark);
  padding: 1.5rem;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1001;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-container.active .modal-content {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
}

.modal-close {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-color);
  padding: 0;
  box-shadow: none;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: none;
  box-shadow: none;
}

.modal-body {
  margin-bottom: 1rem;
}

/* Mobile nav button */

.mobile-nav-button {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--border-dark);
  padding: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mobile-nav-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Show on tablet and mobile screens */

@media (max-width: 1024px) {
  .mobile-nav-button {
    display: flex;
  }

  .nav-container {
    display: none;
  }

  /* Style for navigation in modal */
  .modal-body .nav-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .modal-body .nav-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }

  .modal-body .nav-link {
    display: block;
    text-align: center;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
    width: 100%;
  }

  .modal-body .nav-link:hover {
    background-color: rgba(255, 255, 255, 1);
    border-color: var(--border-dark);
    transform: translateY(-2px);
  }

  .modal-body .nav-link.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
  }

  .modal-body .nav-buttons {
    width: 100%;
    margin-top: 0.5rem;
  }

  .modal-body .launch-button {
    width: 100%;
  }
}

/* 
 * Panel Component
 * Used for home, profile, and tokenomics sections 
 */

.panel {
  padding: var(--card-padding);
  background-color: white;
  border-radius: var(--card-radius);
  border: 2px solid var(--border-dark);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
  /* Fixed height to match live2d container in desktop view */
  height: calc(90vh - 12rem);
  display: flex;
  flex-direction: column;
}

.panel-header {
  margin-bottom: 1.5rem;
}

.panel-header h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.panel-header p {
  color: var(--text-color);
  opacity: 0.9;
}

.panel-tabs {
  display: flex;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
}

.panel-tab {
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  position: relative;
  color: var(--text-color);
  font-weight: 500;
  transition: all 0.3s ease;
}

.panel-tab:hover {
  color: var(--primary-color);
}

.panel-tab.active {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

.panel-content {
  display: none;
  padding: 0.5rem 0;
  opacity: 1;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  /* Add scrolling for overflow content */
  overflow-y: auto;
  flex: 1;

  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari, Edge) */

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

.panel-content::-webkit-scrollbar-track {
  background: transparent;
}

.panel-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.panel-content.active {
  display: block;
}

/* Panel content animations */

.panel-content-enter {
  animation: panelContentEnter 0.3s ease forwards;
}

.panel-content-exit {
  animation: panelContentExit 0.2s ease forwards;
}

@keyframes panelContentEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes panelContentExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Additional styling for specific panel contents */

.panel-feature-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 0.5rem 0 1.5rem 0;
}

.panel-feature-card {
  position: relative;
  padding: 1.2rem;
  border-radius: calc(var(--card-radius) - 5px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border-medium);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.panel-feature-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.panel-feature-card p {
  margin: 0;
}

.panel-feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-dark);
}

.panel-section-description {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-color);
  opacity: 0.9;
  font-style: italic;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-light);
}

/* For mobile devices */

@media (max-width: 768px) {
  .panel {
    /* Remove fixed height on mobile */
    height: auto;
  }

  .panel-tabs {
    flex-wrap: wrap;
  }

  .panel-tab {
    flex: 1 0 calc(50% - 1px);
    text-align: center;
    padding: 0.8rem 0.5rem;
  }

  .panel-feature-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .panel {
    /* Make sure panel doesn't have fixed height on small screens */
    height: auto;
  }

  .panel-tabs {
    flex-direction: column;
    border-bottom: none;
  }

  .panel-tab {
    padding: 0.6rem 1rem;
    border-left: 2px solid transparent;
    text-align: left;
  }

  .panel-tab.active {
    border-bottom: none;
    border-left: 2px solid var(--primary-color);
    background-color: rgba(255, 155, 190, 0.1);
  }
}

/* Age verification notice */

.age-verification {
  background-color: rgba(255, 0, 0, 0.05);
  border: 1px solid rgba(255, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.age-verification p {
  margin: 0;
  color: #c02942;
  font-size: 0.95rem;
}

/**
 * Rally Logo Loading Animation Styles
 * Sleek monochrome to color fill animation
 */

.rally-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.rally-logo-container {
  position: relative;
  animation: logoFloat 3s ease-in-out infinite;
}

.rally-logo-svg {
  color: #6b7280; /* Start as monochrome gray */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

/* Logo elements */

.logo-letter-r {
  animation: fillAnimation 2s ease-in-out infinite;
  animation-delay: 0s;
}

.logo-underline-1 {
  animation: fillAnimation 2s ease-in-out infinite;
  animation-delay: 0.3s;
}

.logo-underline-2 {
  color: #ec4899; /* Pink accent */
  animation: fillAnimationPink 2s ease-in-out infinite;
  animation-delay: 0.6s;
}

/* Fill animations */

@keyframes fillAnimation {
  0%,
  30% {
    color: #6b7280; /* Gray */
    opacity: 0.6;
  }
  50%,
  80% {
    color: #ffffff; /* White */
    opacity: 1;
  }
  100% {
    color: #6b7280;
    opacity: 0.6;
  }
}

@keyframes fillAnimationPink {
  0%,
  30% {
    color: #6b7280; /* Gray */
    opacity: 0.6;
  }
  50%,
  80% {
    color: #ec4899; /* Pink */
    opacity: 1;
  }
  100% {
    color: #6b7280;
    opacity: 0.6;
  }
}

/* Floating animation */

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.05);
  }
}

/* Pulse variant for smaller loaders */

.rally-loader.pulse .rally-logo-container {
  animation: logoPulse 1.5s ease-in-out infinite;
}

@keyframes logoPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Loading states */

.rally-loader.loading {
  min-height: 200px;
}

.rally-loader.inline {
  padding: 1rem;
  min-height: auto;
}

.rally-loader.small {
  padding: 0.5rem;
}

/* Theme variants */

.rally-loader.dark .rally-logo-svg {
  color: #374151;
}

.rally-loader.dark .logo-letter-r {
  animation: fillAnimationDark 2s ease-in-out infinite;
  animation-delay: 0s;
}

.rally-loader.dark .logo-underline-1 {
  animation: fillAnimationDark 2s ease-in-out infinite;
  animation-delay: 0.3s;
}

@keyframes fillAnimationDark {
  0%,
  30% {
    color: #374151; /* Dark gray */
    opacity: 0.6;
  }
  50%,
  80% {
    color: #f9fafb; /* Light gray */
    opacity: 1;
  }
  100% {
    color: #374151;
    opacity: 0.6;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .rally-loader .rally-logo-container,
  .logo-letter-r,
  .logo-underline-1,
  .logo-underline-2 {
    animation: none;
  }

  .rally-loader .rally-logo-svg {
    color: #ffffff;
  }

  .rally-loader .logo-underline-2 {
    color: #ec4899;
  }
}

.romance-date-hud {
  position: fixed;
  top: 80px;
  left: 32px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.romance-date-card {
  min-width: 240px;
  max-width: 320px;
  position: relative;
  isolation: isolate;
  backdrop-filter: var(--glass-blur-strong) saturate(125%);
  -webkit-backdrop-filter: var(--glass-blur-strong) saturate(125%);
  background: var(--glass-bg-ultra);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border-strong);
  border-radius: 16px;
  padding: 16px;
  color: #fdf2f8;
  box-shadow: 0 2px 8px var(--glass-shadow);
  pointer-events: auto;
}

.romance-date-card:hover {
  box-shadow: 0 2px 6px var(--glass-shadow);
}

/* sheen hover removed */

.romance-date-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 var(--glass-border-inner);
}

/* Refraction overlay removed */

.romance-date-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.romance-date-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(244, 114, 182, 0.85);
}

.romance-date-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #f9a8d4;
}

.romance-date-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
}

.romance-date-delta.delta-negative {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}

.romance-date-description {
  font-size: 0.85rem;
  line-height: 1.35rem;
  color: rgba(249, 250, 251, 0.85);
  margin: 0 0 14px;
}

.romance-date-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.romance-date-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: rgba(240, 171, 252, 0.95);
}

.romance-date-button {
  background: rgba(236, 72, 153, 0.9);
  border: none;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.romance-date-button:hover {
  transform: translateY(-1px);
  background: rgba(236, 72, 153, 0.95);
}

@media (max-width: 768px) {
  .romance-date-hud {
    top: 66px;
    left: 16px;
  }

  .romance-date-card {
    max-width: calc(100vw - 48px);
  }
}

/* Refraction removed (no url(#frosted)) */

@supports (backdrop-filter: url(#frosted)) {
  .romance-date-card {
    backdrop-filter: url(#frosted);
    -webkit-backdrop-filter: url(#frosted);
  }
}

/**
 * Scrollable Message Container Styles
 * Styles for the scrollable message container that appears on canvas when auto-hide is disabled
 */

.scrollable-message-container {
  position: fixed; /* Changed from absolute to fixed */
  top: 20%; /* Position from top */
  left: 80px; /* Position closer to center - messages appear left of Live2D */
  width: 380px;
  max-width: calc(100vw - 100px);
  background: transparent;
  z-index: var(--z-message-overlay);
  overflow: visible;
  animation: slideInFromLeft 0.3s ease forwards;
  pointer-events: auto;
  contain: layout style; /* Prevent layout recalculation affecting other elements */
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.scrollable-messages-content {
  max-height: 40vh;
  overflow-y: auto;
  padding: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 182, 193, 0.15) transparent;
  pointer-events: auto;
}

.scrollable-messages-content::-webkit-scrollbar {
  width: 2px;
}

.scrollable-messages-content::-webkit-scrollbar-track {
  background: transparent;
}

.scrollable-messages-content::-webkit-scrollbar-thumb {
  background: rgba(255, 182, 193, 0.15);
  border-radius: 2px;
}

.scrollable-messages-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 182, 193, 0.25);
}

.scrollable-message-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.scrollable-date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
  position: relative;
}

.scrollable-date-separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 182, 193, 0.3), transparent);
}

.scrollable-date-separator span {
  background: rgba(255, 255, 255, 0.8);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #8b5a8c;
  border: 1px solid rgba(255, 182, 193, 0.2);
}

.scrollable-message {
  display: flex;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
}

.scrollable-message.user {
  justify-content: flex-end;
}

.scrollable-message.assistant {
  justify-content: flex-start;
}

.scrollable-message-content {
  max-width: 70%;
  padding: 0.75rem 1rem;
  border-radius: 1.25rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
}

.scrollable-message.user .scrollable-message-content {
  background: rgba(229, 231, 235, 0.95);
  color: #374151;
  border-radius: 1.25rem; /* Fully rounded, no tail for user messages */
  border: 1px solid rgba(209, 213, 219, 0.5);
}

.scrollable-message.assistant .scrollable-message-content {
  background: var(--color-accent-200);
  color: var(--color-text-primary);
  border-radius: 1.25rem 1.25rem 0.25rem 1.25rem; /* Tail points right at bottom-right */
}

.scrollable-message-content:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.scrollable-message-text {
  font-size: 0.9rem;
  line-height: 1.4;
  word-wrap: break-word;
  margin-bottom: 0.25rem;
}

.scrollable-message-image-wrapper {
  margin-top: 0.4rem;
}

.scrollable-message-image {
  max-width: 100%;
  border-radius: 0.5rem;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.scrollable-message-time {
  font-size: 0.7rem;
  opacity: 0.7;
  font-weight: 400;
}

/* Mobile-first responsive design for better space utilization */

@media (max-width: 768px) {
  .scrollable-message-container {
    width: calc(100vw - 30px); /* Use most of screen width */
    max-width: 360px; /* But cap at reasonable width */
    top: 15%; /* Slightly higher on mobile */
    left: 15px; /* Position from left edge */
    right: auto; /* Clear right positioning */
  }

  .scrollable-messages-content {
    max-height: 35vh; /* Increased height since we have more vertical space */
    padding: 0.3rem;
  }

  /* Keep proper message alignment */
  .scrollable-message {
    margin-bottom: 0.5rem; /* Reduced spacing */
  }

  .scrollable-message.assistant {
    justify-content: flex-start; /* Assistant messages on left */
  }

  .scrollable-message-content {
    max-width: 95%; /* Increased to use more of the available width */
    padding: 0.6rem 0.8rem; /* Reduced padding */
  }

  /* Adjust message bubble styling for mobile */
  .scrollable-message.user .scrollable-message-content {
    border-radius: 1rem; /* Fully rounded for user messages */
  }

  .scrollable-message.assistant .scrollable-message-content {
    border-radius: 1rem 1rem 0.25rem 1rem; /* Tail points right at bottom-right */
    background: rgba(255, 182, 193, 0.9); /* Slightly different color to distinguish */
  }

  .scrollable-message-text {
    font-size: 0.75rem;
    line-height: 1.3; /* Tighter line height */
  }

  .scrollable-message-time {
    font-size: 0.6rem;
    text-align: right; /* Always align time to right */
  }
}

@media (max-width: 480px) {
  .scrollable-message-container {
    width: 200px; /* Further reduced for very small screens */
    max-width: 70vw;
    top: 15%; /* Match desktop positioning */
    left: 0.5rem; /* Position from left edge */
    right: auto; /* Clear right positioning */
  }

  .scrollable-messages-content {
    max-height: 35vh; /* Consistent with tablet */
    padding: 0.25rem;
  }

  .scrollable-message {
    margin-bottom: 0.4rem;
  }

  .scrollable-message-content {
    max-width: 98%;
    padding: 0.5rem 0.7rem;
  }

  .scrollable-message-text {
    font-size: 0.7rem;
    line-height: 1.25;
  }

  .scrollable-message-time {
    font-size: 0.55rem;
  }
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .scrollable-message-container {
    border-width: 2px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .scrollable-message {
    border-width: 2px;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .scrollable-message-container {
    animation: none;
  }

  .scrollable-message {
    transition: none;
  }
}

/**
 * Sidebar Panel Styles
 * Right-side sliding panel with tab navigation
 */

/* Backdrop overlay - only on mobile for better UX */

@media (max-width: 768px) {
  .sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9998; /* Just below sidebar */
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
  }

  .sidebar-backdrop.animating {
    animation: fadeOut 0.3s ease forwards;
  }
}

/* Hide backdrop on desktop */

@media (min-width: 769px) {
  .sidebar-backdrop {
    display: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Main sidebar panel - full viewport height overlay */

.sidebar-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh; /* Use viewport height instead of bottom: 0 */
  width: 480px;
  max-width: 90vw;
  /* Keep panel container, header paints its own pink; content area below will be dark */
  background: var(--theme-sidebar-bg);
  /* Removed left divider border to avoid distracting edge */
  /* border-left: 1px solid var(--theme-border-strong); */
  z-index: 9999; /* Ensure sidebar is above all other content */
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.3s ease,
    visibility 0.3s;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}

/* Remove the left-edge handle to avoid any visual divider */

.sidebar-panel::before { content: none; display: none; }

/* Calendar panel styles */

.calendar-card {
  padding: 0.75rem 1rem 1rem 1rem;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.calendar-header .cal-nav {
  background: var(--theme-button-bg);
  color: var(--theme-text-secondary);
  border: 1px solid var(--theme-border-medium);
  border-radius: 8px;
  padding: 2px 8px;
}

.calendar-header .cal-title {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  color: var(--theme-text-primary);
}

.calendar-header .cal-streak {
  font-size: 0.9rem;
  color: var(--theme-accent-soft);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dow {
  text-align: center;
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
  padding: 4px 0;
}

.cal-day {
  position: relative;
  min-height: 48px;
  border-radius: 10px;
  background: var(--theme-card-bg);
  border: 1px solid var(--theme-border-light);
  padding: 6px;
}

.cal-day.muted {
  opacity: 0.5;
}

.cal-day.active {
  outline: 1px solid var(--color-accent-400);
}

.cal-day.today {
  box-shadow: 0 0 0 1px var(--color-accent-500) inset;
}

.cal-day-number {
  font-size: 0.85rem;
  color: var(--theme-text-primary);
}

.cal-day-markers {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: flex;
  gap: 4px;
}

.marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.3;
}

.marker.compact { opacity: 0.8; }

.marker.msg { background: var(--color-info-400); }

.marker.aff { background: var(--color-success-500); }

.marker.date { background: var(--color-accent-500); }

.cal-tooltip {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  background: var(--theme-tooltip-bg);
  color: var(--theme-text-primary);
  border: 1px solid var(--theme-border-medium);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: var(--elevation-2);
  z-index: 2;
  white-space: nowrap;
}

.cal-tooltip .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.calendar-legend {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--theme-text-secondary);
}

.calendar-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }

.sidebar-panel::before:hover {
  background: var(--theme-bg-overlay-solid);
}

.sidebar-panel.open {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
}

.sidebar-panel.closed {
  transform: translateX(100%);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

/* Remove focus outline that looks like a left divider when active */

.sidebar-panel:focus,
.sidebar-panel:focus-visible {
  outline: none;
}

/* Sidebar header with tabs */

.sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 0rem; /* no gap between header rows */
  padding: 0; /* always zero padding */
  border-bottom: none; /* remove divider per spec */
  background: transparent; /* only top row uses pink */
  flex-shrink: 0;
}

/* Top row inside header: wallet/login at left, close at right */

.sidebar-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* Header bar uses dark to match redesigned sidebar */
  background: #0c0f13;
  height: 64px; /* requested height */
  min-height: 64px;
  padding: 8px 8px; /* updated padding */
}

.sidebar-header-top .sidebar-wallet-info {
  flex: 1;
}

/* Wallet info in sidebar header - cleaner, more integrated */

.sidebar-wallet-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  /* Keep pink for wallet/user region within dark header */
  background: var(--color-pink-secondary, #f4b3ef);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.35);
  height: 100%; /* vertically align within 50px header */
}

.sidebar-wallet-info .wallet-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-text-primary);
}

.sidebar-wallet-info .wallet-details {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
  margin: 0;
  background: transparent;
}

.sidebar-wallet-info .wallet-address {
  font-size: 0.813rem;
  font-weight: 500;
  color: var(--theme-text-primary);
  font-family: monospace;
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wallet hero card */

.wallet-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(244,179,239,0.25), rgba(244,179,239,0.25)), var(--theme-primary-light);
  border: 1px solid rgba(255,255,255,0.32);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  color: var(--theme-text-primary);
  margin-bottom: 10px;
}

.wallet-hero-left, .wallet-hero-right { display: flex; align-items: center; gap: 8px; }

.wallet-hero-right .tier-name { opacity: 0.9; }

/* Minimal inline copy button next to address */

.sidebar-wallet-info .wallet-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0 0 0 2px;
  margin-left: auto; /* push to far right */
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--theme-text-secondary);
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.sidebar-wallet-info .wallet-copy-btn:hover {
  opacity: 0.8;
  color: var(--theme-text-primary);
}

.sidebar-wallet-info .wallet-copy-btn:active {
  opacity: 0.65;
}

.sidebar-wallet-info .wallet-copy-btn:focus-visible {
  outline: 2px solid var(--theme-accent-500);
  outline-offset: 2px;
}

.sidebar-wallet-info .wallet-logout-btn {
  padding: 0.375rem;
  border-radius: 0.25rem;
  border: 1px solid var(--theme-primary-darker);
  background: rgba(255,255,255,0.4);
  color: var(--theme-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-wallet-info .wallet-logout-btn:hover {
  background: rgba(255,255,255,0.55);
  transform: scale(1.05);
}

/* Login button inside wallet strip (when not connected) */

.sidebar-wallet-info .wallet-login-btn {
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--theme-primary-darker);
  background: rgba(255,255,255,0.4);
  color: var(--theme-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-wallet-info .wallet-login-btn:hover {
  background: rgba(255,255,255,0.55);
}

/* Tab navigation */

/* Tabs row with persistent left/right scroll buttons */

.sidebar-tabs-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.25rem;
  background: #0c0f13; /* match dark content area */
  padding: 6px 8px;
}

.tabs-scroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none; /* remove border */
  background: transparent; /* blend with header */
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tabs-scroll-btn:focus,
.tabs-scroll-btn:focus-visible { outline: none; box-shadow: none; }

.tabs-scroll-btn:hover { background: rgba(255,255,255,0.12); color: #ffffff; }

.tabs-scroll-btn.disabled { opacity: 0.4; pointer-events: none; }

.tabs-scroll-btn.left { order: 1; }

.tabs-scroll-btn.right { order: 3; }

.sidebar-tabs-scroll {
  order: 2;
  overflow: hidden; /* hide native scrollbar entirely */
}

.sidebar-tabs {
  display: flex;
  gap: 0.25rem;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* hide Firefox scrollbar */
}

.sidebar-tabs::-webkit-scrollbar { display: none; }

/* no webkit scrollbar styles (intentionally hidden) */

.sidebar-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: rgba(255,255,255,0.86);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 0 0 auto;
  justify-content: center;
  white-space: nowrap;
}

.sidebar-tab:hover { background: rgba(255,255,255,0.06); color: #ffffff; }

.sidebar-tab.active { background: rgba(255,255,255,0.08); border-color: transparent; color: #ffffff; font-weight: 600; }

/* Remove strong focus outline for sidebar tabs */

.sidebar-tab:focus,
.sidebar-tab:focus-visible {
  outline: none;
}

.sidebar-tab svg {
  color: currentColor;
  flex-shrink: 0;
}

.sidebar-tab span {
  display: none;
}

@media (min-width: 480px) {
  .sidebar-tab span {
    display: inline;
  }
}

/* Close button */

.sidebar-close-btn {
  height: 2rem;
  border-radius: 10px;
  border: 1px solid var(--theme-border-light);
  background: var(--theme-bg-overlay-light);
  color: var(--theme-text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-all);
  flex-shrink: 0;
  margin-left: 0.5rem;
  padding: 4px 10px;
}

.sidebar-close-btn:hover {
  background: var(--theme-bg-overlay-medium);
  transform: scale(1.05);
}

.sidebar-close-btn:active {
  transform: scale(0.95);
}

/* Sidebar content area */

.sidebar-content {
  flex: 1;
  /* Let inner panes manage their own scroll; avoid sidebar-level scroll-y */
  overflow: hidden;
  padding: 0;
  /* Redesign: dark content area for accessibility against game UIs */
  background: #0c0f13; /* near-black */
  /* Local variable overrides so existing components switch to light-on-dark */
  --theme-text-primary: #ffffff;
  --theme-text-secondary: rgba(255, 255, 255, 0.72);
  --theme-border-light: rgba(255, 255, 255, 0.12);
  --theme-border-medium: rgba(255, 255, 255, 0.18);
  --theme-card-bg: rgba(255, 255, 255, 0.06);
  --theme-input-bg: rgba(255, 255, 255, 0.08);
  --theme-input-border: rgba(255, 255, 255, 0.18);
  --theme-bg-overlay-light: rgba(255, 255, 255, 0.06);
  --theme-bg-overlay-medium: rgba(255, 255, 255, 0.1);
}

.sidebar-content-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem 2rem 1.5rem; /* remove top padding; keep bottom */
}

.sidebar-content-card {
  background: var(--theme-card-bg);
  border: 1px solid var(--theme-border-light);
  border-radius: 16px;
  padding: 16px;
  color: var(--theme-text-primary);
}

/* Threads card: tighter vertical padding to avoid clipping bottom row */

.threads-card { padding: 8px 12px; box-sizing: border-box; }

/* Improve legibility of thread row buttons on hover */

.threads-card .btn-ghost.btn-sm { color: var(--theme-text-secondary); }

.threads-card .btn-ghost.btn-sm:hover { color: var(--theme-text-primary); background: rgba(255,255,255,0.06); text-shadow: 0 1px 1px rgba(0,0,0,0.25); }

/* Keep default focus/outline styles for action buttons */

/* Games grid */

.game-tiles {
  display: grid;
  grid-template-columns: 1fr; /* one game per row */
  gap: 12px;
}

/* single-column layout at all sizes (mobile rule no longer needed) */

.game-tile {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg-ultra);
  backdrop-filter: var(--glass-blur-strong) saturate(125%);
  -webkit-backdrop-filter: var(--glass-blur-strong) saturate(125%);
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.game-cover {
  width: 100px;
  height: 64px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px var(--glass-shadow);
}

.game-info { display: flex; flex-direction: column; gap: 2px; }

.game-name { font-weight: 700; color: var(--theme-text-primary); }

.game-tagline { font-size: 0.8rem; color: var(--theme-text-secondary); }

.game-actions { display: inline-flex; align-items: center; gap: 6px; }

.btn-sm { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--glass-border-strong); }

/* Games Start buttons use header pink */

.games-card .game-actions .btn-primary.btn-sm {
  background: var(--color-pink-secondary, #f4b3ef);
  color: #1f2937;
  border-color: rgba(255,255,255,0.4);
}

.games-card .game-actions .btn-primary.btn-sm:hover,
.games-card .game-actions .btn-primary.btn-sm:active,
.games-card .game-actions .btn-primary.btn-sm:focus {
  background: var(--color-pink-secondary, #f4b3ef);
  filter: brightness(0.97);
  color: #1f2937;
}

/* Plain icon/utility buttons inside sidebar (e.g., refresh) */

.sidebar-content .btn-plain { border: none !important; outline: none !important; box-shadow: none !important; }

.threads-card .btn-plain { transition: color 0.15s ease, transform 0.4s ease; }

.threads-card .btn-plain:hover { color: var(--color-pink-secondary, #f4b3ef); background: transparent; }

/* Only refresh button spins on press */

.threads-card .btn-refresh:active { animation: spin360 0.4s linear 1; transform-origin: 50% 50%; }

@keyframes spin360 { to { transform: rotate(360deg); } }

/* Default primary small buttons inside sidebar content should use secondary pink */

.sidebar-content-card .btn-primary.btn-sm {
  background: var(--color-pink-secondary, #f4b3ef);
  color: #1f2937;
  border-color: transparent; /* remove white border */
  box-shadow: none;
}

.sidebar-content-card .btn-primary.btn-sm:hover,
.sidebar-content-card .btn-primary.btn-sm:active,
.sidebar-content-card .btn-primary.btn-sm:focus {
  background: var(--color-pink-secondary, #f4b3ef);
  filter: brightness(0.97);
  color: #1f2937;
  border-color: transparent;
  box-shadow: none;
}

.btn-ghost.btn-sm { background: transparent; color: var(--theme-text-secondary); }

/* Subtle danger hover for delete in threads list */

.threads-card .btn-danger:hover {
  color: #fca5a5; /* soft red */
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.24);
}

/* Inline rename input should match thread title size/weight */

.threads-card .thread-rename-input {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Monospace thread titles for consistent width */

.threads-card .thread-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.game-tile.soon { opacity: 0.82; }

.game-tile .coming-soon {
  position: absolute;
  top: 8px;
  right: 8px; /* move to top-right */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 107, 157, 0.14); /* soft accent */
  color: #ff6b9d;
  border: 1px solid rgba(255, 107, 157, 0.35);
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  backdrop-filter: blur(2px) saturate(115%);
  -webkit-backdrop-filter: blur(2px) saturate(115%);
}

/* ChatInput inside sidebar — contain width and contrast */

.sidebar-content .chat-input-wrapper { max-width: 100%; margin: 0; }

.sidebar-content .input-group { width: 100%; box-sizing: border-box; }

.sidebar-content .message-input { color: var(--theme-text-primary); caret-color: var(--theme-text-primary); }

.sidebar-content .message-input::placeholder { color: var(--theme-text-secondary); }

.sidebar-content .btn-plain { color: var(--theme-text-secondary); }

/* Quick responses inside sidebar — keep within width and readable */

.sidebar-content .quick-response-panel.embedded { margin: 0 0 0.5rem 0; padding: 0; border: none; background: transparent; box-shadow: none; }

.sidebar-content .quick-response-panel.embedded {
  width: 100%;
  max-width: 100%;
}

.sidebar-content .quick-response-wrapper { width: 100%; }

.sidebar-content .quick-response-list { width: 100%; }

.sidebar-content .quick-response-item { width: 100%; font-size: 0.82rem; padding: 0.5rem; }

.sidebar-content .quick-response-wrapper { width: 100%; }

.sidebar-content .quick-response-item { background: var(--theme-card-bg); border-color: var(--theme-border-medium); color: var(--theme-text-primary); }

.sidebar-content .quick-response-item:hover { background: var(--theme-bg-overlay-medium); border-color: var(--theme-border-medium); }

.sidebar-content .response-hotkey { color: var(--theme-text-secondary); background: var(--theme-bg-overlay-medium); border-color: var(--theme-border-medium); }

/* Add spacing between Games header row and list */

.games-card > :first-child { margin-bottom: 12px; }

.date-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.status-pill {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  text-transform: capitalize;
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.status-pill.status-completed {
  background: rgba(22, 163, 74, 0.2);
  color: #bbf7d0;
}

.date-history-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 0.8rem;
}

.meta-label {
  display: block;
  color: rgba(148, 163, 184, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.meta-value {
  font-weight: 600;
}

.date-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.date-history-item {
  border: 1px solid var(--theme-border-light);
  border-radius: 12px;
  padding: 12px;
  background: var(--theme-card-bg);
}

.date-history-item .item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.date-history-item .item-description {
  margin: 0 0 8px;
  color: var(--theme-text-secondary);
  font-size: 0.85rem;
  line-height: 1.3rem;
}

.date-history-item .item-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.date-history-item .item-choice {
  background: rgba(236, 72, 153, 0.15);
  color: #f9a8d4;
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 0.75rem;
}

/* Override account-section styles to work with sidebar */

.sidebar-content-wrapper .account-section {
  max-width: none;
  margin: 0;
  width: 100%;
}

/* Affection tab: align visuals with Messages list cards */

.sidebar-content-wrapper .affection-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-content-wrapper .affection-settings h3 {
  margin-bottom: 4px;
}

.sidebar-content-wrapper .affection-settings .affection-level-section,
.sidebar-content-wrapper .affection-settings .affection-progress-section,
.sidebar-content-wrapper .affection-settings .affection-stats-grid,
.sidebar-content-wrapper .affection-settings .affection-benefits-section,
.sidebar-content-wrapper .affection-settings .affection-tips-section {
  background: var(--theme-bg-overlay-light);
  border: 1px solid var(--theme-border-light);
  border-radius: 12px;
  padding: 12px;
}

.sidebar-content-wrapper .affection-settings .affection-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Affection info panels */

.sidebar-content-wrapper .affection-settings .affection-info-section {
  background: var(--theme-bg-overlay-light);
  border: 1px solid var(--theme-border-light);
  border-radius: 12px;
  padding: 12px;
}

.sidebar-content-wrapper .affection-settings .levels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sidebar-content-wrapper .affection-settings .level-range-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--theme-border-light);
}

.sidebar-content-wrapper .affection-settings .level-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.sidebar-content-wrapper .affection-settings .level-name {
  font-weight: 600;
  color: var(--theme-text-primary);
}

.sidebar-content-wrapper .affection-settings .level-range {
  margin-left: auto;
  color: var(--theme-text-secondary);
  font-size: 0.8rem;
}

.sidebar-content-wrapper .affection-settings .history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-content-wrapper .affection-settings .history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--theme-border-light);
}

.sidebar-content-wrapper .affection-settings .history-item .delta {
  min-width: 48px;
  text-align: right;
  font-weight: 700;
}

.sidebar-content-wrapper .affection-settings .history-item .delta.pos { color: var(--color-success-500); }

.sidebar-content-wrapper .affection-settings .history-item .delta.neg { color: var(--color-danger-500); }

.sidebar-content-wrapper .affection-settings .history-item .delta.neu { color: var(--theme-text-secondary); }

.sidebar-content-wrapper .affection-settings .history-item .meta {
  display: flex;
  flex-direction: column;
}

.sidebar-content-wrapper .affection-settings .history-item .meta .action { color: var(--theme-text-primary); font-weight: 600; }

.sidebar-content-wrapper .affection-settings .history-item .meta .time { color: var(--theme-text-secondary); font-size: 0.8rem; }

.sidebar-content-wrapper .affection-settings .stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--theme-border-light);
}

.sidebar-content-wrapper .affection-settings .stat-icon {
  width: 18px;
  height: 18px;
}

.sidebar-content-wrapper .affection-settings .stat-value {
  font-weight: 700;
  color: var(--theme-text-primary);
}

.sidebar-content-wrapper .affection-settings .stat-label {
  font-size: 0.8rem;
  color: var(--theme-text-secondary);
}

.sidebar-content-wrapper .affection-settings .benefits-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-content-wrapper .affection-settings .benefits-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-text-primary);
}

.sidebar-content-wrapper .affection-settings .tips-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sidebar-content-wrapper .affection-settings .tip-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--theme-border-light);
}

/* Subscription card: cleaner, less glassy in sidebar */

.sidebar-content-wrapper .subscription-card {
  background: var(--theme-bg-overlay-light);
  border: 1px solid var(--theme-border-light);
  box-shadow: none;
  border-radius: 12px;
}

.sidebar-content-wrapper .subscription-status { padding: 8px 10px; }

.sidebar-content-wrapper .subscription-status .period { color: var(--theme-text-secondary); }

.sidebar-content-wrapper .subscription-body { padding: 8px 10px 12px; }

.sidebar-content-wrapper .subscription-body .plan { background: var(--theme-bg-overlay-light); border: 1px solid var(--theme-border-light); color: var(--theme-text-primary); }

.sidebar-content-wrapper .subscription-body .plan.selected { border-color: var(--theme-secondary, var(--color-affection-outline)); box-shadow: 0 0 0 2px rgba(255,105,180,0.15); }

.sidebar-content-wrapper .subscription-body .plan:focus-visible { outline: 2px solid var(--theme-secondary, var(--color-affection-outline)); outline-offset: 2px; }

.sidebar-content-wrapper .subscription-body .plan-title { color: var(--theme-text-primary); }

.sidebar-content-wrapper .subscription-body .plan-price { color: var(--theme-text-primary); }

.sidebar-content-wrapper .subscription-body .plan-desc { color: var(--theme-text-secondary); }

.sidebar-content-wrapper .subscription-body .subscribe-btn { background: var(--theme-secondary, var(--color-affection-outline)); color: #fff; border: 1px solid var(--glass-border-strong); }

.sidebar-content-wrapper .subscription-body .subscribe-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(255,105,180,0.3); }

.sidebar-content-wrapper .subscription-body .credits-pill { border: 1px solid var(--theme-border-light); background: var(--theme-bg-overlay-light); color: var(--theme-text-primary); }

/* System toasts in sidebar: compact */

/* Removed .system-toast usage; notices render in HUD */

/* Improve contrast for small labels */

.sidebar-content-wrapper .subscription-body span { color: var(--theme-text-primary); }

/* Hotkeys section styles */

.hotkeys-settings {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hotkeys-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hotkeys-description {
  color: var(--theme-text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

.platform-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--theme-bg-overlay-light);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: var(--theme-text-secondary);
  border: 1px solid var(--theme-border-light);
}

.hotkeys-category {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--theme-border-normal);
}

.category-header h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--theme-text-primary);
}

.hotkeys-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hotkey-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  background: var(--theme-bg-overlay-light);
  border-radius: 0.375rem;
  border: 1px solid var(--theme-border-light);
  transition: var(--transition-all);
}

.hotkey-item:hover {
  background: var(--theme-bg-overlay-medium);
  border-color: var(--theme-border-medium);
}

.hotkey-keys {
  font-family: 'Courier New', monospace;
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border-strong);
  border-radius: 0.25rem;
  color: var(--color-accent-500);
  font-weight: 600;
  white-space: nowrap;
}

.hotkey-description {
  flex: 1;
  margin-left: 1rem;
  font-size: 0.8125rem;
  color: var(--theme-text-primary);
}

.hotkeys-tips {
  background: var(--theme-bg-overlay-light);
  border: 1px solid var(--theme-border-light);
  border-radius: 0.5rem;
  padding: 1rem;
}

.tip-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.tip-header h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-text-primary);
}

.tips-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.tips-list li {
  font-size: 0.8125rem;
  color: var(--theme-text-secondary);
  line-height: 1.5;
}

/* Mobile App Section Styles */

.about-mobile-section {
  margin: 1.5rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--theme-border-normal);
  border-bottom: 1px solid var(--theme-border-normal);
}

.about-mobile-section h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--theme-text-primary);
}

.mobile-description {
  color: var(--theme-text-secondary);
  font-size: 0.875rem;
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}

.app-store-badges {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.app-badge-container {
  flex: 1;
  min-width: 140px;
}

.coming-soon-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--theme-bg-overlay-light);
  border: 1px solid var(--theme-border-light);
  border-radius: 0.625rem;
  transition: var(--transition-all);
  cursor: default;
}

.coming-soon-badge:hover {
  background: var(--theme-bg-overlay-medium);
  border-color: var(--theme-border-medium);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 31, 122, 0.1);
}

.platform-icon {
  font-size: 2rem;
  color: var(--color-accent-500);
}

.badge-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.badge-label {
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-store {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--theme-text-primary);
}

.waitlist-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 107, 157, 0.05);
  border-radius: 0.625rem;
  border: 1px solid rgba(255, 107, 157, 0.1);
}

.waitlist-text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--theme-text-primary);
  text-align: center;
}

.waitlist-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--theme-secondary);
  color: var(--theme-text-white);
  text-decoration: none;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: var(--transition-all);
  box-shadow: var(--theme-shadow-sm);
  border: 1px solid var(--theme-border-light);
}

.waitlist-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--theme-shadow-md);
  filter: brightness(0.98);
}

.waitlist-button svg {
  font-size: 1.125rem;
}

/* Remove all section card backgrounds */

.sidebar-content-wrapper .wallet-balance-section,
.sidebar-content-wrapper .access-tier-section,
.sidebar-content-wrapper .token-balances-section,
.sidebar-content-wrapper .payment-actions-section,
.sidebar-content-wrapper .wallet-features-section,
.sidebar-content-wrapper .wallet-connected-info {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 1rem 0;
  margin: 1rem 0;
  box-shadow: none;
}

/* Clean wallet tab styling - no card containers */

.sidebar-content-wrapper .wallet-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 105, 180, 0.2);
}

.sidebar-content-wrapper .wallet-header {
  margin-bottom: 1rem;
}

.sidebar-content-wrapper .wallet-address {
  background: transparent;
  padding: 0.5rem 0;
  border-radius: 0;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-content-wrapper .address-text {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--theme-text-primary);
}

.sidebar-content-wrapper .copy-button {
  background: transparent;
  border: none;
  padding: 0.25rem;
  color: var(--theme-text-accent);
  opacity: 0.7;
}

.sidebar-content-wrapper .copy-button:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Clean section headers */

.sidebar-content-wrapper h4 {
  font-size: var(--theme-section-title-size);
  font-weight: var(--theme-section-title-weight);
  color: var(--theme-section-title-color);
  text-transform: var(--theme-section-title-transform);
  letter-spacing: var(--theme-section-title-spacing);
  margin: var(--theme-spacing-xl) 0 var(--theme-spacing-md);
  padding-bottom: var(--theme-spacing-sm);
  border-bottom: var(--theme-section-divider);
}

/* Token balances - clean list */

.sidebar-content-wrapper .balance-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 105, 180, 0.1);
  background: transparent;
}

.sidebar-content-wrapper .balance-item:last-child {
  border-bottom: none;
}

/* Payment actions - minimal text-based buttons */

.sidebar-content-wrapper .payment-action-btn {
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  padding: 0.75rem 0 0.75rem 1rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.sidebar-content-wrapper .payment-action-btn:hover {
  background: var(--theme-bg-overlay-light);
  border-left-color: var(--theme-border-light);
  padding-left: 1.25rem;
}

.sidebar-content-wrapper .payment-action-btn.primary {
  border-left-color: var(--theme-border-medium);
  color: var(--theme-text-accent);
}

.sidebar-content-wrapper .payment-action-btn.primary:hover {
  background: var(--theme-bg-overlay-light);
}

/* Features - clean list */

.sidebar-content-wrapper .feature-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 105, 180, 0.1);
  background: transparent;
}

.sidebar-content-wrapper .feature-item:last-child {
  border-bottom: none;
}

/* Tier display - clean, no card */

.sidebar-content-wrapper .tier-display {
  background: transparent;
  padding: 0.75rem 0;
  border-radius: 0;
  margin: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 105, 180, 0.1);
}

.sidebar-content-wrapper .upgrade-tier-btn {
  background: var(--theme-primary);
  border: none;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

/* Wallet actions - clean buttons */

.sidebar-content-wrapper .disconnect-wallet-btn {
  width: 100%;
  background: var(--theme-button-danger-bg);
  border: 1px solid var(--theme-button-danger-border);
  color: var(--theme-button-danger-text);
  padding: 0.75rem;
  border-radius: var(--theme-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--theme-spacing-xl);
  cursor: pointer;
  transition: all var(--theme-transition-normal);
}

.sidebar-content-wrapper .disconnect-wallet-btn:hover {
  background: var(--theme-button-danger-hover);
  transform: translateY(-1px);
}

/* Settings styling to match pink theme */

.sidebar-content-wrapper .settings-section {
  background: transparent;
  margin-bottom: 1.5rem;
}

.sidebar-content-wrapper .settings-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 105, 180, 0.15);
}

.sidebar-content-wrapper .settings-group {
  background: transparent;
  border: none;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
}

.sidebar-content-wrapper .settings-group-title {
  color: var(--theme-text-accent);
  font-size: 0.813rem;
  margin-bottom: 0.75rem;
  opacity: 0.9;
}

.sidebar-content-wrapper .setting-item {
  background: transparent;
  border-bottom: 1px solid rgba(255, 105, 180, 0.1);
  padding: 0.75rem 0;
}

.sidebar-content-wrapper .setting-item:last-child {
  border-bottom: none;
}

.sidebar-content-wrapper .setting-label {
  color: var(--theme-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}

.sidebar-content-wrapper .setting-description {
  color: var(--theme-text-muted);
  font-size: 0.75rem;
  opacity: 0.9;
}

/* Toggle switches in sidebar */

.sidebar-content-wrapper .settings-toggle {
  background-color: var(--theme-toggle-bg);
  border: 1px solid var(--theme-toggle-border);
}

.sidebar-content-wrapper .settings-toggle-input:checked + .settings-toggle-label .settings-toggle {
  background-color: var(--theme-toggle-active-bg);
  border-color: var(--theme-primary);
}

.sidebar-content-wrapper .settings-toggle-slider {
  background-color: var(--theme-toggle-thumb);
}

/* Select dropdowns in sidebar */

.sidebar-content-wrapper .settings-select {
  background: var(--theme-input-bg);
  border: 1px solid var(--theme-input-border);
  color: var(--theme-text-primary);
  font-size: 0.875rem;
}

.sidebar-content-wrapper .settings-select:hover {
  background: var(--theme-input-hover-bg);
  border-color: var(--theme-input-hover-border);
}

.sidebar-content-wrapper .settings-select:focus {
  outline: none;
  border-color: var(--theme-input-focus-border);
  box-shadow: var(--theme-input-focus-shadow);
}

/* Number inputs in sidebar */

.sidebar-content-wrapper .settings-number {
  background: var(--theme-input-bg);
  border: 1px solid var(--theme-input-border);
  color: var(--theme-text-primary);
  font-size: 0.875rem;
}

.sidebar-content-wrapper .settings-number:focus {
  outline: none;
  border-color: var(--theme-input-focus-border);
  box-shadow: var(--theme-input-focus-shadow);
}

/* Privacy Settings Specific */

.sidebar-content-wrapper .privacy-item {
  background: transparent;
  border: none;
  padding: var(--theme-spacing-md) 0;
  border-bottom: 1px solid var(--theme-border-light);
  margin-bottom: 0;
}

.sidebar-content-wrapper .privacy-item:last-child {
  border-bottom: none;
}

.sidebar-content-wrapper .privacy-label {
  color: var(--theme-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--theme-spacing-sm);
}

.sidebar-content-wrapper .privacy-label input[type='checkbox'] {
  accent-color: var(--theme-primary);
}

.sidebar-content-wrapper .privacy-description {
  color: var(--theme-text-muted);
  font-size: 0.75rem;
  margin-top: var(--theme-spacing-xs);
  margin-left: 1.5rem;
  opacity: 0.9;
}

.sidebar-content-wrapper .danger-zone {
  background: transparent;
  border: 1px solid var(--theme-button-danger-border);
  border-radius: var(--theme-radius-lg);
  padding: var(--theme-spacing-lg);
  margin-top: var(--theme-spacing-xl);
}

.sidebar-content-wrapper .danger-zone h4 {
  color: var(--theme-button-danger-text);
  margin: 0 0 var(--theme-spacing-md) 0;
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-content-wrapper .danger-button {
  width: 100%;
  background: var(--theme-button-danger-bg);
  border: 1px solid var(--theme-button-danger-border);
  color: var(--theme-button-danger-text);
  padding: var(--theme-spacing-md);
  border-radius: var(--theme-radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--theme-transition-normal);
  margin-bottom: var(--theme-spacing-sm);
}

.sidebar-content-wrapper .danger-button:last-child {
  margin-bottom: 0;
}

.sidebar-content-wrapper .danger-button:hover {
  background: var(--theme-button-danger-hover);
  transform: translateY(-1px);
}

.sidebar-content-wrapper .danger-button.confirm {
  animation: pulse 0.5s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* Empty state styling */

.sidebar-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--theme-text-muted);
  gap: 1rem;
  padding: 2rem;
}

.sidebar-empty-state svg {
  color: var(--theme-primary);
  opacity: 0.3;
}

.sidebar-empty-state h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--theme-text-primary);
}

.sidebar-empty-state p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--theme-text-muted);
  max-width: 240px;
}

/* Message history styles */

.message-history-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.message-item {
  background: var(--theme-bg-overlay-light);
  border-radius: var(--theme-radius-xl);
  padding: var(--theme-spacing-lg);
  border: 1px solid var(--theme-border-light);
  transition: all var(--theme-transition-normal);
}

.message-item:hover {
  box-shadow: 0 2px 8px var(--theme-focus-shadow);
  border-color: var(--theme-border-normal);
}

.message-item.user {
  background: var(--theme-bg-overlay-medium);
  border-color: var(--theme-border-medium);
}

.message-item.assistant {
  background: var(--theme-bg-overlay-light);
  border-color: var(--theme-border-light);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

.message-sender {
  font-weight: 600;
  color: var(--theme-text-primary);
}

.message-time {
  color: var(--theme-text-muted);
}

.message-content {
  color: var(--theme-text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  word-wrap: break-word;
}

/* Games panel styles */

.games-panel-container {
  height: 100%;
}

.games-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 480px) {
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.game-card {
  background: var(--theme-sidebar-bg);
  border: 1px solid var(--theme-border-light);
  border-radius: var(--theme-radius-xl);
  padding: var(--theme-spacing-xl);
  text-align: left;
  cursor: default;
  transition: all var(--theme-transition-normal);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.game-card:hover:not(.disabled) {
  transform: translateY(-1px);
  box-shadow: var(--theme-shadow-sm);
  border-color: var(--theme-border-medium);
}

.game-card:active:not(.disabled) {
  transform: translateY(0);
}

.game-card.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--theme-sidebar-bg);
}

.game-card h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--theme-text-primary);
}

.game-card p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--theme-text-muted);
}

.coming-soon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--theme-bg-overlay-medium);
  color: var(--theme-text-accent);
  padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
  border-radius: var(--theme-radius-sm);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Game card inner layout */

.game-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.game-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--theme-text-primary);
}

.game-subtitle {
  font-size: 0.8125rem;
  color: var(--theme-text-secondary);
}

.game-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-end;
}

.game-cost {
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
}

.game-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.game-actions .btn-base {
  border-radius: 9999px;
}

/* Date session list items */

.date-session-item,
.game-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--theme-border-light);
  border-radius: 0.5rem;
  background: var(--theme-sidebar-bg);
}

.date-session-item + .date-session-item,
.game-session-item + .game-session-item {
  margin-top: 0.5rem;
}

/* Status pill adjustments to match theme */

.status-pill {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  text-transform: capitalize;
  background: var(--theme-bg-overlay-light);
  border: 1px solid var(--theme-border-light);
  color: var(--theme-text-secondary);
}

.status-pill.status-active {
  background: rgba(255, 107, 157, 0.12);
  border-color: rgba(255, 107, 157, 0.25);
  color: #ff6b9d;
}

/* Media gallery styles */

.media-gallery-container {
  height: 100%;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}

.media-item {
  aspect-ratio: 1;
  background: #f3f4f6;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  border: 2px solid transparent;
}

.media-item:hover {
  transform: scale(1.05);
  border-color: var(--theme-primary);
  box-shadow: 0 2px 8px rgba(255, 182, 193, 0.4);
}

.media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f2937;
}

.video-thumbnail svg {
  position: absolute;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 0.5rem;
  width: 40px;
  height: 40px;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Media lightbox */

.media-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 2rem;
  cursor: pointer;
  animation: fadeIn 0.2s ease;
}

.lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.lightbox-content img,
.lightbox-content video {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 0.5rem;
}

.lightbox-content p {
  color: white;
  text-align: center;
  margin: 0;
}

/* Scrollbar styling */

.sidebar-content::-webkit-scrollbar {
  width: 0.375rem;
}

.sidebar-content::-webkit-scrollbar-track {
  background: rgba(255, 182, 193, 0.05);
  border-radius: 0.25rem;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(255, 182, 193, 0.3);
  border-radius: 0.25rem;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 182, 193, 0.5);
}

/* Dark content overrides for elements that used hard-coded light theme colors */

.sidebar-content h3,
.sidebar-content h4,
.sidebar-content p,
.sidebar-content li,
.sidebar-content span {
  color: var(--theme-text-primary);
}

.sidebar-content .status-pill {
  background: var(--theme-bg-overlay-light);
  border: 1px solid var(--theme-border-light);
  color: var(--theme-text-secondary);
}

.sidebar-content .profile-info {
  background: var(--theme-card-bg);
  border-color: var(--theme-border-light);
}

.sidebar-content .profile-section h3,
.sidebar-content .profile-details h4 { color: var(--theme-text-primary); }

.sidebar-content .profile-details p,
.sidebar-content .stat-label { color: var(--theme-text-secondary); }

.sidebar-content .stat-value { color: var(--theme-text-primary); }

.sidebar-content .wallet-address { color: var(--theme-text-primary); }

.sidebar-content .waitlist-section { background: var(--theme-card-bg); border-color: var(--theme-border-medium); }

.sidebar-content .game-tile { background: var(--glass-bg-ultra, var(--theme-card-bg)); border-color: var(--glass-border-strong, var(--theme-border-light)); }

/* Profile content styles */

.profile-content-container {
  padding: 1rem 0;
}

.profile-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.profile-info {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: white;
  border-radius: 0.75rem;
  border: 1px solid rgba(236, 72, 153, 0.1);
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--theme-bg-overlay-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-details {
  flex: 1;
  min-width: 0;
}

.profile-details h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.profile-details p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.4;
}

.sidebar-content-wrapper .wallet-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.sidebar-content-wrapper .wallet-address {
  font-family: monospace;
  font-size: 0.875rem;
  color: #3b82f6;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.stat-item {
  padding: 0.75rem;
  background: rgba(243, 244, 246, 0.5);
  border-radius: 0.5rem;
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.stat-value {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

/* Mobile adjustments */

@media (max-width: 480px) {
  .sidebar-panel {
    width: 100%;
    max-width: 100%;
  }

  .sidebar-header { padding: 0 !important; gap: 0rem !important; }

  .sidebar-tabs {
    gap: 0.125rem;
  }

  .sidebar-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }

  /* No padding override needed - use default from sidebar-content-wrapper */

  .sidebar-content-wrapper {
    padding: 1.5rem 1rem; /* Slightly reduced padding on mobile */
  }
}

/* Body control when sidebar is open */

@media (min-width: 769px) {
  /* Push EVERYTHING but with different amounts based on element needs */
  body.sidebar-open {
    /* Create a containing context that shifts everything */
    overflow-x: hidden;
  }

  /* Default state for smooth transition back */
  .live2d-main-container,
  #live2d-container,
  #canvas-container,
  #live2d-canvas,
  .ui-overlay-layer,
  .chat-input-container,
  .wallet-container,
  .wallet-button,
  .wallet-button-container,
  .top-controls,
  .affection-container {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* Chat input shifts the full amount - this is positioned correctly */
  body.sidebar-open .chat-input-container {
    transform: translateX(-240px);
  }

  /* Live2D character shifts less to stay centered */
  body.sidebar-open .live2d-main-container,
  body.sidebar-open #live2d-container,
  body.sidebar-open #canvas-container,
  body.sidebar-open #live2d-canvas {
    /* Smaller shift to keep character centered in remaining space */
    transform: translateX(-120px);
  }

  /* UI overlay (messages) need appropriate shift */
  body.sidebar-open .ui-overlay-layer {
    transform: translateX(-240px);
  }

  /* Wallet button remains visible and fixed; do not override when sidebar open */

  /* Health bar and affection meter don't shift - stay in fixed positions */
  body.sidebar-open .top-controls {
    /* No shift - stays in top-left corner */
    transform: none;
  }

  body.sidebar-open .affection-container {
    /* Only vertical centering, no horizontal shift */
    transform: translateY(-50%);
    top: 35%;
  }
}

/* Mobile: prevent scroll when sidebar open */

@media (max-width: 768px) {
  body.sidebar-open {
    overflow: hidden;
  }
}

.sidebar-wallet-info .wallet-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Styled login pill using theme-secondary */

.sidebar-wallet-info .wallet-login-btn {
  padding: 0.375rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid var(--theme-border-light);
  background: var(--theme-secondary);
  color: var(--theme-text-white);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 0.8125rem;
}

.sidebar-wallet-info .wallet-login-btn:hover {
  filter: brightness(0.98);
}

/**
 * User Profile Component Styles
 * Rally pastel theme styling for user profile modal
 */

.user-profile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.user-profile-modal {
  background: linear-gradient(135deg, rgba(255, 240, 249, 0.98) 0%, rgba(240, 230, 255, 0.98) 100%);
  backdrop-filter: blur(20px);
  border-radius: 1.5rem;
  box-shadow: 0 20px 60px rgba(255, 182, 193, 0.3);
  border: 2px solid rgba(255, 182, 193, 0.3);
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  animation: profileSlideIn 0.3s ease forwards;
}

@keyframes profileSlideIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2rem 1rem;
  border-bottom: 2px solid rgba(255, 182, 193, 0.2);
}

.profile-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.close-button {
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 182, 193, 0.2);
  color: #8b5a8c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-button:hover {
  background: rgba(255, 182, 193, 0.3);
  transform: scale(1.05);
}

.profile-tabs {
  display: flex;
  border-bottom: 2px solid rgba(255, 182, 193, 0.2);
  background: rgba(255, 255, 255, 0.3);
}

.tab-button {
  flex: 1;
  padding: 1rem 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: #8b5a8c;
  transition: all 0.2s ease;
  position: relative;
}

.tab-button:hover {
  background: rgba(255, 182, 193, 0.1);
  color: #ff1493;
}

.tab-button.active {
  color: #ff1493;
  background: rgba(255, 182, 193, 0.2);
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
}

.profile-content {
  padding: 2rem;
  max-height: 60vh;
  overflow-y: auto;
}

/* Overview Tab */

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 1rem;
  border: 1px solid rgba(255, 182, 193, 0.3);
}

.user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb6c1 0%, #ffc0cb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 16px rgba(255, 182, 193, 0.3);
}

.user-details h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #8b5a8c;
}

.wallet-address {
  margin: 0;
  font-size: 0.9rem;
  color: #8b5a8c;
  opacity: 0.8;
  font-family: 'Courier New', monospace;
}

.tier-info {
  margin-bottom: 2rem;
}

.tier-info h4 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #8b5a8c;
}

.tier-card {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 1rem;
  border: 2px solid;
  border-color: inherit;
}

.tier-name {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.tier-description {
  font-size: 0.9rem;
  color: #8b5a8c;
  margin-bottom: 0.5rem;
}

.tier-messages {
  font-size: 0.85rem;
  color: #8b5a8c;
  opacity: 0.8;
}

.quick-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 182, 193, 0.3);
  color: #8b5a8c;
  font-weight: 500;
}

/* Usage Tab */

.usage-stats {
  background: rgba(255, 255, 255, 0.4);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 182, 193, 0.3);
}

.usage-bar {
  margin-bottom: 1rem;
}

.usage-progress {
  width: 100%;
  height: 20px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.usage-fill {
  height: 100%;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  border-radius: 10px;
  transition: width 0.8s ease;
}

.usage-text {
  font-size: 0.9rem;
  color: #8b5a8c;
  font-weight: 600;
  text-align: center;
}

.reset-info {
  font-size: 0.8rem;
  color: #8b5a8c;
  opacity: 0.7;
  text-align: center;
}

/* Payments Tab */

.payment-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.payment-card {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 1rem;
  border: 1px solid rgba(255, 182, 193, 0.3);
  text-align: center;
}

.payment-card h5 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #8b5a8c;
}

.payment-card .price {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ff1493;
}

.payment-card .description {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: #8b5a8c;
  opacity: 0.8;
}

.payment-button {
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.payment-button:hover {
  background: linear-gradient(135deg, #ff1493 0%, #dc143c 100%);
  transform: translateY(-1px);
}

.payment-history {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.payment-record {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 182, 193, 0.3);
}

.payment-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.payment-type {
  font-weight: 600;
  color: #8b5a8c;
  text-transform: capitalize;
}

.payment-date {
  font-size: 0.8rem;
  color: #8b5a8c;
  opacity: 0.7;
}

.payment-amount {
  font-weight: 600;
  color: #ff1493;
}

.payment-status {
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
}

.payment-status.completed {
  background: rgba(34, 197, 94, 0.2);
  color: #059669;
}

.payment-status.pending {
  background: rgba(251, 191, 36, 0.2);
  color: #d97706;
}

.payment-status.failed {
  background: rgba(239, 68, 68, 0.2);
  color: #dc2626;
}

/* Settings Tab */

.settings-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 182, 193, 0.3);
}

.setting-item span {
  font-weight: 500;
  color: #8b5a8c;
}

.setting-item input[type='checkbox'] {
  width: 20px;
  height: 20px;
  accent-color: #ff1493;
}

.danger-zone {
  padding: 1.5rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 1rem;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.danger-zone h5 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: #dc2626;
}

.disconnect-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.disconnect-button:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-1px);
}

.loading {
  text-align: center;
  padding: 2rem;
  color: #8b5a8c;
  font-style: italic;
}

/* Responsive Design */

@media (max-width: 768px) {
  .user-profile-overlay {
    padding: 1rem;
  }

  .user-profile-modal {
    max-height: 90vh;
  }

  .profile-header {
    padding: 1.5rem 1.5rem 1rem;
  }

  .profile-content {
    padding: 1.5rem;
  }

  .user-info {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .payment-options {
    grid-template-columns: 1fr;
  }

  .payment-record {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .tab-button {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
}

/**
 * Visual Novel Message Box Styles
 * Simple dialogue box matching Rally's pink theme
 */

/* Main Container */

.visual-novel-message-box {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1400;
  max-width: 700px;
  width: calc(100% - 2rem);
  pointer-events: auto;
  cursor: pointer;
  animation: vnSlideUp 0.3s ease-out forwards;
}

@keyframes vnSlideUp {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Message Container */

.vn-message-container {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
  overflow: hidden;
  transition: all 0.2s ease;
}

.vn-message-container:hover {
  box-shadow: none;
}

/* Character Name Badge */

.vn-character-badge {
  display: none;
}

.vn-character-name {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Message Content */

.vn-message-content {
  margin-top: 0;
  margin-bottom: 0rem;
}

.vn-message-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #1e293b;
  margin: 0;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  word-wrap: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve space for exactly 2 lines to avoid height jumps between pages */
  min-height: 3.6rem; /* fallback for older browsers */
  min-height: calc(2lh); /* modern browsers: 2 lines of current line-height */
}

/* Typewriter Cursor */

.vn-cursor {
  display: inline-block;
  color: #ff6b9d;
  font-weight: bold;
  animation: vnBlink 1s infinite;
}

@keyframes vnBlink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* Action Indicators */

.vn-action-indicators {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.35rem;
  gap: 0.5rem;
  /* Keep a reserved row height even while typing (when controls are hidden) */
  min-height: 1.5rem;
}

.vn-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #64748b;
}

.vn-pagination-controls button {
  background: transparent;
  border: 1px solid rgba(100, 116, 139, 0.25);
  color: #475569;
  padding: 0.2rem 0.35rem;
  border-radius: 0.375rem;
  cursor: pointer;
}

.vn-pagination-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vn-page-indicator {
  font-size: 0.75rem;
  color: #94a3b8;
}

.vn-continue-indicator {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
  animation: vnPulse 2s infinite;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 0.375rem;
  transition: color 0.2s ease;
}

.vn-continue-indicator:hover {
  color: var(--theme-secondary);
}

@keyframes vnPulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* Responsive Design */

@media (max-width: 768px) {
  .visual-novel-message-box {
    bottom: 100px;
    width: calc(100% - 2rem);
  }

  .vn-message-container {
    padding: 1.25rem 1.5rem 1.5rem 1.5rem;
  }

  .vn-character-badge {
    left: 16px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }

  .vn-character-avatar {
    width: 20px;
    height: 20px;
  }

  .vn-message-text {
    font-size: 1rem;
    line-height: 1.5;
    /* Fallback min-height for mobile: 2 lines */
    min-height: 3rem;
    min-height: calc(2lh);
  }

  .vn-continue-indicator {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .visual-novel-message-box {
    bottom: 90px;
    width: calc(100% - 1.5rem);
  }

  .vn-message-container {
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    border-radius: 0.75rem;
  }

  .vn-character-badge {
    left: 12px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
  }

  .vn-message-text {
    font-size: 0.95rem;
  }

  .vn-decorative-corner {
    width: 8px;
    height: 8px;
  }
}

/* Theme Variants */

.visual-novel-message-box.theme-dark .vn-message-container {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border-color: rgba(71, 85, 105, 0.6);
  color: #e2e8f0;
}

.visual-novel-message-box.theme-dark .vn-message-text {
  color: #e2e8f0;
}

.visual-novel-message-box.theme-dark .vn-continue-indicator {
  color: #94a3b8;
}

/* Animation States */

.visual-novel-message-box.entering {
  animation: vnSlideUp 0.4s ease-out forwards;
}

.visual-novel-message-box.exiting {
  animation: vnSlideDown 0.3s ease-in forwards;
}

@keyframes vnSlideDown {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

/* Token Tiers Styles */

/* Tier tabs container */

.tier-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  gap: 8px;
}

.tier-tabs .panel-tab {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid transparent;
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 16px;
  transition: all 0.2s ease;
  flex: 0 1 auto;
  text-align: center;
  min-width: 100px;
}

.tier-tabs .panel-tab:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.tier-tabs .panel-tab.active {
  background-color: var(--primary-color, #c8a2c8);
  border-color: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

/* Tier content panels */

.tier-content {
  animation: fadeIn 0.3s ease;
  display: none;
  padding: 1rem 0;
}

.tier-content.active {
  display: block;
}

/* Tier card styles */

.tier-card {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin: 1rem 0;
}

.tier-card h4 {
  color: var(--primary-color, #c8a2c8);
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 10px;
}

.tier-description {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.tier-requirement {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  color: #f8e559;
  font-weight: 600;
  padding: 8px 16px;
  margin-bottom: 16px;
  display: inline-block;
}

.tier-features ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.tier-features li {
  color: #ffffff;
  padding: 6px 0;
  position: relative;
  padding-left: 24px;
}

.tier-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary-color, #c8a2c8);
}

/* Different color for each tier */

#free-tier-content .tier-card {
  border-left: 4px solid #7c7c7c;
}

#tier3-content .tier-card {
  border-left: 4px solid #bd58ca;
}

#tier2-content .tier-card {
  border-left: 4px solid #e5a450;
}

#tier1-content .tier-card {
  border-left: 4px solid #50c3e5;
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .tier-tabs {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .tier-tabs .panel-tab {
    min-width: 80px;
    font-size: 13px;
    padding: 6px 12px;
  }
}

/* Enhanced Tokenomics Styles */

/* Token info container */

.token-info-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 1rem;
}

/* Token values section */

.token-values {
  background: rgba(255, 155, 190, 0.1);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(255, 155, 190, 0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.token-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.token-value:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.token-label {
  font-weight: 600;
  color: var(--primary-color, #ff9bbe);
}

/* Chart container */

.chart-container {
  background: rgba(255, 155, 190, 0.1);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(255, 155, 190, 0.15);
}

.chart-container h4 {
  color: var(--primary-color, #ff9bbe);
  margin-top: 0;
  margin-bottom: 15px;
}

.token-chart-wrapper {
  position: relative;
  height: 240px;
  width: 100%;
}

/* Tier section enhancements */

.tier-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 1.5rem 0;
}

.tier-card {
  background: rgba(255, 155, 190, 0.1);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(255, 155, 190, 0.15);
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tier-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(255, 155, 190, 0.25);
  background: rgba(255, 155, 190, 0.15);
}

.tier-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--tier-color, #7c7c7c) 0%, transparent 100%);
}

.tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tier-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--tier-color, #ff9bbe);
  margin: 0;
}

.tier-token-amount {
  font-size: 0.9rem;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  border-radius: 20px;
  color: var(--tier-color, #ff9bbe);
}

.tier-description {
  margin: 10px 0;
  color: rgba(74, 63, 90, 0.9);
  font-size: 0.95rem;
  line-height: 1.5;
}

.tier-features {
  margin-top: 15px;
}

.tier-features ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 400px) {
  .tier-features ul {
    grid-template-columns: 1fr;
  }
}

.tier-features li {
  color: rgba(74, 63, 90, 0.9);
  padding: 5px 0;
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
}

.tier-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--tier-color, #ff9bbe);
}

/* Tier colors */

.tier-card:nth-child(1) {
  --tier-color: #ff9bbe;
}

.tier-card:nth-child(2) {
  --tier-color: #b19cd9;
}

.tier-card:nth-child(3) {
  --tier-color: #ffa9d1;
}

.tier-card:nth-child(4) {
  --tier-color: #9a85c4;
}

/* Chart legend */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

/* Pages */

/**
 * Account Settings Styles
 * Clean design cohesive with Rally's main theme
 */

/* Account Page Layout */

.account-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f8fafc;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header with glass effect */

.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid #e2e8f0;
  min-height: 4rem;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid #e2e8f0;
  color: #475569;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Urbanist', sans-serif;
  border-radius: 30px;
}

.back-button:hover {
  background: rgba(255, 31, 122, 0.05);
  border-color: rgba(255, 31, 122, 0.2);
  color: #ff1f7a;
  transform: translateY(-2px);
}

.back-button:active {
  transform: translateY(0);
}

.back-button:focus-visible {
  outline: 2px solid var(--color-accent-300);
  outline-offset: 2px;
}

.account-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  font-family: 'Urbanist', sans-serif;
  letter-spacing: -0.025em;
  /* Override gradient styles from base.css */
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  text-fill-color: unset !important;
}

.header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.settings-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  color: #475569;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Urbanist', sans-serif;
}

.settings-link:hover {
  background: rgba(255, 31, 122, 0.05);
  border-color: rgba(255, 31, 122, 0.2);
  color: #ff1f7a;
}

/* Logout button is now using WalletButton component with logout-variant */

/* Account Content */

.account-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Sidebar with glass effect */

.account-tabs {
  width: 240px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-right: 2px solid #e2e8f0;
  padding: 1.5rem 1rem;
  overflow-y: auto;
  flex-shrink: 0;
}

.account-tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: none;
  text-align: left;
  color: #475569;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Urbanist', sans-serif;
  border-radius: 0.5rem;
  margin-bottom: 0.125rem;
  position: relative;
  min-height: 36px;
}

.account-tab:hover {
  background: rgba(255, 31, 122, 0.05);
  color: #ff1f7a;
}

.account-tab:focus-visible {
  outline: 2px solid var(--color-accent-300);
  outline-offset: -2px;
}

.account-tab.active {
  background: rgba(255, 31, 122, 0.1);
  color: #ff1f7a;
  font-weight: 600;
  border: 1px solid rgba(255, 31, 122, 0.2);
}

/* Main Content Area */

.account-main {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  background: #f8fafc;
}

.account-main::-webkit-scrollbar {
  width: 8px;
}

.account-main::-webkit-scrollbar-track {
  background: transparent;
}

.account-main::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 4px;
}

.account-main::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

/* Account Sections */

.account-section {
  max-width: 640px;
  margin: 0 auto;
}

.account-section h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1.5rem 0;
  font-family: 'Urbanist', sans-serif;
  letter-spacing: -0.025em;
}

.account-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin: 2rem 0 1rem 0;
  font-family: 'Urbanist', sans-serif;
}

/* Profile Settings */

.profile-item {
  margin-bottom: 1.5rem;
}

.profile-avatar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
}

.avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 31, 122, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff1f7a;
  font-size: 1.5rem;
  border: 2px solid rgba(255, 31, 122, 0.2);
}

.change-avatar-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  color: #475569;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Urbanist', sans-serif;
}

.change-avatar-btn:hover {
  background: rgba(255, 31, 122, 0.05);
  border-color: rgba(255, 31, 122, 0.2);
  color: #ff1f7a;
  transform: translateY(-2px);
}

.change-avatar-btn:active {
  transform: translateY(0);
}

.change-avatar-btn:focus-visible {
  outline: 2px solid var(--color-accent-300);
  outline-offset: 2px;
}

.account-item {
  margin-bottom: 1.5rem;
}

.account-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
  font-family: 'Urbanist', sans-serif;
}

.account-input,
.account-textarea,
.account-select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #0f172a;
  background: #ffffff;
  transition: all 150ms ease;
  font-family: 'Urbanist', sans-serif;
}

.account-input:focus,
.account-textarea:focus,
.account-select:focus {
  outline: none;
  border-color: var(--color-accent-300);
  box-shadow: 0 0 0 3px rgba(249, 168, 212, 0.25);
}

.account-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Wallet Settings */

.wallet-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
}

.wallet-disconnected-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 3rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
}

.wallet-icon-large {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: rgba(255, 31, 122, 0.1);
  border: 2px solid rgba(255, 31, 122, 0.2);
  border-radius: 50%;
  color: #ff1f7a;
  font-size: 1.5rem;
}

.wallet-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #059669;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Connected Wallet Info */

.wallet-connected-info {
  margin-bottom: 2rem;
}

.wallet-item {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.wallet-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.wallet-name {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  font-family: 'Urbanist', sans-serif;
}

/* Account page specific wallet address styling */

.account-page .wallet-item .wallet-address {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.address-text {
  font-family: 'Maple Mono', monospace;
  font-size: 0.875rem;
  color: #475569;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  flex: 1;
}

.copy-button {
  padding: 0.625rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  color: #6b7280;
  cursor: pointer;
  transition: all 150ms ease;
  min-height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-button:hover {
  background: rgba(255, 31, 122, 0.05);
  border-color: rgba(255, 31, 122, 0.2);
  color: #ff1f7a;
}

.copy-button:active {
  background: rgba(255, 31, 122, 0.1);
}

.copy-button:focus-visible {
  outline: 2px solid var(--color-accent-300);
  outline-offset: 2px;
}

.wallet-status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-family: 'Maple Mono', monospace;
}

.wallet-status.connected {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.wallet-status.disconnected {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.connect-wallet-btn {
  margin-top: 0.75rem;
  padding: 0.625rem 1.25rem;
  background: #ff1f7a;
  border: none;
  border-radius: 30px;
  color: #ffffff;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: 'Urbanist', sans-serif;
}

.connect-wallet-btn:hover {
  background: #e01b6d;
  transform: translateY(-2px);
}

.connect-wallet-btn:active {
  transform: translateY(0);
}

.connect-wallet-btn:focus-visible {
  outline: 2px solid var(--color-accent-300);
  outline-offset: 2px;
}

/* Enhanced Wallet Sections */

.wallet-balance-section,
.access-tier-section,
.token-balances-section,
.payment-actions-section,
.wallet-features-section {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
}

.wallet-balance-section h4,
.access-tier-section h4,
.token-balances-section h4,
.payment-actions-section h4,
.wallet-features-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  font-family: 'Urbanist', sans-serif;
}

.tier-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tier-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tier-name {
  font-weight: 600;
  color: #0f172a;
  font-family: 'Urbanist', sans-serif;
}

.tier-messages {
  font-size: 0.75rem;
  color: #6b7280;
  font-family: 'Maple Mono', monospace;
}

/* Upgrade/Tier button – neutral, minimal */

.upgrade-tier-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 10px;
  background: var(--theme-bg-overlay-light);
  border: 1px solid var(--theme-border-light);
  border-radius: 10px;
  color: var(--theme-text-primary);
  cursor: pointer;
  transition: var(--transition-all);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Urbanist', sans-serif;
}

.upgrade-tier-btn:hover {
  background: var(--theme-bg-overlay-medium);
  border-color: var(--theme-border-medium);
}

.upgrade-tier-btn:active {
  transform: translateY(0);
}

.upgrade-tier-btn:focus-visible {
  outline: 2px solid var(--theme-border-strong);
  outline-offset: 2px;
}

/* Base minimal action button used in Wallet tab (Refresh, Collapse, Done, Pager) */

.subscribe-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--theme-border-light);
  background: var(--theme-bg-overlay-light);
  color: var(--theme-text-primary);
  font-weight: 600;
  font-size: 0.85rem;
  transition: var(--transition-all);
}

.subscribe-btn:hover {
  background: var(--theme-bg-overlay-medium);
  border-color: var(--theme-border-medium);
}

.subscribe-btn:disabled { opacity: 0.7; cursor: not-allowed; }

.balance-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.balance-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.balance-token {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.balance-symbol {
  font-weight: 600;
  color: #0f172a;
  font-family: 'Maple Mono', monospace;
}

.balance-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
}

.balance-amount {
  font-weight: 600;
  color: #0f172a;
  font-family: 'Maple Mono', monospace;
}

.balance-usd {
  font-size: 0.75rem;
  color: #6b7280;
  font-family: 'Maple Mono', monospace;
}

/* Payment Actions */

.payment-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.payment-action-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 150ms ease;
  text-align: left;
  width: 100%;
  font-family: 'Urbanist', sans-serif;
}

.payment-action-btn:hover {
  background: rgba(255, 31, 122, 0.05);
  border-color: rgba(255, 31, 122, 0.2);
  transform: translateY(-2px);
}

.payment-action-btn:active {
  transform: translateY(0);
}

.payment-action-btn:focus-visible {
  outline: 2px solid var(--color-accent-300);
  outline-offset: -2px;
}

.payment-action-btn.primary {
  background: #ff1f7a;
  border-color: #ff1f7a;
  color: #ffffff;
}

.payment-action-btn.primary:hover {
  background: #e01b6d;
  border-color: #e01b6d;
}

.payment-action-btn svg {
  flex-shrink: 0;
  color: inherit;
}

.button-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.button-title {
  font-weight: 500;
  font-size: 0.875rem;
  color: inherit;
  font-family: 'Urbanist', sans-serif;
}

.button-desc {
  font-size: 0.75rem;
  opacity: 0.7;
  color: inherit;
  font-family: 'Urbanist', sans-serif;
}

/* Feature List */

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.feature-item svg {
  flex-shrink: 0;
  color: #059669;
}

.feature-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.feature-title {
  font-weight: 500;
  font-size: 0.875rem;
  color: #0f172a;
  font-family: 'Urbanist', sans-serif;
}

.feature-desc {
  font-size: 0.75rem;
  color: #6b7280;
  font-family: 'Urbanist', sans-serif;
}

/* Wallet Actions */

.wallet-actions {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.disconnect-wallet-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border: 1px solid #ef4444;
  border-radius: 30px;
  color: #ef4444;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Urbanist', sans-serif;
}

.disconnect-wallet-btn:hover {
  background: #fef2f2;
  border-color: #dc2626;
  transform: translateY(-2px);
}

.disconnect-wallet-btn:active {
  transform: translateY(0);
}

.disconnect-wallet-btn:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

/* Payment Methods */

.payment-methods {
  margin-top: 2rem;
}

.payment-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
  margin-bottom: 0.75rem;
}

.payment-status {
  margin-left: auto;
  font-size: 0.75rem;
  color: #6b7280;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 31, 122, 0.1);
  border-radius: 30px;
  border: 1px solid rgba(255, 31, 122, 0.2);
  font-family: 'Maple Mono', monospace;
  font-weight: 500;
}

/* Privacy Settings */

.privacy-item {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
}

.privacy-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
  cursor: pointer;
  font-family: 'Urbanist', sans-serif;
}

.privacy-label input[type='checkbox'] {
  width: 1rem;
  height: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  cursor: pointer;
  accent-color: #ff1f7a;
}

.privacy-label input[type='checkbox']:focus-visible {
  outline: 2px solid #ff1f7a;
  outline-offset: 2px;
}

.privacy-description {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0.5rem 0 0 1.75rem;
  line-height: 1.5;
  font-family: 'Urbanist', sans-serif;
}

/* Danger Zone */

.danger-zone {
  margin-top: 2rem;
  padding: 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  border-left: 3px solid #ef4444;
}

.danger-zone h4 {
  color: #b91c1c;
  margin: 0 0 0.75rem 0;
  font-weight: 600;
  font-size: 1rem;
  font-family: 'Urbanist', sans-serif;
}

.danger-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  border: 1px solid #ef4444;
  border-radius: 30px;
  color: #ef4444;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  font-family: 'Urbanist', sans-serif;
}

.danger-button:hover {
  background: #fef2f2;
  border-color: #dc2626;
  transform: translateY(-2px);
}

.danger-button:active {
  transform: translateY(0);
}

.danger-button:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

/* Responsive Design */

@media (max-width: 768px) {
  .account-header {
    padding: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .account-header h1 {
    font-size: 1.25rem;
    order: 1;
    width: 100%;
    text-align: center;
    /* Ensure gradient override persists on mobile */
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    text-fill-color: unset !important;
  }

  .back-button {
    order: 2;
    font-size: 0.8125rem;
  }

  .header-actions {
    order: 3;
    gap: 0.5rem;
  }

  .account-logout-button {
    font-size: 0.8125rem;
  }

  .account-content {
    flex-direction: column;
  }

  .account-tabs {
    width: 100%;
    display: flex;
    overflow-x: auto;
    padding: 1rem;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
  }

  .account-tabs::-webkit-scrollbar {
    height: 4px;
  }

  .account-tabs::-webkit-scrollbar-track {
    background: transparent;
  }

  .account-tabs::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 2px;
  }

  .account-tab {
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    margin: 0 0.25rem 0 0;
    font-size: 0.8125rem;
    flex-shrink: 0;
  }

  .account-main {
    padding: 1rem;
  }

  .profile-avatar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1rem;
  }

  .wallet-address {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .address-text {
    word-break: break-all;
    font-size: 0.8125rem;
  }

  .wallet-balance-section,
  .access-tier-section,
  .token-balances-section,
  .payment-actions-section,
  .wallet-features-section {
    margin: 1rem 0;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .account-header {
    padding: 0.75rem;
  }

  .account-header h1 {
    font-size: 1.125rem;
    /* Ensure gradient override persists on small screens */
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    text-fill-color: unset !important;
  }

  .header-actions {
    gap: 0.25rem;
  }

  .back-button,
  .settings-link,
  .account-logout-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }

  .account-tabs {
    padding: 0.75rem;
  }

  .account-tab {
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
  }

  .account-main {
    padding: 0.75rem;
  }

  .account-section {
    max-width: none;
  }

  .wallet-item {
    padding: 1rem;
  }

  .profile-avatar {
    padding: 1rem;
  }

  .avatar-placeholder {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .change-avatar-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }

  .account-input,
  .account-textarea,
  .account-select {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
  }

  .danger-button {
    width: 100%;
    justify-content: center;
    margin-right: 0;
    margin-bottom: 0.75rem;
  }

  .wallet-balance-section,
  .access-tier-section,
  .token-balances-section,
  .payment-actions-section,
  .wallet-features-section {
    margin: 0.75rem 0;
    padding: 1rem;
  }
}

/* About Settings Styles */

.about-settings {
  padding: 1.5rem;
}

.about-info-section {
  background: var(--glass-bg-light);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  border: 1px solid var(--glass-border-light);
}

.app-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.app-logo {
  font-size: 2.5rem;
  color: var(--color-accent-500);
}

.app-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--theme-text-primary);
  margin: 0;
}

.app-description {
  color: var(--theme-text-secondary);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.app-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border-light);
}

.detail-item {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.detail-label {
  color: var(--theme-text-secondary);
  font-weight: 500;
}

.detail-value {
  color: var(--theme-text-primary);
  font-weight: 600;
}

.about-legal-section,
.about-community-section,
.about-support-section {
  margin-bottom: 1.5rem;
}

.about-legal-section h4,
.about-community-section h4,
.about-support-section h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-text-primary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.link-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.about-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border-light);
  border-radius: 0.75rem;
  text-decoration: none;
  color: var(--theme-text-primary);
  transition: all var(--transition-fast);
}

.about-link:hover {
  background: var(--glass-bg-medium);
  border-color: var(--color-accent-300);
  transform: translateX(2px);
}

.about-link svg:first-child {
  color: var(--color-accent-600);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.about-link span {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
}

.external-icon {
  color: var(--theme-text-secondary);
  font-size: 0.75rem;
  opacity: 0.6;
  flex-shrink: 0;
}

.support-text {
  color: var(--theme-text-secondary);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.support-actions {
  display: flex;
  gap: 0.75rem;
}

.support-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--color-accent-100);
  border: 1px solid var(--color-accent-300);
  border-radius: 0.5rem;
  color: var(--color-accent-700);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.support-btn:hover {
  background: var(--color-accent-200);
  border-color: var(--color-accent-400);
  transform: translateY(-1px);
}

.support-btn svg {
  font-size: 1rem;
}

.about-footer {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--glass-border-light);
  text-align: center;
}

.copyright-text {
  color: var(--theme-text-secondary);
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.made-with {
  color: var(--theme-text-secondary);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.made-with .heart-icon {
  color: var(--color-accent-500);
  font-size: 0.9rem;
}

/* MingCute Icon Color Override */

[class^='mgc_']::before,
[class*=' mgc_']::before {
  color: inherit !important;
}

/* Font Face Declarations (disabled: fall back to system fonts to avoid 404 font decode errors in dev)
   If custom fonts are needed, place files under apps/client/public/fonts and re-enable. */

/* Global styles are handled in base.css - removing duplicates */

/* Utility Classes */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden {
  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;
}

/* Focus Styles */

:focus {
  outline: 2px solid var(--color-accent-300);
  outline-offset: 2px;
}

/* Selection Styles */

::selection {
  background: var(--color-accent-200);
  color: var(--color-accent-900);
}

/* Scrollbar styles are handled in base.css */

/* Privy Modal Overrides - Remove Pink Shadows */

[data-privy-modal] {
  --privy-color-accent: #3b82f6 !important;
  --privy-color-accent-light: #dbeafe !important;
  --privy-color-accent-dark: #1e40af !important;
}

/* Override Privy modal backdrop and shadows */

[data-privy-modal] .privy-modal-backdrop {
  background: rgba(0, 0, 0, 0.5) !important;
}

[data-privy-modal] .privy-modal-content {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e5e7eb !important;
}

[data-privy-modal] .privy-button-primary {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  box-shadow: none !important;
}

[data-privy-modal] .privy-button-primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

[data-privy-modal] .privy-button-secondary {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
  box-shadow: none !important;
}

[data-privy-modal] .privy-button-secondary:hover {
  background: #e5e7eb !important;
  border-color: #9ca3af !important;
  box-shadow: none !important;
}

/* Remove any pink/magenta colors from Privy components */

[data-privy-modal] *[style*='rgb(255, 105, 180)'],
[data-privy-modal] *[style*='rgb(255, 20, 147)'],
[data-privy-modal] *[style*='#ff69b4'],
[data-privy-modal] *[style*='#ff1493'],
[data-privy-modal] *[style*='hotpink'],
[data-privy-modal] *[style*='deeppink'] {
  color: #3b82f6 !important;
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

/* Override any pink box shadows */

[data-privy-modal] *[style*='box-shadow'][style*='255, 105, 180'],
[data-privy-modal] *[style*='box-shadow'][style*='255, 20, 147'],
[data-privy-modal] *[style*='box-shadow'][style*='hotpink'],
[data-privy-modal] *[style*='box-shadow'][style*='deeppink'] {
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.bio-header-content {
  display: flex;
  align-items: center; /* Vertically align items in the center */
  gap: 1.5rem; /* Space between picture and text */
  margin-bottom: 1.5rem; /* Space below the header content */
}

.profile-picture {
  display: block;
  max-width: 150px; /* Reduced size */
  /* margin: 1rem auto; Remove auto margin for flex control */
  margin: 0; /* Reset margin, flex gap will handle spacing */
  border-radius: 50%;
  border: 3px solid var(--primary-color, #ff9bbe); /* Use theme color if available */
  flex-shrink: 0; /* Prevent image from shrinking */
}

/* Optional: Adjust panel-header within flex layout if needed */

.bio-header-content .panel-header {
  text-align: left; /* Align text to the left */
  flex-grow: 1; /* Allow text content to take available space */
}