html,
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; /* Base for mobile */
}

/* --- Unified Chart System Support --- */
body.chart-maximized-mode {
  overflow: hidden !important;
}

.chart-wrapper {
  height: 480px;
  width: 100%;
}

@media (max-width: 767.98px) {
  .chart-wrapper {
    height: 50vh;
  }
}

.chart-maximize-btn {
  transition: all 0.2s;
  cursor: pointer;
  opacity: 0.7;
  color: #555;
  padding: 4px;
}

.chart-maximize-btn:hover {
  opacity: 1;
  transform: scale(1.1);
  color: var(--bs-primary, #0d6efd);
}

@media (max-width: 767.98px) {
  .chart-wrapper {
    height: 50vh;
  }
}

.chart-maximize-btn {
  transition: all 0.2s;
  cursor: pointer;
  opacity: 0.7;
  color: #555;
  padding: 4px;
}
.chart-maximize-btn:hover {
  opacity: 1;
  transform: scale(1.1);
  color: var(--bs-primary, #0d6efd);
}

a,
.btn-link {
  color: #006bb7;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem white,
    0 0 0 0.25rem #258cfb;
}

.content {
  padding-top: 1.5rem;
}

h1:focus {
  outline: none;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

/* --- Global Exquisite Glass Design System --- */
:root {
  --glass-bg: transparent; /* Removed background color for better readability as requested */
  --glass-bg-hover: transparent;
  --glass-blur: none; /* Removed blur for text clarity */
  --glass-border: 1px solid rgba(0, 0, 0, 0.08); /* More defined border for contrast without background */
  --glass-shadow:
    0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
  --glass-shadow-hover:
    0 8px 16px -4px rgba(0, 0, 0, 0.06), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
  --premium-radius: 14px;
}

.glass-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--premium-radius);
  box-shadow: var(--glass-shadow);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  min-height: 0 !important;
  height: auto;
}

.glass-card-hover:hover {
  transform: translateY(-4px);
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-hover);
}

/* Hover Sheen Animation (Shared) */
.glass-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.1) 52%,
    transparent 55%
  );
  transform: rotate(25deg) translateY(100%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 10;
}

.glass-card-hover:hover::after {
  transform: rotate(25deg) translateY(-100%);
}

