:root {
      /* Default Theme: Sky Blue (Matching Index) */
      --color-brand-50: 240 249 255;
      --color-brand-100: 224 242 254;
      --color-brand-500: 14 165 233;
      --color-brand-600: 2 132 199;
      --color-brand-900: 12 74 110;
  }

  /* Smooth Transitions */
  body,
  div,
  button,
  input,
  span,
  i {
      transition-property: background-color, border-color, color, fill, stroke, transform, opacity, box-shadow;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 300ms;
  }

  /* Glassmorphism */
  .glass-panel {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.5);
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  }

  .dark .glass-panel {
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  }

  /* Mesh Gradient Background */
  .bg-gradient-mesh {
      background-color: #f3f3f3;
      background-image:
          radial-gradient(at 0% 0%, rgba(var(--color-brand-100), 0.6) 0, transparent 50%),
          radial-gradient(at 100% 100%, rgba(var(--color-brand-50), 0.6) 0, transparent 50%);
      background-size: 100% 100%;
      background-attachment: fixed;
  }

  .dark .bg-gradient-mesh {
      background-color: #0f172a;
      background-image:
          radial-gradient(at 0% 0%, rgba(var(--color-brand-900), 0.4) 0, transparent 50%),
          radial-gradient(at 100% 0%, rgba(var(--color-brand-900), 0.2) 0, transparent 50%);
  }

  /* Button Press Effect */
  .btn-press:active,
  .btn-active {
      transform: scale(0.95);
      filter: brightness(0.9);
  }

  /* Custom Scrollbar for History */
  .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
      background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(156, 163, 175, 0.5);
      border-radius: 20px;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(71, 85, 105, 0.5);
  }

  @media only screen and (max-width: 400px) {
      .glass-panel {
          width: 100%;
          height: 100vh;
      }

      #result-display {
          font-size: 2.5rem;
      }

      .bg-gradient-mesh {
          background: rgba(255, 255, 255, 0.7);
      }

      .glass-panel {
          background: rgba(255, 255, 255, 0.7);
          box-shadow: 0 0px 0px 0 rgba(31, 38, 135, 0.07);
      }

      .dark .glass-panel {
          background: rgba(15, 23, 42, 0.6);
          box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.3);
          border: none;
          outline: none;
      }

  }

  @media only screen and (min-width: 400px) {
      #result-display {
          font-size: 2.8rem;
      }
  }

  @media only screen and (max-height: 737px) {
      .glass-panel {
          height: auto;
      }
  }