/* Loading Screen */
    #blu-loader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: linear-gradient(135deg, #101E36 0%, #1C3259 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity .35s ease, visibility .35s ease;
    }

    #blu-loader.fade-out {
      opacity: 0;
      visibility: hidden;
      pointer-events: none
    }

    .blu-ll {
      width: 88px;
      animation: logoFade .5s ease both
    }

    @keyframes logoFade {
      from {
        opacity: 0;
        transform: scale(.94)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    .blu-lt {
      color: #fff;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: -.03em;
      margin-top: 18px
    }

    .blu-ls {
      color: rgba(255, 255, 255, .5);
      font-size: 12px;
      margin-top: 5px;
      letter-spacing: .14em;
      text-transform: uppercase
    }

    .blu-lb {
      width: 240px;
      height: 5px;
      background: rgba(255, 255, 255, .1);
      border-radius: 999px;
      margin-top: 26px;
      overflow: hidden
    }

    .blu-lf {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #FF3D19, #D9330F);
      width: 0;
      animation: barFill 2.2s ease-out forwards
    }

    @keyframes barFill {
      0% {
        width: 0
      }

      60% {
        width: 72%
      }

      100% {
        width: 100%
      }
    }

    .blu-lr {
      width: 240px;
      height: 4px;
      background: rgba(255, 255, 255, .1);
      border-radius: 999px;
      margin-top: 22px;
      position: relative;
      overflow: visible
    }

    .blu-ltr {
      display: none
    }

    /* Particle canvas */
    #blu-particles {
      display: none
    }

    .login-wrap,
    .app {
      position: relative;
      z-index: 1
    }

    /* Ticker ribbon */
    #blu-ticker {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 40;
      background: linear-gradient(90deg, #101E36, #1C3259 50%, #101E36);
      color: rgba(255, 255, 255, .85);
      font-size: 12px;
      font-weight: 700;
      padding: 7px 0;
      overflow: hidden;
      border-top: 2px solid rgba(255, 61, 25, .45);
      display: none;
    }

    .blu-tt {
      display: inline-flex;
      white-space: nowrap;
      animation: tickMove 30s linear infinite
    }

    .blu-ti {
      padding: 0 36px;
      opacity: .9
    }

    .blu-ti em {
      color: #D9330F;
      font-style: normal;
      margin-right: 7px
    }

    @keyframes tickMove {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }

    /* FAB */
    #blu-fab {
      position: fixed;
      bottom: 54px;
      right: 24px;
      z-index: 45;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--orange);
      color: #fff;
      font-size: 28px;
      border: 0;
      box-shadow: 0 4px 14px rgba(255, 61, 25, .30);
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: .18s;
    }

    #blu-fab:hover {
      box-shadow: 0 8px 20px rgba(255, 61, 25, .40)
    }

    /* Live clock */
    #blu-clock {
      font-size: 13px;
      font-weight: 800;
      color: #34415a;
      background: #f4f6fb;
      padding: 8px 14px;
      border-radius: 12px;
      border: 1px solid #DFE6F2;
      letter-spacing: .02em;
      white-space: nowrap;
    }

    /* Logo image replacement */
    .blu-logo-img {
      object-fit: contain;
      background: #fff;
      border-radius: 10px;
      padding: 5px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    }

    /* Route decoration on login hero */
    .hero-route-wrap {
      display: none
    }

    /* Card hover lift */
    .card {
      transition: box-shadow .18s
    }

    .card:hover {
      box-shadow: 0 4px 16px rgba(16, 30, 54, .10) !important
    }

    .deal-card {
      transition: .15s
    }

    .deal-card:hover {
      border-color: var(--orange)
    }

    /* Nav hover */
    .nav button {
      transition: .15s
    }

    .nav button.active {
      border-left: 3px solid #FF3D19 !important
    }

    /* Animasi HANYA saat user navigasi manual (klik menu) — tidak pada sync otomatis */
    .view.active {
      animation: none;
      min-height: 60px
    }

    .view.active.nav-anim {
      animation: vFadeIn .28s ease both
    }

    @keyframes vFadeIn {
      from {
        opacity: 0;
        transform: translateY(6px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* Notif badge */
    .nav-notif {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      border-radius: 999px;
      background: #FF3D19;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      margin-left: auto;
      padding: 0 4px
    }

    /* AI badge pulse */
    @keyframes greenPing {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(15, 166, 107, .7)
      }

      50% {
        box-shadow: 0 0 0 7px rgba(15, 166, 107, 0)
      }
    }

    /* Progress bars */
    .progress span,
    .bar-fill {
      transition: width 1.2s cubic-bezier(.25, .46, .45, .94) !important
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px
    }

    ::-webkit-scrollbar-track {
      background: #f0f4fb
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(28, 50, 89, .2);
      border-radius: 4px
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 61, 25, .5)
    }

    /* Login card glow */
    .login-card {
      transition: box-shadow .2s
    }

    /* Ripple */
    @keyframes rippleAnim {
      to {
        transform: scale(2.5);
        opacity: 0
      }
    }

    /* Body padding for ticker */
    body.ticker-on {
      padding-bottom: 38px
    }