.fade-in-premium {
  animation: fadeInPremium 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* --- Premium Error Styles --- */

.validation-message {
  color: #e03131;
  font-size: 0.8rem;
  font-weight: 500;

  /* Layout */
  position: relative;

  /* Remove old box styles */
  border: none;
  background: none;
  line-height: 1.5;

  /* Smooth Reveal Animation */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  animation: errorSmoothReveal 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Icon for validation message */
.validation-message::before {
  content: "!";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  background: #ffe3e3; /* Soft red circle */
  color: #e03131;
  border-radius: 50%;
  text-align: center;
  line-height: 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: text-bottom;
}

@keyframes errorSmoothReveal {
  0% {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(-5px);
  }
  40% {
    opacity: 1;
  }
  100% {
    max-height: 50px;
    margin-top: 0.35rem; /* Little breathing room */
    padding-top: 0;
    padding-bottom: 0;
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth Alert Box Reveal - Premium White Card */
.alert-smooth-reveal {
  overflow: hidden;

  /* Premium Card Look */
  background: #ffffff !important; /* Force white background */
  border: none !important;
  border-left: 4px solid #e03131 !important; /* Stylish red accent */
  border-radius: 0.5rem !important;
  box-shadow:
    0 4px 12px rgba(224, 49, 49, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.05) !important;
  color: #495057 !important; /* Grey text for elegance */

  animation: alertSmoothReveal 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Ensure Icon in alert matches theme */
.alert-smooth-reveal .bi {
  color: #e03131;
}

@keyframes alertSmoothReveal {
  0% {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    max-height: 100px;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    opacity: 1;
    transform: scale(1);
  }
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Elegant Minimalist Typography */
.text-header-title {
  color: #084298 !important; /* Deep Blue to match Primary Icons */
  letter-spacing: -0.015em;
  font-weight: 700;
}

.text-header-muted {
  color: #6c757d !important; /* Cool Slate Blue to harmonize with Deep Blue title */
  font-weight: 400;
}

.x-small {
  font-size: 0.75rem !important;
}

.xs-small {
  font-size: 0.65rem !important;
}

.section-title-dot {
  width: 6px;
  height: 18px;
  background-color: var(--bs-primary);
  border-radius: 4px;
}

/* Page Icon Animations */
@keyframes icon-clipboard {
  0% {
    transform: scale(1);
  }
  30% {
    transform: translateY(-3px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes icon-search {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.2) rotate(15deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* --- Unified Search UI Design System --- */

/* Search mode segmented control */
.search-mode-container {
  display: flex;
  background-color: var(--bs-light);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  width: fit-content;
  max-width: 100%;
  height: 46px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.search-mode-container::-webkit-scrollbar {
  display: none;
}

@media (max-width: 576px) {
  .search-mode-container {
    width: 100%;
    justify-content: flex-start;
  }
}

.search-mode-btn {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bs-secondary);
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  height: 38px;
  min-height: 38px;
}

.search-mode-btn:hover {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.search-mode-btn.active {
  background-color: white;
  color: var(--bs-primary);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-mode-btn i {
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.search-mode-btn.active i {
  transform: scale(1.1);
}

/* Unified Search Input Style */
.unified-search-input-group {
  background-color: var(--bs-light);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  height: 46px;
  transition: all 0.3s ease;
  width: 100%;
}

.unified-search-input-group .input-group-text {
  background: transparent !important;
  border: none !important;
  color: var(--bs-secondary);
  padding-left: 12px;
  padding-right: 4px;
}

.unified-search-input-group .form-control,
.unified-search-input-group .form-select {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bs-dark);
  height: 100%;
}

.unified-search-input-group:focus-within {
  border-color: rgba(var(--bs-primary-rgb), 0.3);
  background-color: white;
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.unified-search-btn {
  height: 46px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding-left: 24px;
  padding-right: 24px;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
  width: 100%;
  transition: all 0.3s ease;
}

.unified-search-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.25);
}

@keyframes icon-funnel {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
}

@keyframes icon-receipt {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-4px);
  }
  40% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes icon-graph {
  0% {
    clip-path: inset(100% 100% 0 0);
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes icon-clock {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes icon-scooter {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(3px) skewX(-5deg);
  }
  50% {
    transform: translateX(-2px) skewX(2deg);
  }
  75% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}

.animate-clipboard {
  animation: icon-clipboard 0.6s ease;
}
.animate-search {
  animation: icon-search 0.6s ease;
}
.animate-funnel {
  animation: icon-funnel 0.4s ease-in-out;
}
.animate-receipt {
  animation: icon-receipt 0.7s ease;
}
.animate-graph {
  animation: icon-graph 0.5s ease-out;
}
.animate-clock {
  animation: icon-clock 0.8s linear;
}
.animate-scooter {
  animation: icon-scooter 0.5s ease-in-out;
}

/* Collapsible Sidebar Logic */
@media (min-width: 768px) {
  /* Reveal the toggle on desktop (needs to be unhidden from NavMenu.razor.css, or we style a label here) */
  /* Wait, the input is inside NavMenu, but we control general layout here */

  /* Using :has to collapse the sidebar when the checkbox inside NavMenu is NOT checked */
  .sidebar:not(:has(#nav-toggle:checked)) {
    width: 64px !important; /* Shrink width */
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .sidebar {
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Smooth text transition instead of sudden display change */
  .nav-text,
  .navbar-brand {
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      width 0.3s ease;
    opacity: 1;
    transform: translateX(0);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Hide text when collapsed with smooth fade and slide */
  .sidebar:not(:has(#nav-toggle:checked)) .nav-text,
  .sidebar:not(:has(#nav-toggle:checked)) .navbar-brand {
    opacity: 0;
    transform: translateX(-10px);
    width: 0;
    pointer-events: none;
  }

  /* Center icons when collapsed */
  .sidebar:not(:has(#nav-toggle:checked)) .nav-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex;
    justify-content: center;
  }

  .sidebar:not(:has(#nav-toggle:checked)) .nav-link {
    justify-content: center;
    padding: 0.5rem 0;
  }

  .sidebar:not(:has(#nav-toggle:checked)) .bi {
    margin-right: 0;
  }

  /* Configured hidden items: Hide with opacity when collapsed */
  #nav-toggle:not(:checked) ~ .nav-scrollable .hidden-when-collapsed {
    opacity: 0;
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Takeaway Loading Animation - Harmonious Packing Scene */
.takeaway-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
  color: #adb5bd; /* Very subtle text */
}

.packing-scene {
  position: relative;
  width: 100px;
  height: 70px;
  margin-bottom: 0.5rem;
  /* Counter Line */
  border-bottom: 2px solid #f8f9fa;
}

.packer {
  position: absolute;
  left: 5px;
  bottom: 0;
  font-size: 2.8rem;
  color: #ced4da; /* Very Soft Grey - Subtle presence */
  transform-origin: bottom center;
  animation: packer-action 1.5s ease-in-out infinite;
  z-index: 1;
}

.packing-bag {
  position: absolute;
  right: 15px;
  bottom: 2px;
  font-size: 1.8rem;
  color: var(--bs-primary); /* Brand Blue Bag */
  transform-origin: bottom right;
  animation: bag-receive 1.5s ease-in-out infinite;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(13, 110, 253, 0.2)); /* Blue glow shadow */
}

.packing-item {
  position: absolute;
  left: 45px;
  top: -10px;
  font-size: 1rem;
  color: #ffc107; /* Warm Gold - Complementary to Blue */
  opacity: 0;
  z-index: 3;
  animation: item-arc 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes packer-action {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  20% {
    transform: scale(1.02, 0.98) rotate(-1deg);
  }
  50% {
    transform: scale(0.99, 1.01) rotate(0deg);
  }
}

@keyframes item-arc {
  0% {
    transform: translate(-10px, 15px) scale(0.4);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  60% {
    transform: translate(25px, 40px) scale(0.7) rotate(180deg);
    opacity: 1;
  }
  75% {
    transform: translate(30px, 48px) scale(0.4) rotate(220deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes bag-receive {
  0%,
  60% {
    transform: scale(1);
  }
  65% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.98, 1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* --- Maintenance & Repair Animation (Refined) --- */
.filter-scrollable-container::-webkit-scrollbar {
  display: none;
}

.query-collapse-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-bottom 0.4s;
  overflow: hidden;
}

.query-collapse-wrapper.expanded {
  grid-template-rows: 1fr;
  margin-bottom: 0.5rem;
}

.query-collapse-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.query-collapse-wrapper.expanded .query-collapse-inner {
  opacity: 1;
  transform: translateY(0);
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

/* Base styles for premium inputs */
.maintenance-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  margin-bottom: 0.5rem;
}

.maintenance-scene {
  position: relative;
  width: 120px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(13, 110, 253, 0.03); /* Subtle backdrop */
  border-radius: 50%;
  box-shadow: inset 0 0 20px rgba(13, 110, 253, 0.05); /* Soft inner glow */
}

/* Central Hub for Coordination */
.work-hub {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: hub-pulse 4s ease-in-out infinite;
}

.technician-icon {
  font-size: 3.2rem;
  color: var(--bs-primary);
  filter: drop-shadow(0 4px 8px rgba(13, 110, 253, 0.2));
  z-index: 5;
  animation: tech-work 3s ease-in-out infinite;
}

.tool-icon {
  position: absolute;
  font-size: 1.2rem;
  color: var(--bs-primary);
  filter: drop-shadow(0 2px 4px rgba(13, 110, 253, 0.1));
  z-index: 2;
}

.wrench-main {
  top: 5px;
  left: 20px;
  font-size: 1.4rem;
  animation: main-wrench-swing 2.5s ease-in-out infinite;
}

.gear-back {
  font-size: 4rem;
  color: var(--bs-primary);
  opacity: 0.05;
  position: absolute;
  z-index: 1;
  animation: slow-gear-spin 12s linear infinite;
}

.gear-small-float {
  bottom: 15px;
  right: 25px;
  font-size: 1.2rem;
  color: var(--bs-secondary);
  opacity: 0.4;
  animation:
    float-gear 3.5s ease-in-out infinite,
    slow-gear-spin 5s linear infinite;
}

@keyframes hub-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

@keyframes tech-work {
  0%,
  100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(0.98) translateY(-3px);
  }
}

@keyframes main-wrench-swing {
  0%,
  100% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(25deg);
  }
}

@keyframes slow-gear-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes float-gear {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-spin {
  animation: spin 2s linear infinite;
  display: inline-block;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Premium Button & Interaction System --- */

/* Global Button Enhancement */
.btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0.5rem; /* Modern rounded corners */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

/* Tactile Click Feedback - Scale down slightly on press */
.btn:active,
.navbar-toggler-icon:active {
  transform: scale(0.96) !important;
}

/* Primary Button Upgrade */
.btn-primary {
  border: none;
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
  box-shadow:
    0 4px 6px -1px rgba(13, 110, 253, 0.2),
    0 2px 4px -1px rgba(13, 110, 253, 0.1);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0b5ed7 0%, #084298 100%);
  box-shadow:
    0 10px 15px -3px rgba(13, 110, 253, 0.3),
    0 4px 6px -2px rgba(13, 110, 253, 0.1);
  transform: translateY(-1px);
}

.btn-primary:active {
  box-shadow: 0 2px 4px 0 rgba(13, 110, 253, 0.2);
  transform: translateY(0) scale(0.96);
}

/* Outline Button Enhancement */
.btn-outline-secondary {
  border-color: #dee2e6;
  color: #495057;
}

.btn-outline-secondary:hover {
  background-color: #f8f9fa;
  border-color: #ced4da;
  color: #212529;
}

/* Better Touch Targets for Dropdowns & Form Controls */
@media (max-width: 767.98px) {
  .dropdown-item {
    padding: 0.75rem 1.25rem !important; /* Larger hit area */
    font-size: 0.95rem;
  }

  .btn,
  .form-select,
  .form-control {
    min-height: 2.5rem; /* Ensure easy tapping */
  }
}

/* Dropdown Polishing */
.dropdown-menu {
  border: none;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 0.5rem;
}

.dropdown-item {
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
}

/* Form Focus State */
.form-control:focus,
.form-select:focus {
  border-color: rgba(13, 110, 253, 0.4);
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

/* White/Light Button Enhancement (Common in this app) */
.btn-white {
  background: #ffffff;
  border: 1px solid #dee2e6;
  color: #212529;
}

.btn-white:hover {
  background-color: #f8f9fa;
  border-color: #ced4da;
}

/* Card Interaction - Subtle hover lift where appropriate */
.card {
  transition:
    transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.2s ease;
}

/* Navigation Animations */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0.8;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0.8;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.page-enter-forward {
  animation: slideInRight 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.page-enter-back {
  animation: slideInLeft 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Ensure content container is ready for animation */
article.content {
  /* Set to auto after animation to prevent trapping fixed elements */
  will-change: auto;
  /* Optional: overflow-x hidden to prevent scrollbars during transition */
  overflow-x: hidden;
}

/* --- Premium Auth Styles (Consolidated) --- */
.tracking-wide {
  letter-spacing: 0.05em;
}

.form-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #868e96;
  margin-bottom: 0.5rem;
}

.premium-input-group {
  position: relative;
  background-color: #ffffff;
  border: 2px solid #e9ecef; /* Slightly thicker for effect */
  border-radius: 1rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  z-index: 1;
}

/* Animated Gradient Border Effect on Focus */
.premium-input-group::before {
  content: "";
  position: absolute;
  /* Thicker border: 3px */
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  /* High contrast gradient: Blue -> White -> Blue */
  background: linear-gradient(90deg, #0d6efd, #ffffff, #0d6efd, #0d6efd);
  background-size: 300% 100%;
  border-radius: 1.15rem;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.2s ease;
  animation: none;
}

.premium-input-group:focus-within {
  border-color: transparent; /* Hide real border to show gradient */
  transform: translateY(-2px) scale(1.02); /* Slight scale up */
  box-shadow: 0 10px 35px rgba(13, 110, 253, 0.25); /* Stronger glow */
}

.premium-input-group:focus-within::before {
  opacity: 1;
  animation: borderFlow 2s linear infinite; /* Faster animation */
}

/* Inner white bg to sit on top of gradient border */
.premium-input-group::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-radius: 0.9rem;
  z-index: -1;
}

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

.premium-input-group .input-group-text {
  background: transparent;
  border: none;
  color: #adb5bd;
  padding-left: 1.25rem;
  padding-right: 0.5rem;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  /* Ensure text sits above ::after */
  position: relative;
  z-index: 2;
}

.premium-input-group:focus-within .input-group-text {
  color: #0d6efd; /* Brand Blue */
  transform: scale(1.1);
}

.premium-input-group .form-control {
  border: none;
  box-shadow: none;
  background: transparent;
  padding-left: 0.25rem;
  padding-right: 1.25rem;
  color: #495057;
  font-weight: 500;
  height: 3.5rem; /* Ensure enough height for floating label */
  position: relative;
  z-index: 2;
}

.premium-input-group .form-control::placeholder {
  color: transparent; /* Hide placeholder so floating label takes over */
}

/* Floating Label Overrides */
.premium-input-group .form-floating {
  flex-grow: 1;
}

/* --- Global Animations --- */
.fade-in {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Semantic Tab Icon Animations --- */

/* 1. Menu/List: Checklist "Check" Motion */
.segment-icon-active.bi-list-check {
  animation: icon-checklist 0.4s ease-out;
}
@keyframes icon-checklist {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.2) translateY(-2px);
  }
  60% {
    transform: scale(1.2) translateY(1px);
  } /* Checkmark hit */
  100% {
    transform: scale(1) translateY(0);
  }
}

/* 2. Security: Shield Lock "Snap" */
.segment-icon-active.bi-shield-lock {
  animation: icon-shield-lock 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes icon-shield-lock {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25);
  }
  50% {
    transform: scale(0.95);
  } /* Snap tight */
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 3. Food: Pan Toss "Flip" */
.segment-icon-active.bi-egg-fried {
  animation: icon-pan-toss 0.6s ease-in-out;
  transform-origin: center bottom;
}
@keyframes icon-pan-toss {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  30% {
    transform: rotate(-15deg) translateY(-4px);
  }
  60% {
    transform: rotate(10deg) translateY(-2px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

/* 4. Basket: Item Drop "Bounce" */
.segment-icon-active.bi-basket {
  animation: icon-basket-drop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes icon-basket-drop {
  0% {
    transform: translateY(-5px);
    opacity: 0.5;
  }
  40% {
    transform: translateY(2px);
    opacity: 1;
  }
  70% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}

/* 5. Shop: Store Open "Pulse" */
.segment-icon-active.bi-shop {
  animation: icon-shop-open 0.6s ease;
}
@keyframes icon-shop-open {
  0% {
    transform: scaleX(0.9);
  }
  40% {
    transform: scaleX(1.1) scaleY(1.1);
  }
  65% {
    transform: scaleX(0.95) scaleY(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.premium-input-group .form-floating > .form-control:focus ~ label,
.premium-input-group
  .form-floating
  > .form-control:not(:placeholder-shown)
  ~ label {
  color: #0d6efd;
  transform: scale(0.85) translateY(-0.7rem) translateX(0.15rem);
  opacity: 1;
}

.premium-input-group .form-floating > .form-control:-webkit-autofill ~ label {
  color: #0d6efd;
  transform: scale(0.85) translateY(-0.7rem) translateX(0.15rem);
}

/* Button Upgrades */
.btn-primary {
  background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.25) !important;
  border: none;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.btn-primary:active {
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2) !important;
  transform: scale(0.98);
}

.btn-primary:hover::after {
  left: 100%;
}

/* Biometric Card */
/* Biometric Card - Premium Glass & Shimmer */
.feature-card {
  position: relative;
  border-radius: 1rem !important;
  /* Subtle Glass Gradient */
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.9),
    rgba(248, 249, 250, 0.8)
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px);
  overflow: hidden; /* For shimmer effect */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.feature-card::before {
  /* Shimmer Effect */
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  transform: skewX(-25deg);
  transition: 0.5s;
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-2px);
  /* Soft Blue Glow on Hover */
  box-shadow:
    0 10px 20px rgba(13, 110, 253, 0.1),
    0 0 0 1px rgba(13, 110, 253, 0.2) !important;
  background: linear-gradient(145deg, #ffffff, #f0f7ff) !important;
}

.feature-card:hover::before {
  left: 200%;
  transition: 0.7s ease-in-out;
}

.icon-sq {
  /* Soft gradient for icon background */
  background: linear-gradient(145deg, #ffffff, #e6f0ff);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 5px rgba(13, 110, 253, 0.1);
  transition: transform 0.3s ease;
}

.feature-card:hover .icon-sq {
  transform: scale(1.1) rotate(-5deg);
  color: #0b5ed7 !important;
}

/* Animation Utilities */
.fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Nav Menu Icons (Moved from NavMenu.razor.css to be global) --- */
.bi[class*="-nav-menu"] {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: none !important;
}

@keyframes icon-clipboard {
  0% {
    transform: scale(1);
  }
  30% {
    transform: translateY(-3px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes icon-search {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.2) rotate(15deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes icon-funnel {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
}

@keyframes icon-receipt {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-4px);
  }
  40% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes icon-graph {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes icon-clock {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes icon-scooter {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(3px) skewX(-5deg);
  }
  50% {
    transform: translateX(-2px) skewX(2deg);
  }
  75% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes icon-map {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(-5deg);
  }
  50% {
    transform: scale(1.1) rotate(5deg);
  }
  75% {
    transform: scale(1.1) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.bi-house-door-fill-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-shield-lock-fill-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-shield-lock-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-shield-lock-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5'/%3E%3C/svg%3E");
}

.bi-shield-lock-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-shield-lock' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z'/%3E%3Cpath d='M9.5 6.5a1.5 1.5 0 0 1-1 1v1a.5.5 0 0 1-1 0v-1a1.5 1.5 0 0 1-1-1 1.5 1.5 0 0 1 1-1 1.5 1.5 0 0 1 1 1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-shield-lock' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z'/%3E%3Cpath d='M9.5 6.5a1.5 1.5 0 0 1-1 1v1a.5.5 0 0 1-1 0v-1a1.5 1.5 0 0 1-1-1 1.5 1.5 0 0 1 1-1 1.5 1.5 0 0 1 1 1z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-receipt-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-receipt' viewBox='0 0 16 16'%3E%3Cpath d='M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z'/%3E%3Cpath d='M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-receipt' viewBox='0 0 16 16'%3E%3Cpath d='M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z'/%3E%3Cpath d='M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-bar-chart-line-fill-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-bar-chart-line-fill' viewBox='0 0 16 16'%3E%3Cpath d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1zm-6 4v7h-2V6zm4 0v7h-2V6zm4 0v7h-2V6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-bar-chart-line-fill' viewBox='0 0 16 16'%3E%3Cpath d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1zm-6 4v7h-2V6zm4 0v7h-2V6zm4 0v7h-2V6z'/%3E%3C/svg%3E");
}

.bi-search-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
}

.bi-funnel-fill-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-funnel-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-funnel-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-lock-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-lock-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}

.bi-box-arrow-right-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-box-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-box-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
}

.bi-box-arrow-in-right-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-box-arrow-in-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z'/%3E%3Cpath fill-rule='evenodd' d='M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-box-arrow-in-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z'/%3E%3Cpath fill-rule='evenodd' d='M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-graph-up-arrow-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-graph-up-arrow' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-graph-up-arrow' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z'/%3E%3C/svg%3E");
}

.bi-cash-coin-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-cash-coin' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8m5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0'/%3E%3Cpath d='M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195z'/%3E%3Cpath d='M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083q.088-.517.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1z'/%3E%3Cpath d='M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 6 6 0 0 1 3.13-1.567'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-cash-coin' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8m5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0'/%3E%3Cpath d='M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195z'/%3E%3Cpath d='M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083q.088-.517.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1z'/%3E%3Cpath d='M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 6 6 0 0 1 3.13-1.567'/%3E%3C/svg%3E");
}

.bi-clock-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-clock' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-clock' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
}

.bi-clipboard-data-fill-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-clipboard-data-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1ZM10 8a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V8Zm-6 4a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm4-3a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-clipboard-data-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1ZM10 8a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V8Zm-6 4a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm4-3a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
}

.bi-scooter-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-scooter' viewBox='0 0 16 16'%3E%3Cpath d='M9 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-.39l1.4 7a2.5 2.5 0 1 1-.98.195l-.189-.938-2.43 3.527A.5.5 0 0 1 9.5 13H4.95a2.5 2.5 0 1 1 0-1h4.287l2.831-4.11L11.09 3H9.5a.5.5 0 0 1-.5-.5M3.915 12a1.5 1.5 0 1 0 0 1H2.5a.5.5 0 0 1 0-1zm8.817-.789A1.499 1.499 0 0 0 13.5 14a1.5 1.5 0 0 0 .213-2.985l.277 1.387a.5.5 0 0 1-.98.196z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-scooter' viewBox='0 0 16 16'%3E%3Cpath d='M9 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-.39l1.4 7a2.5 2.5 0 1 1-.98.195l-.189-.938-2.43 3.527A.5.5 0 0 1 9.5 13H4.95a2.5 2.5 0 1 1 0-1h4.287l2.831-4.11L11.09 3H9.5a.5.5 0 0 1-.5-.5M3.915 12a1.5 1.5 0 1 0 0 1H2.5a.5.5 0 0 1 0-1zm8.817-.789A1.499 1.499 0 0 0 13.5 14a1.5 1.5 0 0 0 .213-2.985l.277 1.387a.5.5 0 0 1-.98.196z'/%3E%3C/svg%3E");
}

.bi-map-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-map-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.598-.49L10.5.99 5.598.01a.5.5 0 0 0-.196 0l-5 1A.5.5 0 0 0 0 1.5v14a.5.5 0 0 0 .598.49l4.902-.98 4.902.98a.5.5 0 0 0 .196 0l5-1A.5.5 0 0 0 16 14.5v-14zM5 14.09V1.11l.5-.1.5.1v12.98l-.402-.08a.498.498 0 0 0-.196 0L5 14.09zm5 .02v-12.98l-.402-.08a.498.498 0 0 0-.196 0L10 1.11v12.98l.5.1zM10 15.09V2.11l.5.1L10 15.09zm-5-.02v-12.98L4.5 2.2V15.19l.5-.1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-map-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.598-.49L10.5.99 5.598.01a.5.5 0 0 0-.196 0l-5 1A.5.5 0 0 0 0 1.5v14a.5.5 0 0 0 .598.49l4.902-.98 4.902.98a.5.5 0 0 0 .196 0l5-1A.5.5 0 0 0 16 14.5v-14zM5 14.09V1.11l.5-.1.5.1v12.98l-.402-.08a.498.498 0 0 0-.196 0L5 14.09zm5 .02v-12.98l-.402-.08a.498.498 0 0 0-.196 0L10 1.11v12.98l.5.1zM10 15.09V2.11l.5.1L10 15.09zm-5-.02v-12.98L4.5 2.2V15.19l.5-.1z'/%3E%3C/svg%3E");
}

.bi-calculator-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-calculator' viewBox='0 0 16 16'%3E%3Cpath d='M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z'/%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-2zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-calculator' viewBox='0 0 16 16'%3E%3Cpath d='M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z'/%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-2zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-4z'/%3E%3C/svg%3E");
}

.bi-gear-fill-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.86z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.86z'/%3E%3C/svg%3E");
}

.bi-terminal-fill-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-terminal-fill' viewBox='0 0 16 16'%3E%3Cpath d='M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm9.5 5.5h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm-6.354-.354a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708L4.793 6.5l-1.647 1.646z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-terminal-fill' viewBox='0 0 16 16'%3E%3Cpath d='M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm9.5 5.5h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm-6.354-.354a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708L4.793 6.5l-1.647 1.646z'/%3E%3C/svg%3E");
}

.bi-patch-plus-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-patch-plus' viewBox='0 0 16 16'%3E%3Cpath d='m12.83 6.28-.121-.18a.5.5 0 0 0-.854.182l-.101.347a.5.5 0 0 1-.357.348l-.347.101a.5.5 0 0 0-.182.854l.18.121a.5.5 0 0 1 0 .83l-.18.121a.5.5 0 0 0 .182.854l.347.101a.5.5 0 0 1 .357.348l.101.347a.5.5 0 0 0 .854.182l.121-.18a.5.5 0 0 1 .83 0l.121.18a.5.5 0 0 0 .854-.182l.101-.347a.5.5 0 0 1 .357-.348l.347-.101a.5.5 0 0 0 .182-.854l-.18-.121a.5.5 0 0 1 0-.83l.18-.121a.5.5 0 0 0-.182-.854l-.347-.101a.5.5 0 0 1-.357-.348l-.101-.347a.5.5 0 0 0-.854-.182l-.121.18a.5.5 0 0 1-.83 0z'/%3E%3Cpath d='M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zM8.5 6a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-patch-plus' viewBox='0 0 16 16'%3E%3Cpath d='m12.83 6.28-.121-.18a.5.5 0 0 0-.854.182l-.101.347a.5.5 0 0 1-.357.348l-.347.101a.5.5 0 0 0-.182.854l.18.121a.5.5 0 0 1 0 .83l-.18.121a.5.5 0 0 0 .182.854l.347.101a.5.5 0 0 1 .357.348l.101.347a.5.5 0 0 0 .854.182l.121-.18a.5.5 0 0 1 .83 0l.121.18a.5.5 0 0 0 .854-.182l.101-.347a.5.5 0 0 1 .357-.348l.347-.101a.5.5 0 0 0 .182-.854l-.18-.121a.5.5 0 0 1 0-.83l.18-.121a.5.5 0 0 0-.182-.854l-.347-.101a.5.5 0 0 1-.357-.348l-.101-.347a.5.5 0 0 0-.854-.182l-.121.18a.5.5 0 0 1-.83 0z'/%3E%3Cpath d='M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zM8.5 6a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z'/%3E%3C/svg%3E");
}
.bi-pie-chart-fill-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pie-chart-fill' viewBox='0 0 16 16'%3E%3Cpath d='M15.985 8.5H8.207l-5.5 5.5a8 8 0 0 0 13.277-5.5zM2 13.292A8 8 0 0 1 7.5.015v7.778l-5.5 5.5zM8.5.015V7.5h7.485A8.001 8.001 0 0 0 8.5.015z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pie-chart-fill' viewBox='0 0 16 16'%3E%3Cpath d='M15.985 8.5H8.207l-5.5 5.5a8 8 0 0 0 13.277-5.5zM2 13.292A8 8 0 0 1 7.5.015v7.778l-5.5 5.5zM8.5.015V7.5h7.485A8.001 8.001 0 0 0 8.5.015z'/%3E%3C/svg%3E");
}

/* 营销投放 - bi-lightning-charge-fill */
.bi-promotion-analysis-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z'/%3E%3C/svg%3E");
}

/* 流量洞察 - bi-bar-chart-fill */
.bi-traffic-analysis-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z'/%3E%3C/svg%3E");
}

/* 经营杂项 - bi-wallet-fill */
.bi-extra-costs-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2A1.5 1.5 0 0 0 0 3.5v7A1.5 1.5 0 0 0 1.5 12H6v2h4v-2h4.5a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 14.5 2h-13zM12 6.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2A1.5 1.5 0 0 0 0 3.5v7A1.5 1.5 0 0 0 1.5 12H6v2h4v-2h4.5a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 14.5 2h-13zM12 6.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E");
}

/* 系统效能 - bi-speedometer */
.bi-speed-v2-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z'/%3E%3C/svg%3E");
}

.bg-gradient-primary {
  background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%);
  position: relative;
  z-index: 1;
}

.kpi-glass-filter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: -1;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.7) !important;
}

.text-white-75 {
  color: rgba(255, 255, 255, 0.85) !important;
}

.text-white-15 {
  color: rgba(255, 255, 255, 0.15) !important;
}

.border-white-15 {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.fade-in {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-delayed {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

/* Heatmap spinner placeholder height when loading */
.heatmap-spinner-wrapper {
  min-height: 200px;
}

.quick-access-card {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.quick-access-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
}

.quick-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.quick-access-card:hover .quick-icon-wrapper {
  transform: scale(1.1);
}

.monitor-hub-wrapper {
  border-radius: 24px;
  overflow: hidden;
}

/* Heatmap Visual Legend */
.heatmap-visual-legend {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

@media (max-width: 576px) {
  .heatmap-visual-legend {
    width: 60px;
  }
}

/* Elite Token Platform Indicators - V4/V6 */
.plat-token {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  color: white;
  flex-shrink: 0;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3);
}

.plat-token-lg {
  width: 20px;
  height: 20px;
  font-size: 12px;
  border-radius: 5.5px;
}

.token-mt {
  background: #f59e0b;
}

.token-ele {
  background: #3b82f6;
}

.token-jd {
  background: #ef4444;
}

/* Dimmed KPI Icons to reduce visual pressure */
.glass-card .plat-token {
  opacity: 0.8;
  box-shadow: none;
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.token-label-v4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.2px;
}

.metric-breakdown-row {
  margin-top: 12px !important;
  gap: 6px !important;
}

/* Redesigned Glass Header Bar */
.header-glass-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  min-height: 86px;
}

/* Left: Time Display */
.header-section-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
}

.clock-display {
  display: flex;
  align-items: baseline;
  line-height: 1;
  font-family: "JetBrains Mono", monospace;
  color: #1e293b;
  gap: 2px;
}

.clock-hhmm {
  font-size: 1.8rem;
  font-weight: 850;
  letter-spacing: -1px;
}

.clock-ss {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.4;
}

.clock-ampm {
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.6;
  margin-left: 2px;
}

.date-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.2px;
}

.date-weekday {
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

/* Center: Ops Hub */
.header-section-ops {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  justify-content: center;
}

.ops-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  min-width: 160px;
  position: relative;
  overflow: hidden;
}

.ops-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.1rem;
}

.ops-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.ops-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
}

.ops-value {
  font-size: 1rem;
  font-weight: 850;
  font-family: "JetBrains Mono", monospace;
  color: #1e293b;
}

.ops-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 0.03);
}

.ops-progress-bar {
  height: 100%;
  transition: width 0.5s ease;
}

/* Work Widget Variants */
.work-status-widget.is-active .ops-icon {
  background: #e0f2fe;
  color: #0284c7;
}

.work-status-widget.is-active .ops-progress-bar {
  background: #0ea5e9;
}

.work-status-widget.is-resting .ops-icon {
  background: #f1f5f9;
  color: #64748b;
}

/* Peak Widget Variants */
.peak-status-widget.status-active {
  background: #fff7ed;
  border-color: #ffedd5;
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.15);
}

.peak-status-widget.status-active .ops-icon {
  background: #ffedd5;
  color: #f97316;
  animation: fire-burst 1.5s infinite ease-in-out;
  filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.4));
}

.peak-status-widget.status-active .ops-value {
  color: #ea580c;
}

@keyframes fire-burst {
  0%,
  100% {
    transform: scale(1) translateY(0);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.15) translateY(-2px);
    filter: brightness(1.2) contrast(1.1);
  }
}

.peak-status-widget.status-upcoming .ops-icon {
  background: #eff6ff;
  color: #3b82f6;
}

.peak-status-widget.status-ended .ops-icon {
  background: #f8fafc;
  color: #cbd5e1;
}

/* Right: Env Section */
.header-section-env {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-end;
}

.env-widget {
  display: flex;
  align-items: center;
  gap: 10px;
}

.env-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.env-value {
  font-size: 1rem;
  font-weight: 850;
  color: #1e293b;
}

.env-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
}

.env-icon {
  font-size: 1.4rem;
}

/* Health Pulse */
.health-status {
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  gap: 6px;
}

.live-text {
  font-size: 0.6rem;
  font-weight: 900;
  color: #64748b;
  letter-spacing: 0.5px;
}

.live-pulse {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  position: relative;
}

.live-pulse::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #10b981;
  animation: pulse-health 2s infinite;
}

@keyframes pulse-health {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes pill-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@media (max-width: 992px) {
  .header-section-ops {
    gap: 12px;
  }
  .ops-widget {
    min-width: 140px;
    padding: 6px 12px;
  }
}

@media (max-width: 768px) {
  .header-glass-bar {
    padding: 0.6rem 0.8rem;
    flex-wrap: nowrap;
    gap: 12px;
    border-radius: 20px;
    justify-content: space-between;
  }
  .header-section-time {
    display: none !important;
  }
  .header-section-ops {
    order: 1;
    flex: 1;
    justify-content: flex-start;
    gap: 8px;
  }
  .header-section-env {
    order: 2;
    flex: 0;
  }
  .ops-widget {
    min-width: 0;
    flex: 1;
    padding: 6px 10px;
  }
}

@media (max-width: 576px) {
  .header-glass-bar {
    padding: 0.4rem 0.6rem;
    gap: 6px;
    margin-bottom: 0.75rem;
  }

  .header-section-ops {
    gap: 6px;
  }
  .ops-widget {
    padding: 4px 6px;
    gap: 6px;
    border-radius: 10px;
  }
  .ops-icon {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    border-radius: 5px;
  }
  .ops-label {
    font-size: 0.6rem;
    letter-spacing: -0.1px;
    white-space: nowrap;
    font-weight: 850;
  }
  .ops-value {
    font-size: 0.85rem;
    white-space: nowrap;
  }
  .ops-seconds {
    display: inline;
    opacity: 0.7;
    font-size: 0.65rem;
  }

  .header-section-env {
    gap: 6px;
  }
  .env-icon {
    font-size: 1rem;
  }
  .env-value {
    font-size: 0.8rem;
  }
  .env-label {
    display: none;
  }
  .env-stack {
    gap: 0;
  }

  .health-status {
    display: none;
  }
}

/* Premium Pro Dashboard Abnormality Monitor Hub */
.monitor-hub-wrapper {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.monitor-hub-wrapper:hover {
  transform: translateY(-4px);
}

.monitor-hub-wrapper:active {
  transform: scale(0.985);
}

.monitor-card-premium {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  /* Exquisite Layered Shadow */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.02),
    0 10px 15px -3px rgba(0, 0, 0, 0.03),
    0 20px 25px -5px rgba(0, 0, 0, 0.03);
  /* Subtle Gradient Border */
  border: 1px solid rgba(255, 255, 255, 0.6);
  position: relative;
  min-height: 90px;
  overflow: hidden;
}

/* Shimmer Sheen Effect on Hover */
.monitor-card-premium::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-25deg);
  transition: 0.75s;
  pointer-events: none;
}

.monitor-hub-wrapper:hover .monitor-card-premium::after {
  left: 150%;
}

.monitor-status-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 1;
}

.monitor-icon-hex {
  position: relative;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  font-size: 1.8rem;
  color: #64748b;
  transition: all 0.4s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.monitor-id-text {
  display: flex;
  flex-direction: column;
}

.monitor-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: #1e293b;
  letter-spacing: -0.2px;
}

.monitor-status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 2px 12px;
  background: #f8fafc;
  border-radius: 20px;
  width: fit-content;
  border: 1px solid #f1f5f9;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
}

.status-text {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.monitor-metrics-panel {
  display: flex;
  align-items: center;
  gap: 40px;
  z-index: 1;
}

.monitor-metric-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 95px;
}

.m-num {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0f172a;
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  letter-spacing: -1.2px;
  line-height: 1;
}

.m-unit {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  margin-left: 2px;
  opacity: 0.8;
}

.m-label-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
  margin-top: 8px;
  white-space: nowrap;
  background: rgba(248, 250, 252, 0.5);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #f1f5f9;
}

.m-label-group i {
  font-size: 0.8rem;
  color: #94a3b8;
}

.m-separator {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, #f1f5f9, #e2e8f0, #f1f5f9);
}

.m-chevron {
  font-size: 1.25rem;
  color: #cbd5e1;
  margin-left: 12px;
  transition: transform 0.3s ease;
}

.monitor-hub-wrapper:hover .m-chevron {
  transform: translateX(4px);
  color: #94a3b8;
}

/* Severity Variants - Luminous Refinement */
.monitor-card-premium.severity-none .status-dot {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.monitor-card-premium.severity-none .status-text {
  color: #059669;
}

.monitor-card-premium.severity-none .monitor-status-pill {
  background: #f0fdf4;
  border-color: #dcfce7;
}

.monitor-card-premium.severity-warning {
  border-color: rgba(251, 191, 36, 0.4);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 251, 235, 0.95)
  );
}

.monitor-card-premium.severity-warning .monitor-icon-hex {
  background: #fffbeb;
  color: #d97706;
  border-color: #fef3c7;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
}

.monitor-card-premium.severity-warning .monitor-status-pill {
  background: #fffbeb;
  border-color: #fef3c7;
}

.monitor-card-premium.severity-warning .status-dot {
  background: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.monitor-card-premium.severity-warning .status-text {
  color: #b45309;
}

.monitor-card-premium.severity-warning .m-num {
  color: #b45309;
}

.monitor-card-premium.severity-warning .m-label-group {
  background: #fffdf5;
  border-color: #fef3c7;
}

.monitor-card-premium.severity-warning .m-label-group i {
  color: #f59e0b;
}

.monitor-card-premium.severity-danger {
  border-color: rgba(239, 68, 68, 0.45);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(254, 226, 226, 0.98)
  );
}

.monitor-card-premium.severity-danger .monitor-icon-hex {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
  animation: icon-pulse-danger 2s infinite;
}

.monitor-card-premium.severity-danger .monitor-status-pill {
  background: #fee2e2;
  border-color: #fecaca;
}

.monitor-card-premium.severity-danger .status-dot {
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

.monitor-card-premium.severity-danger .status-text {
  color: #b91c1c;
  font-weight: 700;
}

.monitor-card-premium.severity-danger .m-num {
  color: #b91c1c;
}

.monitor-card-premium.severity-danger .m-label-group {
  background: #fffcfc;
  border-color: #fee2e2;
}

.monitor-card-premium.severity-danger .m-label-group i {
  color: #ef4444;
}

/* Subtle Pulse Aura for Danger only */
.monitor-card-premium.severity-danger .pulse-aura {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: #ef4444;
  opacity: 0.15;
  animation: monitor-pulse-soft-enhanced 2s infinite;
}

@keyframes icon-pulse-danger {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 4px 25px rgba(239, 68, 68, 0.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes monitor-pulse-soft-enhanced {
  0% {
    transform: scale(1);
    opacity: 0.25;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Mobile Adaptions */
@media (max-width: 768px) {
  .monitor-card-premium {
    padding: 12px 20px;
    gap: 12px;
  }

  .monitor-metrics-panel {
    gap: 20px;
  }

  .monitor-metric-col {
    min-width: 70px;
  }

  .m-num {
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .monitor-card-premium {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    min-height: auto;
  }

  .monitor-status-brand {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
    gap: 12px;
  }

  .monitor-icon-hex {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.2rem;
  }

  .monitor-title {
    font-size: 0.85rem;
  }

  .monitor-status-pill {
    margin-top: 2px;
    padding: 1px 8px;
  }

  .status-text {
    font-size: 0.55rem;
  }

  .monitor-metrics-panel {
    justify-content: flex-end;
    gap: 15px;
  }

  .monitor-metric-col {
    min-width: 60px;
  }

  .m-num {
    font-size: 1.2rem;
  }

  .m-unit {
    font-size: 0.6rem;
  }

  .m-label-group {
    margin-top: 4px;
    padding: 2px 6px;
    font-size: 0.55rem;
  }

  .m-separator {
    height: 30px;
  }

  .m-chevron {
    display: none;
  }
}

/* Mobile Responsive - Header Status Bar Refinement */
@media (max-width: 768px) {
  .header-status-bar {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 24px;
  }

  .greeting-main {
    font-size: 1.35rem;
    letter-spacing: -0.5px;
  }

  .header-subtitle {
    font-size: 0.75rem;
  }

  .clock-time {
    font-size: 1.35rem;
  }

  .live-tag {
    padding: 1.5px 6px;
    font-size: 0.5rem;
  }
}

@media (max-width: 576px) {
  .header-status-bar {
    padding: 0.75rem 0.85rem;
    gap: 8px;
  }

  .header-ops-container {
    flex-grow: 1;
  }

  .header-hero {
    flex-shrink: 1;
  }

  .greeting-main {
    font-size: 1rem;
    white-space: nowrap;
  }

  .header-subtitle {
    display: none !important;
  }

  .header-ops-bar {
    padding: 6px 10px;
    gap: 10px;
    border-radius: 12px;
  }

  .peak-timer-widget {
    gap: 6px;
  }

  .peak-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.8rem;
  }

  .peak-label {
    display: none !important;
  }

  .peak-countdown {
    font-size: 0.85rem;
  }

  .weather-widget-refined {
    padding-left: 10px;
    gap: 6px;
  }

  .weather-icon-large {
    font-size: 1.1rem;
  }

  .weather-desc {
    display: none !important;
  }

  .weather-temp-main {
    font-size: 0.85rem;
  }

  .clock-time {
    font-size: 1rem;
  }

  .live-tag {
    padding: 1px 4px;
    font-size: 0.45rem;
    letter-spacing: 0.5px;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Redesigned Platform Header */
.platform-header-premium {
  background: rgba(255, 255, 255, 0.45);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}

.platform-count-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 10px;
  border-radius: 20px;
  box-shadow: none;
  border: 1px solid currentColor;
}

.platform-title-modern {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.shadow-premium {
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.08);
}

.premium-platform-card {
  border-radius: 24px !important;
  overflow: hidden;
}

/* Legend Styles */
.legend-integrated {
  opacity: 0.8;
}

.legend-item-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: #718096;
}

.dot-sm {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.pulse-dot {
  animation: pulse-red-dot 2s infinite;
}

@keyframes pulse-red-dot {
  0% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

/* Colors */
.bg-accept {
  background-color: #a0aec0;
}

.bg-arrive {
  background-color: #00b8d4;
}

.bg-pickup {
  background-color: #ffb300;
}

.bg-deliver {
  background-color: #43a047;
}

/* Mobile Responsive - Recent Orders Section */
@media (max-width: 576px) {
  .recent-orders-header {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .recent-orders-header::-webkit-scrollbar {
    display: none;
  }

  .legend-integrated {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    opacity: 0.9;
  }

  .legend-item-compact {
    font-size: 0.55rem !important;
    gap: 2px !important;
    white-space: nowrap;
  }

  .dot-sm {
    width: 5px !important;
    height: 5px !important;
  }

  .premium-platform-card {
    margin-bottom: 0.5rem;
  }

  .platform-header-premium {
    padding: 10px 12px;
  }

  .order-item-modern {
    padding: 8px 12px;
    min-height: auto;
  }

  .order-num-large {
    font-size: 1.15rem;
  }

  .order-income-modern {
    font-size: 0.95rem;
  }

  .order-row-top {
    height: 22px;
    margin-bottom: 2px;
  }

  .status-label-compact {
    max-width: 55px;
    font-size: 0.62rem;
  }

  .order-meta-info {
    font-size: 0.62rem;
  }

  .meta-dot {
    margin: 0 2px;
  }
}

/* Redesigned Order Item - Glass Interaction */
.order-item-modern {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  min-height: 64px;
  box-sizing: border-box;
  position: relative;
}

.order-item-modern:hover {
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.order-item-modern:active {
  transform: scale(0.98);
}

.order-row-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2px;
  height: 24px;
}

.order-num-large {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.order-income-modern {
  font-size: 0.95rem;
  font-weight: 800;
  color: #2d3748;
}

.currency-symbol-small {
  font-size: 0.5em; /* 50% */
  margin-right: 0.5px;
  vertical-align: 0.1em;
  opacity: 0.85;
}

.order-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18px;
  margin-bottom: 2px;
  overflow: hidden;
}

.order-meta-info {
  display: flex;
  align-items: center;
  font-size: 0.68rem;
  color: #718096;
  font-weight: 600;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.status-label-compact {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
  flex-shrink: 1;
  font-weight: 800;
}

.meta-dot {
  margin: 0 4px;
  flex-shrink: 0;
}

.meta-time {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Pulse Indicator */
.pulse-red {
  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 53, 10, 0);
  }
}

/* Unified Morphing Timeline Styles */
.morphing-timeline-wrapper {
  margin-top: 6px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding-bottom: 0;
}

.morphing-timeline-wrapper.is-expanded {
  margin-top: 14px;
  padding-bottom: 24px;
}

.timeline-bar-base {
  height: 4px;
  border-radius: 6px;
  background-color: #f1f5f9;
  display: flex;
  width: 100%;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.morphing-timeline-wrapper.is-expanded .timeline-bar-base {
  height: 22px;
  border-radius: 11px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  overflow: visible;
}

.timeline-seg-unified {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-expanded .timeline-seg-unified {
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.seg-label-detailed {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  opacity: 0;
  transition: all 0.3s ease 0.15s;
  white-space: nowrap !important;
}

.is-expanded .seg-label-detailed {
  opacity: 1;
  transform: scale(1);
}

/* Expected Marker Line */
.expansion-expected-line {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background-color: #ff4757;
  z-index: 10;
  opacity: 0;
  transition: all 0.4s ease 0.4s;
}

.is-expanded .expansion-expected-line {
  opacity: 1;
}

.expansion-expected-label {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  background: #ff4757;
  color: white;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 700;
  white-space: nowrap !important;
}

/* Ticks Pop-in */
.dt-tick-container {
  position: absolute;
  bottom: -22px;
  left: 0;
  width: 100%;
  height: 18px;
  opacity: 0;
  transition: all 0.4s ease 0.25s;
}

.is-expanded .dt-tick-container {
  opacity: 0.6;
}

.dt-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: #718096;
  font-family: "JetBrains Mono", monospace;
  white-space: nowrap !important;
}

/* Legend List */
.timeline-legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  opacity: 0;
  transition: all 0.4s ease 0.45s;
}

.is-expanded + .timeline-legend-list {
  opacity: 1;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: #4a5568;
  font-weight: 600;
}

.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Settings Link Buttons */
.setting-link-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.setting-link-btn:hover {
  background: #e2e8f0;
  color: var(--bs-primary);
  transform: rotate(30deg);
}

.setting-link-btn-sm {
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.setting-link-btn-sm:hover {
  color: var(--bs-primary);
  transform: translateY(-1px);
}

/* Settings button for KPI card (fits on purple gradient background) */
.kpi-settings-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  pointer-events: auto;
}

.kpi-settings-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.95);
  transform: rotate(30deg);
}

.kpi-settings-btn:active {
  transform: rotate(30deg) scale(0.9);
}

.stable-small-decimal::after {
  content: var(--decimal);
  font-size: 0.55em;
  opacity: 0.9;
  margin-left: 0.5px;
}

/* Top Refresh Progress Line (Techno Style) */
.top-refresh-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.03);
  z-index: 9999;
  pointer-events: none;
}

.top-refresh-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #00f2fe, #4facfe, #00f2fe);
  background-size: 200% 100%;
  box-shadow:
    0 0 8px rgba(0, 242, 254, 0.6),
    0 0 12px rgba(79, 172, 254, 0.4);
  transition:
    width 1s linear,
    opacity 0.5s ease;
  animation: techno-flow 3s linear infinite;
}

@keyframes techno-flow {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: -100% 0%;
  }
}

/* Vacation / Holiday Trendy Neo-Festive Styles */
.vacation-hero-section {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  perspective: 1000px;
}

.neo-vacation-card {
  background: linear-gradient(135deg, #f02d2d 0%, #b30000 100%);
  border-radius: 48px;
  padding: 60px 40px;
  width: 100%;
  max-width: 900px;
  min-height: 650px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 50px 100px -20px rgba(179, 0, 0, 0.4),
    inset 0 0 80px rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Floating Abstract Orbs */
.floating-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  z-index: 1;
  opacity: 0.6;
  animation: orb-float 8s infinite alternate ease-in-out;
}

.orb-1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #ff6b6b, transparent);
  top: -100px;
  right: -50px;
}

.orb-2 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, #fde047, transparent);
  bottom: -50px;
  left: -50px;
  animation-delay: -3s;
}

.orb-3 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #ffffff, transparent);
  bottom: 20%;
  right: 10%;
  animation-duration: 12s;
  opacity: 0.3;
}

@keyframes orb-float {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(40px) scale(1.1);
  }
}

.vacation-content {
  position: relative;
  z-index: 10;
  width: 100%;
}

.neo-badge-wrapper {
  display: flex;
  justify-content: center;
}

.neo-holiday-badge {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: #fff29e;
  padding: 8px 24px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}

.neo-main-title {
  font-family:
    "Inter",
    -apple-system,
    sans-serif;
  font-size: 3.5rem;
  letter-spacing: -1px;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background: linear-gradient(180deg, #ffffff 30%, #ffdada 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.neo-subtitle {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
  opacity: 0.8;
}

.neo-countdown-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 5px;
}

.neo-countdown-box {
  background: rgba(255, 255, 255, 0.08);
  width: 110px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.neo-countdown-box:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.12);
}

