/* =====================================================
   PREMIUM NAVIGATION & UNIFIED GREY DESIGN SYSTEM
===================================================== */
:root {
    --bg-dark: #111216;
    --card-dark: #25272c;
    --bar: #303136;
    --bar-light: #3a3b40;
    --border-nav: rgba(255,255,255,.10);
    --orange-nav: #ff7900;
    --orange: #ff7614;
    --gold: #d8b738;
    --green: #52dfb2;
    --red: #ff7777;
    --muted: #777b82;
}

/* =====================================================
   GLOBAL GREY HARMONY (ANTI-FLICKER & NO WHITE FLASH)
===================================================== */
html,
body {
    background-color: #111216 !important;
    color: #f4f4f5 !important;
    font-family: "Manrope", "Plus Jakarta Sans", Inter, sans-serif !important;
    /* MOBILE: hilangkan flash putih highlight saat tap (terlihat seperti border berkedip) */
    -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
}

*:focus {
    outline: none !important;
}

*:focus-visible {
    outline: 2px solid rgba(255, 118, 20, .55) !important;
    outline-offset: 2px !important;
}

/* Animasi ikon refresh lambat (dipakai halaman chat & beberapa halaman lain) */
@keyframes spinSlow {
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spinSlow 3.6s linear infinite;
}

#page-preloader {
    background-color: #111216 !important;
}

