html {
      scroll-behavior: smooth;
    }

    body {
      overflow-x: clip;
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    .hide-scrollbar {
      -ms-overflow-style: none;
      /* IE and Edge */
      scrollbar-width: none;
      /* Firefox */
    }

    /* Active Sidebar Link Style */
    .sidebar-link.active {
      background-color: #1f2937;
      /* bg-gray-800 */
      color: #4ade80;
      /* text-green-400 */
    }

    /* ── Mobile bottom nav safe area ── */
    .bottom-nav {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* ── Range slider custom style ── */
    input[type=range] {
      -webkit-appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: #374151;
      outline: none;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #16a34a;
      cursor: pointer;
      border: 2px solid #22c55e;
      box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
    }

    input[type=range]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #16a34a;
      cursor: pointer;
      border: 2px solid #22c55e;
    }

    /* ── Toggle switch ── */
    .toggle-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }

    .toggle-wrap input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-track {
      width: 46px;
      height: 26px;
      background: #374151;
      border-radius: 13px;
      transition: background 0.2s;
      flex-shrink: 0;
    }

    .toggle-wrap input:checked+.toggle-track {
      background: #16a34a;
    }

    .toggle-thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      background: #fff;
      border-radius: 50%;
      transition: left 0.2s;
      pointer-events: none;
    }

    .toggle-wrap input:checked~.toggle-thumb {
      left: 23px;
    }

    /* ── Mobile trade card ── */
    .trade-card {
      display: none;
    }

    @media (max-width: 639px) {
      .trade-table {
        display: none;
      }

      .trade-card {
        display: block;
      }

      .pos-table {
        display: none;
      }

      .pos-card {
        display: block;
      }
    }

    @media (min-width: 640px) {
      .pos-card {
        display: none;
      }
    }

    /* ── Nav link active ── */
    .nav-link {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }

    /* ── Section fade-in ── */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-up {
      animation: fadeUp 0.4s ease-out forwards;
    }

    /* ── Status dot pulse ── */
    @keyframes pulse-dot {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.4;
      }
    }

    .pulse {
      animation: pulse-dot 1.5s ease-in-out infinite;
    }

    /* ── Mobile menu slide ── */
    #mobileNav {
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    #mobileNav.hidden {
      display: none;
    }

    /* ── Sticky bottom nav (mobile) ── */
    @media (min-width: 768px) {
      #bottomNav {
        display: none !important;
      }
    }

    body {
      padding-bottom: 60px;
    }

    @media (min-width: 768px) {
      body {
        padding-bottom: 0;
      }
    }

    /* ── Focus ring ── */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 2px solid #22c55e;
      outline-offset: 2px;
    }

    /* ── Refresh button spin animation ── */
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .refresh-spin {
      animation: spin 0.6s linear;
    }