.neo-countdown-box .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #fff, #fde047);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5px;
}

.neo-countdown-box .unit {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
}

.neo-resume-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  padding: 12px 30px;
  border-radius: 100px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.dot-pulse {
  width: 8px;
  height: 8px;
  background: #fde047;
  border-radius: 50%;
  box-shadow: 0 0 10px #fde047;
  animation: dot-pulse 1.5s infinite;
}

@keyframes dot-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Modern Minimalist Lanterns */
.neo-lantern-pair {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.neo-lantern {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.neo-lantern:nth-child(1) {
  top: 40px;
  left: 40px;
  animation: float-slow 10s infinite ease-in-out;
}

.neo-lantern:nth-child(2) {
  bottom: 40px;
  right: 40px;
  animation: float-slow 10s infinite -5s ease-in-out;
}

.neo-lantern span {
  font-size: 40px;
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  color: #fff29e;
  text-shadow: 0 0 15px rgba(253, 224, 71, 0.5);
}

.lantern-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 30px rgba(253, 224, 71, 0.2);
  border-radius: inherit;
}

@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

/* Mobile Responsive Adjustments */
@media (max-width: 576px) {
  .vacation-hero-section {
    padding: 10px;
  }

  .neo-vacation-card {
    padding: 40px 20px;
    border-radius: 32px;
    min-height: 550px;
  }

  .neo-main-title {
    font-size: 2.2rem !important;
  }

  .neo-subtitle {
    font-size: 0.9rem;
  }

  .neo-countdown-box {
    width: 75px;
    height: 90px;
    border-radius: 18px;
  }

  .neo-countdown-box .num {
    font-size: 1.8rem;
  }

  .neo-countdown-box .unit {
    font-size: 0.55rem;
  }

  .neo-resume-tag {
    font-size: 0.85rem;
    padding: 8px 20px;
  }

  .neo-lantern {
    width: 60px;
    height: 60px;
    border-radius: 15px;
  }

  .neo-lantern span {
    font-size: 24px;
  }

  .neo-lantern:nth-child(1) {
    top: 20px;
    left: 20px;
  }

  .neo-lantern:nth-child(2) {
    bottom: 20px;
    right: 20px;
  }
}

.spin-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}