body {
        font-family: "Inter", sans-serif;
        background-color: #0f172a;
      }

      /* --- CSS FIX TO REMOVE ARROWS FROM NUMBER INPUTS --- */
      /* For Chrome, Safari, Edge, Opera */
      input[type="number"]::-webkit-outer-spin-button,
      input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      /* For Firefox */
      input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
      }

      /* --- END OF FIX --- */
      ::-webkit-scrollbar {
        width: 8px;
      }

      ::-webkit-scrollbar-track {
        background: #1e293b;
      }

      ::-webkit-scrollbar-thumb {
        background: #475569;
        border-radius: 4px;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: #64748b;
      }

      .tooltip-container {
        position: relative;
        display: inline-block;
      }

      .tooltip-text {
        visibility: hidden;
        width: 240px;
        background-color: #1e293b;
        color: #e2e8f0;
        text-align: left;
        border-radius: 0.5rem;
        padding: 0.75rem;
        position: absolute;
        z-index: 50;
        bottom: 140%;
        right: 50%;
        transform: translateX(50%);
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 0.875rem;
        pointer-events: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
        border: 1px solid #334155;
        line-height: 1.5;
      }

      .tooltip-container:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
      }

      .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(15, 23, 42, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.3s;
      }

      .modal-overlay.active {
        visibility: visible;
        opacity: 1;
      }

      .modal-content {
        background-color: #1e293b;
        padding: 2rem;
        border-radius: 1rem;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
        max-width: 90%;
        width: 500px;
        text-align: center;
        border: 1px solid #334155;
      }

      .form-input:focus,
      .form-select:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
        --tw-ring-color: #3b82f6;
        box-shadow: 0 0 0 2px var(--tw-ring-color);
      }

      .tab-button.active {
        background-color: #3b82f6;
        color: #ffffff;
      }

      .tab-panel {
        display: none;
      }

      .tab-panel.active {
        display: block;
      }

      .tail-mode-btn,
      .var-mode-btn {
        background-color: #334155;
        color: #94a3b8;
      }

      .tail-mode-btn.active,
      .var-mode-btn.active {
        background-color: #3b82f6;
        color: #ffffff;
        font-weight: 600;
      }

      .prose strong {
        color: #e2e8f0;
      }

      .ai-message {
        background-color: #1e293b;
        padding: 0.75rem;
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        text-align: left;
      }

      .user-message {
        background-color: #3b82f6;
        color: white;
        padding: 0.75rem;
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        text-align: right;
      }

      .trade-tag {
        display: inline-block;
        background-color: #334155;
        color: #94a3b8;
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 500;
        margin-right: 4px;
        margin-top: 4px;
      }

      .tag-pill {
        cursor: pointer;
        transition: background-color 0.2s, color 0.2s;
      }

      .tag-pill.active {
        background-color: #3b82f6;
        color: #ffffff;
        font-weight: 600;
      }

      #headerUserInitials, #dropdownUserInitials, #profilePageUserInitials {
          border-radius: 50%;
          flex-shrink: 0; /* Prevent the icon from shrinking */
      }

      /* --- Global Autofill Style Override --- */
      input:-webkit-autofill,
      input:-webkit-autofill:hover, 
      input:-webkit-autofill:focus, 
      input:-webkit-autofill:active {
          -webkit-box-shadow: 0 0 0 30px #0f172a inset !important; /* Your dark input background */
          -webkit-text-fill-color: #e2e8f0 !important; /* Your light text color */
          transition: background-color 5000s ease-in-out 0s;
      }

      /* Brand slider strip styles */
      .brand-strip{border-top:1px solid #1f2937;background:rgba(2,6,23,.7)}

      .profile-notice {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          background-color: rgba(234, 179, 8, 0.1);
          color: #facc15;
          padding: 1rem;
          border-radius: 0.5rem;
          border: 1px solid rgba(234, 179, 8, 0.2);
          font-weight: 600;
          margin-bottom: 1.5rem;
      }

      .profile-notice.hidden {
          display: none;
      }

      /* Responsive Header Breakpoint */
      .nav-desktop { display: flex; }
      .nav-trigger { display: none; }
      @media (max-width: 1220px) {
        .nav-desktop { display: none !important; }
        .nav-trigger { display: inline-flex !important; }
      }

      #userMenu {
          z-index: 100 !important; /* Use !important to override other styles */
      }