/* 1. ALL PRIMARY CARDS & CONTAINERS (SOLID GREY) */
.bg-\[\#121215\],
.bg-\[\#1c1e27\],
.bg-\[\#232734\],
.bg-\[\#20232c\],
.bg-\[\#202433\],
.bg-\[\#202533\],
.bg-\[\#222736\],
.bg-\[\#232838\],
.bg-\[\#161924\],
.bg-\[\#181a22\],
.bg-\[\#181c26\],
.bg-\[\#141418\],
.bg-\[\#111114\],
.bg-neutral-900 {
    background: linear-gradient(145deg, #2d2f34 0%, #25272c 55%, #222429 100%) !important;
    border-color: #3a3c42 !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* 2. INSET PANELS, NESTED BOXES, FORM CONTROLS
   NB: :not(body) wajib -> <body> di semua view memakai class bg-[#0D111A],
   tanpa pengecualiannya background badan jadi #1a1b20 sementara
   #page-preloader & html tetap #111216 -> ada kedip warna saat preloader fade. */
.bg-\[\#0a0a0c\]:not(body),
.bg-\[\#0D111A\]:not(body),
.bg-\[\#070709\]:not(body),
.bg-\[\#050507\]:not(body),
.bg-\[\#09090c\]:not(body),
.bg-\[\#0e0e11\]:not(body),
.bg-\[\#000000\]:not(body),
.bg-neutral-950:not(body),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
    background-color: #1a1b20 !important;
    border: 1px solid #363840 !important;
    color: #f4f4f5 !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: #ff7614 !important;
    background-color: #202228 !important;
}

/* 3. INACTIVE BUTTONS & PILLS */
.bg-\[\#2d3244\],
.bg-\[\#282c3c\],
.bg-\[\#282d3c\],
.bg-\[\#343a4e\],
.bg-\[\#2b3040\],
.bg-\[\#262936\],
.bg-\[\#18181b\],
.bg-\[\#16161a\] {
    background-color: #2a2c32 !important;
    border-color: #3a3c42 !important;
    color: #e4e4e7 !important;
}

/* 4. SEMI-TRANSPARENT OVERLAYS */
.bg-\[\#121215\]\/40,
.bg-\[\#0a0a0c\]\/40,
.bg-\[\#121215\]\/60,
.bg-\[\#0a0a0c\]\/60 {
    background-color: rgba(37, 39, 44, 0.45) !important;
}

.bg-\[\#121215\]\/80,
.bg-\[\#0a0a0c\]\/80,
.bg-\[\#121215\]\/90,
.bg-\[\#0a0a0c\]\/90 {
    background-color: rgba(37, 39, 44, 0.9) !important;
}

/* 5. TABLE HEADERS */
thead tr {
    background-color: #1e2025 !important;
    border-color: #3a3c42 !important;
}

/* =====================================================
   TOP BAR (Full-width Sleek Grey Metallic Bar)
===================================================== */

.topbar,
header.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 72px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #373940 0%, #292a30 100%) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #3a3c42 !important;
    border-radius: 0px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10) !important;
    z-index: 9999 !important;
}

.topbar::before,
header.topbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,.25) 50%, transparent 95%);
    pointer-events: none;
}

.topbar-wrapper {
    width: 100% !important;
    max-width: 1152px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    height: 100% !important;
}

/* LOGO BRAND PROMINENT (ALIP SHOP LUXURY STANDARD) */
.topbar .logo,
header.topbar .logo {
    height: 52px !important;
    width: auto !important;
    max-width: 260px !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.25s ease !important;
}
.topbar .logo:hover,
header.topbar .logo:hover {
    transform: scale(1.03) !important;
}

/* FOOTER BRAND LOGO PROMINENT */
#footer-logo {
    height: 52px !important;
    width: auto !important;
    max-width: 240px !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.25s ease !important;
}
#footer-logo:hover {
    transform: scale(1.03) !important;
}

/* OVAL ROOM CHAT PILL ON TOPBAR */
.topbar-chat-pill {
    position: relative !important;
    height: 38px !important;
    padding: 0 14px 0 12px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6.5px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: linear-gradient(145deg, #484a52, #2d2e35) !important;
    color: #e8e8e9 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.10) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease !important;
}

/* Hover hanya untuk perangkat dengan pointer presisi.
   Di touch device, :hover menempel setelah tap dan membuat border putih
   berkedip (.14 -> .25 -> .14). */
@media (hover: hover) and (pointer: fine) {
    .topbar-chat-pill:hover {
        transform: scale(1.04) !important;
        background: linear-gradient(145deg, #535560, #34363e) !important;
        border-color: rgba(255,255,255,.25) !important;
        color: #fff !important;
    }

    .profile-btn:hover {
        transform: scale(1.06) !important;
        background: linear-gradient(145deg, #535560, #34363e) !important;
        border-color: rgba(255,255,255,.25) !important;
        color: #fff !important;
    }
}

.topbar-chat-pill:active,
.profile-btn:active {
    transform: scale(.97) !important;
}

.topbar-chat-pill svg {
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    flex-shrink: 0 !important;
}

.topbar-chat-pill .chat-label {
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: .15px !important;
    color: inherit !important;
    line-height: 1 !important;
}

.topbar-chat-pill .chat-dot {
    display: none !important;
}

/* CIRCULAR PROFILE BUTTON ON TOPBAR */
.profile-btn {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #484a52, #2d2e35) !important;
    color: #e8e8e9 !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.12) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform .25s ease, background .25s ease, border-color .25s ease !important;
}

.profile-btn svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.profile-btn::after,
.profile-btn.has-dot::after,
#top-profile-btn::after {
    display: none !important;
}

/* =====================================================
   BOTTOM NAV (ELEVATED 3D SHADOW & GREY SURFACE)
===================================================== */

.bottom-nav {
    position: fixed !important;
    left: 50% !important;
    bottom: 15px !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 28px) !important;
    max-width: 620px !important;
    height: 76px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr !important;
    align-items: center !important;
    padding: 6px !important;
    background: linear-gradient(145deg, #3c3e44, #2c2d33) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 23px !important;
    box-shadow: 
        0 25px 60px -8px rgba(0,0,0,.95),
        0 15px 35px rgba(0,0,0,.85),
        0 4px 12px rgba(0,0,0,.7),
        0 0 0 1px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(0,0,0,.6) !important;
    z-index: 9999 !important;
}

.nav-btn {
    position: relative !important;
    height: 62px !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: #8f9198 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    text-decoration: none !important;
    transition: color .25s ease, transform .25s ease !important;
}

.nav-btn:active { transform: scale(.92) !important; }
.nav-btn:hover { color: #e7e7e9 !important; }
.nav-btn.active { color: #fff !important; }

.nav-icon {
    width: 25px !important;
    height: 25px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: transform .25s ease, stroke-width .25s ease !important;
}

.nav-btn.active .nav-icon {
    stroke-width: 2.1 !important;
    transform: translateY(-1px) !important;
}

.nav-label {
    font-size: 9px !important;
    font-weight: 650 !important;
    letter-spacing: .1px !important;
    white-space: nowrap !important;
}

.nav-btn:not(.dashboard)::after {
    content: "" !important;
    position: absolute !important;
    bottom: 2px !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #ff7900 !important;
    box-shadow: 0 0 9px rgba(255,121,0,.45) !important;
    opacity: 0 !important;
    transform: scale(.5) !important;
    transition: .25s ease !important;
}

.nav-btn.active:not(.dashboard)::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* DASHBOARD CENTER */
.dashboard {
    width: 74px !important;
    height: 74px !important;
    justify-self: center !important;
    margin-top: -26px !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: linear-gradient(145deg, #ff9b49 0%, #ff7900 48%, #e96100 100%) !important;
    border: 4.5px solid #303136 !important;
    box-shadow: 0 15px 32px rgba(255,121,0,.28), 0 10px 22px rgba(0,0,0,.6), inset 0 1px 2px rgba(255,255,255,.55), inset 0 -5px 10px rgba(120,40,0,.15) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2.5px !important;
    padding-top: 2px !important;
    padding-bottom: 4px !important;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease !important;
}

.dashboard:hover {
    color: #fff !important;
    transform: translateY(-5px) scale(1.06) !important;
    box-shadow: 0 20px 40px rgba(255,121,0,.38), 0 12px 24px rgba(0,0,0,.55) !important;
}

.dashboard .nav-icon {
    width: 23px !important;
    height: 23px !important;
    stroke-width: 2.1 !important;
    margin: 0 !important;
    transform: none !important;
}

.dashboard .nav-label {
    color: #ffffff !important;
    font-size: 8.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15px !important;
    line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
    margin: 0 !important;
}

/* =====================================================
   EXACT PRODUCT CARD DESIGN (PER TEMPLATE)
===================================================== */

.product-card {
  position: relative !important;
  min-width: 0 !important;
  padding: 9px !important;
  background: linear-gradient(145deg, #2d2f34 0%, #25272c 55%, #222429 100%) !important;
  border: 1px solid #3a3c42 !important;
  border-radius: 15px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035) !important;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

/* subtle top shine */
.product-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 18% !important;
  right: 18% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent) !important;
  pointer-events: none !important;
}

/* HOVER */
.product-card:hover {
  transform: translateY(-3px) !important;
  border-color: #4b4d53 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 0 18px rgba(255,101,0,.035) !important;
}

/* CLICK / ACTIVE */
.product-card.active {
  border-color: #ff6500 !important;
  transform: translateY(-1px) rotate(-1.4deg) !important;
  box-shadow: 0 9px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(255,101,0,.12), 0 0 20px rgba(255,101,0,.12) !important;
  z-index: 10 !important;
}

/* IMAGE */
.product-image {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / .92 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.075) !important;
}

.product-image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  transition: transform .3s ease, filter .3s ease !important;
}

.product-card:hover .product-image img {
  transform: scale(1.035) !important;
}

.product-image::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), transparent 45%, rgba(0,0,0,.28)) !important;
  pointer-events: none !important;
}

/* STOCK BADGE ON IMAGE */
.product-stock {
  position: absolute !important;
  top: 7px !important;
  left: 7px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 7px !important;
  border-radius: 7px !important;
  background: rgba(12,14,16,.78) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #52dfb2 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.22) !important;
}

.product-stock::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #42d8ad !important;
  box-shadow: 0 0 7px rgba(66,216,173,.7) !important;
}

/* CONTENT */
.product-content {
  padding: 8px 1px 1px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* PRODUCT NAME */
.product-name {
  min-height: 32px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  letter-spacing: -.25px !important;
  color: #f4f4f5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 7px !important;
}

/* DIVIDER */
.product-divider {
  height: 1px !important;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.035), transparent) !important;
  margin-bottom: 7px !important;
}

/* PRICE */
.product-price {
  color: #ff7614 !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  margin-bottom: 2px !important;
}

.reseller-price {
  color: #d8b738 !important;
  font-size: 8px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 8px !important;
  min-height: 11px !important;
}

/* BUY BUTTON */
.buy-button {
  width: 100% !important;
  height: 33px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #ff7310, #f45b00) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 5px 12px rgba(255,98,0,.13), inset 0 1px 0 rgba(255,255,255,.16) !important;
  transition: transform .15s ease, filter .15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.buy-button:hover {
  filter: brightness(1.08) !important;
  color: #fff !important;
}

.buy-button:active {
  transform: scale(.95) !important;
}

/* SOLD STATE */
.product-card.sold {
  opacity: .62 !important;
}

.product-card.sold .product-stock {
  color: #ff7777 !important;
}

.product-card.sold .product-stock::before {
  background: #ff6565 !important;
  box-shadow: 0 0 7px rgba(255,101,101,.65);
}

.product-card.sold .buy-button {
  background: #34363b !important;
  color: #777b82 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.product-card.sold .buy-button:active {
  transform: none !important;
}

/* ================= MOBILE ================= */
@media(max-width:360px){
  .product-card {
    padding: 8px !important;
    border-radius: 13px !important;
  }

  .product-image {
    border-radius: 10px !important;
  }

  .product-stock {
    top: 6px !important;
    left: 6px !important;
    padding: 4px 6px !important;
    font-size: 7px !important;
  }

  .product-stock::before {
    width: 4px !important;
    height: 4px !important;
  }

  .product-name {
    font-size: 10px !important;
    min-height: 29px !important;
  }

  .product-price {
    font-size: 12px !important;
  }

  .reseller-price {
    font-size: 7px !important;
  }

  .buy-button {
    height: 31px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 480px) {
    .topbar,
    header.topbar {
        top: 0 !important;
        width: 100% !important;
        height: 62px !important;
        padding: 0 !important;
        border-radius: 0px !important;
    }

    .topbar-wrapper {
        padding: 0 14px !important;
    }

    .topbar .logo,
    header.topbar .logo {
        height: 44px !important;
        max-width: 210px !important;
    }

    #footer-logo {
        height: 44px !important;
        max-width: 190px !important;
    }

    .topbar-chat-pill {
        height: 34px !important;
        padding: 0 12px 0 10px !important;
        gap: 5px !important;
    }

    .topbar-chat-pill svg {
        width: 15px !important;
        height: 15px !important;
    }

    .topbar-chat-pill .chat-label {
        font-size: 10.5px !important;
    }

    .profile-btn {
        width: 38px !important;
        height: 38px !important;
    }

    .profile-btn svg {
        width: 19px !important;
        height: 19px !important;
    }

    .bottom-nav {
        width: calc(100% - 14px) !important;
        bottom: 9px !important;
        height: 73px !important;
        border-radius: 21px !important;
        padding: 5px !important;
        box-shadow: 
            0 20px 50px -5px rgba(0,0,0,.95),
            0 12px 30px rgba(0,0,0,.85),
            0 3px 10px rgba(0,0,0,.7),
            0 0 0 1px rgba(0,0,0,.6),
            inset 0 1px 0 rgba(255,255,255,.14),
            inset 0 -1px 0 rgba(0,0,0,.6) !important;
    }

    .nav-btn {
        height: 61px !important;
    }

    .nav-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .nav-label {
        font-size: 8px !important;
    }

    .dashboard {
        width: 70px !important;
        height: 70px !important;
        margin-top: -24px !important;
        border-width: 4px !important;
        gap: 2px !important;
        padding-top: 1px !important;
        padding-bottom: 3px !important;
    }

    .dashboard .nav-icon {
        width: 21px !important;
        height: 21px !important;
    }

    .dashboard .nav-label {
        font-size: 8px !important;
    }
}

/* ============================================================
   STATIC BORDER UTILITIES - anti "kedip border putih"
   Tailwind browser CDN me-rebuild <style> setiap DOM berubah.
   Pada frame itu utilitas warna/lebar border hilang, sehingga
   border jatuh ke currentColor (teks putih) = kedip putih.
   Deklarasi statis ini selalu menang, warna border tetap stabil.
============================================================ */
.border { border-width: 1px !important }
.border-0 { border-width: 0px !important }
.border-2 { border-width: 2px !important }
.border-4 { border-width: 4px !important }
.border-\[2px\] { border-width: 2px !important }
.border-b { border-bottom-width: 1px !important }
.border-dashed { border-style: dashed !important }
.border-l { border-left-width: 1px !important }
.border-l-2 { border-left-width: 2px !important }
.border-none { border-style: none !important }
.border-t { border-top-width: 1px !important }
.border-t-0 { border-top-width: 0px !important }
.border-\[\#232734\] { border-color: #232734 !important }
.border-\[\#3a3c42\] { border-color: #3a3c42 !important }
.border-amber-500\/20 { border-color: rgba(245,158,11, 0.2) !important }
.border-amber-500\/25 { border-color: rgba(245,158,11, 0.25) !important }
.border-amber-500\/30 { border-color: rgba(245,158,11, 0.3) !important }
.border-amber-500\/40 { border-color: rgba(245,158,11, 0.4) !important }
.border-blue-500\/10 { border-color: rgba(59,130,246, 0.1) !important }
.border-blue-500\/15 { border-color: rgba(59,130,246, 0.15) !important }
.border-blue-500\/20 { border-color: rgba(59,130,246, 0.2) !important }
.border-blue-500\/25 { border-color: rgba(59,130,246, 0.25) !important }
.border-blue-500\/50 { border-color: rgba(59,130,246, 0.5) !important }
.border-cyan-500\/20 { border-color: rgba(6,182,212, 0.2) !important }
.border-cyan-500\/50 { border-color: rgba(6,182,212, 0.5) !important }
.border-cyan-900\/20 { border-color: rgba(22,78,99, 0.2) !important }
.border-emerald-500\/10 { border-color: rgba(16,185,129, 0.1) !important }
.border-emerald-500\/20 { border-color: rgba(16,185,129, 0.2) !important }
.border-emerald-500\/25 { border-color: rgba(16,185,129, 0.25) !important }
.border-emerald-500\/30 { border-color: rgba(16,185,129, 0.3) !important }
.border-emerald-500\/50 { border-color: rgba(16,185,129, 0.5) !important }
.border-green-500\/10 { border-color: rgba(34,197,94, 0.1) !important }
.border-green-500\/15 { border-color: rgba(34,197,94, 0.15) !important }
.border-green-500\/20 { border-color: rgba(34,197,94, 0.2) !important }
.border-green-500\/25 { border-color: rgba(34,197,94, 0.25) !important }
.border-green-500\/30 { border-color: rgba(34,197,94, 0.3) !important }
.border-green-500\/40 { border-color: rgba(34,197,94, 0.4) !important }
.border-green-500\/50 { border-color: rgba(34,197,94, 0.5) !important }
.border-green-500\/80 { border-color: rgba(34,197,94, 0.8) !important }
.border-green-600\/30 { border-color: rgba(22,163,74, 0.3) !important }
.border-green-900\/25 { border-color: rgba(20,83,45, 0.25) !important }
.border-green-900\/30 { border-color: rgba(20,83,45, 0.3) !important }
.border-neutral-700 { border-color: rgb(64,64,64) !important }
.border-neutral-800 { border-color: rgb(38,38,38) !important }
.border-neutral-800\/40 { border-color: rgba(38,38,38, 0.4) !important }
.border-neutral-800\/50 { border-color: rgba(38,38,38, 0.5) !important }
.border-neutral-800\/60 { border-color: rgba(38,38,38, 0.6) !important }
.border-neutral-900 { border-color: rgb(23,23,23) !important }
.border-neutral-900\/30 { border-color: rgba(23,23,23, 0.3) !important }
.border-neutral-900\/40 { border-color: rgba(23,23,23, 0.4) !important }
.border-neutral-900\/50 { border-color: rgba(23,23,23, 0.5) !important }
.border-neutral-900\/60 { border-color: rgba(23,23,23, 0.6) !important }
.border-neutral-900\/65 { border-color: rgba(23,23,23, 0.65) !important }
.border-neutral-950 { border-color: rgb(10,10,10) !important }
.border-orange-400\/30 { border-color: rgba(251,146,60, 0.3) !important }
.border-orange-500 { border-color: rgb(249,115,22) !important }
.border-orange-500\/10 { border-color: rgba(249,115,22, 0.1) !important }
.border-orange-500\/15 { border-color: rgba(249,115,22, 0.15) !important }
.border-orange-500\/20 { border-color: rgba(249,115,22, 0.2) !important }
.border-orange-500\/25 { border-color: rgba(249,115,22, 0.25) !important }
.border-orange-500\/30 { border-color: rgba(249,115,22, 0.3) !important }
.border-orange-500\/40 { border-color: rgba(249,115,22, 0.4) !important }
.border-orange-500\/50 { border-color: rgba(249,115,22, 0.5) !important }
.border-orange-500\/80 { border-color: rgba(249,115,22, 0.8) !important }
.border-orange-600\/10 { border-color: rgba(234,88,12, 0.1) !important }
.border-orange-600\/15 { border-color: rgba(234,88,12, 0.15) !important }
.border-orange-600\/40 { border-color: rgba(234,88,12, 0.4) !important }
.border-orange-600\/50 { border-color: rgba(234,88,12, 0.5) !important }
.border-orange-900\/25 { border-color: rgba(124,45,18, 0.25) !important }
.border-orange-900\/30 { border-color: rgba(124,45,18, 0.3) !important }
.border-pink-500\/30 { border-color: rgba(236,72,153, 0.3) !important }
.border-purple-500 { border-color: rgb(168,85,247) !important }
.border-purple-500\/10 { border-color: rgba(168,85,247, 0.1) !important }
.border-purple-500\/15 { border-color: rgba(168,85,247, 0.15) !important }
.border-purple-500\/20 { border-color: rgba(168,85,247, 0.2) !important }
.border-purple-500\/50 { border-color: rgba(168,85,247, 0.5) !important }
.border-purple-500\/80 { border-color: rgba(168,85,247, 0.8) !important }
.border-purple-900\/30 { border-color: rgba(88,28,135, 0.3) !important }
.border-r-orange-400\/50 { border-right-color: rgba(251,146,60, 0.5) !important }
.border-red-500\/10 { border-color: rgba(239,68,68, 0.1) !important }
.border-red-500\/15 { border-color: rgba(239,68,68, 0.15) !important }
.border-red-500\/20 { border-color: rgba(239,68,68, 0.2) !important }
.border-red-500\/25 { border-color: rgba(239,68,68, 0.25) !important }
.border-red-500\/30 { border-color: rgba(239,68,68, 0.3) !important }
.border-red-500\/50 { border-color: rgba(239,68,68, 0.5) !important }
.border-red-800\/50 { border-color: rgba(153,27,27, 0.5) !important }
.border-red-900\/10 { border-color: rgba(127,29,29, 0.1) !important }
.border-red-900\/30 { border-color: rgba(127,29,29, 0.3) !important }
.border-red-900\/40 { border-color: rgba(127,29,29, 0.4) !important }
.border-rose-500\/20 { border-color: rgba(244,63,94, 0.2) !important }
.border-t-\[var\(--theme-500\,\#f97316\)\] { border-top-color: var(--theme-500,#f97316) !important }
.border-t-orange-400 { border-top-color: rgb(251,146,60) !important }
.border-t-orange-500 { border-top-color: rgb(249,115,22) !important }
.border-t-white { border-top-color: rgb(255,255,255) !important }
.border-transparent { border-color: transparent !important }
.border-white\/10 { border-color: rgba(255,255,255, 0.1) !important }
.border-white\/15 { border-color: rgba(255,255,255, 0.15) !important }
.border-white\/20 { border-color: rgba(255,255,255, 0.2) !important }
.border-white\/30 { border-color: rgba(255,255,255, 0.3) !important }
.border-white\/5 { border-color: rgba(255,255,255, 0.05) !important }
.border-white\/\[0\.04\] { border-color: rgba(255,255,255, 0.04) !important }
.border-white\/\[0\.06\] { border-color: rgba(255,255,255, 0.06) !important }
.border-white\/\[0\.08\] { border-color: rgba(255,255,255, 0.08) !important }
.border-white\/\[0\.1\] { border-color: rgba(255,255,255, 0.1) !important }
.border-yellow-500 { border-color: rgb(234,179,8) !important }
.border-yellow-500\/15 { border-color: rgba(234,179,8, 0.15) !important }
.border-yellow-500\/20 { border-color: rgba(234,179,8, 0.2) !important }
.border-yellow-500\/50 { border-color: rgba(234,179,8, 0.5) !important }
.focus\:border-blue-500\/50:focus { border-color: rgba(59,130,246, 0.5) !important }
.focus\:border-cyan-500\/50:focus { border-color: rgba(6,182,212, 0.5) !important }
.focus\:border-emerald-500\/50:focus { border-color: rgba(16,185,129, 0.5) !important }
.focus\:border-green-500\/50:focus { border-color: rgba(34,197,94, 0.5) !important }
.focus\:border-orange-500\/50:focus { border-color: rgba(249,115,22, 0.5) !important }
.focus\:border-orange-600\/40:focus { border-color: rgba(234,88,12, 0.4) !important }
.focus\:border-orange-600\/50:focus { border-color: rgba(234,88,12, 0.5) !important }
.focus\:border-purple-500:focus { border-color: rgb(168,85,247) !important }
.focus\:border-purple-500\/50:focus { border-color: rgba(168,85,247, 0.5) !important }
.focus\:border-red-500\/50:focus { border-color: rgba(239,68,68, 0.5) !important }
.focus\:border-yellow-500:focus { border-color: rgb(234,179,8) !important }
.focus\:border-yellow-500\/50:focus { border-color: rgba(234,179,8, 0.5) !important }
.hover\:border-amber-500\/40:hover { border-color: rgba(245,158,11, 0.4) !important }
.hover\:border-emerald-500\/30:hover { border-color: rgba(16,185,129, 0.3) !important }
.hover\:border-green-500\/20:hover { border-color: rgba(34,197,94, 0.2) !important }
.hover\:border-green-500\/30:hover { border-color: rgba(34,197,94, 0.3) !important }
.hover\:border-neutral-700:hover { border-color: rgb(64,64,64) !important }
.hover\:border-neutral-800:hover { border-color: rgb(38,38,38) !important }
.hover\:border-orange-500:hover { border-color: rgb(249,115,22) !important }
.hover\:border-orange-500\/20:hover { border-color: rgba(249,115,22, 0.2) !important }
.hover\:border-orange-500\/25:hover { border-color: rgba(249,115,22, 0.25) !important }
.hover\:border-orange-500\/30:hover { border-color: rgba(249,115,22, 0.3) !important }
.hover\:border-orange-500\/40:hover { border-color: rgba(249,115,22, 0.4) !important }
.hover\:border-pink-500\/30:hover { border-color: rgba(236,72,153, 0.3) !important }
.hover\:border-purple-500\/20:hover { border-color: rgba(168,85,247, 0.2) !important }
.hover\:border-red-900\/30:hover { border-color: rgba(127,29,29, 0.3) !important }
.hover\:border-transparent:hover { border-color: transparent !important }
.hover\:border-white\/15:hover { border-color: rgba(255,255,255, 0.15) !important }
.hover\:border-white\/20:hover { border-color: rgba(255,255,255, 0.2) !important }
.hover\:border-white\/\[0\.1\]:hover { border-color: rgba(255,255,255, 0.1) !important }