/* =========================================================
   BMC GARUDA PRIME — FINAL UI OVERRIDE
   Visual layer only. No application logic lives in this file.
   ========================================================= */

:root {
  --bg-main: #050505;
  --bg-card: #0d0d0f;
  --bg-card-hover: #131316;
  --border-color: #29292d;
  --accent-gold: #f59e0b;
  --accent-blue: #60a5fa;
  --accent-green: #22c55e;
  --accent-red: #ef4444;
  --accent-purple: #d97706;
  --text-main: #f4f4f5;
  --text-muted: #8d8d96;
  --syndicate-red: #dc2626;
  --syndicate-red-deep: #7f1d1d;
  --steel: #3f3f46;
  --panel-2: #121215;
  --sidebar-width: 330px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #3f1b1d #09090b;
}

*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #09090b; }
*::-webkit-scrollbar-thumb { background: #3a2022; border: 2px solid #09090b; }
*::-webkit-scrollbar-thumb:hover { background: #6b2529; }

html { background: #050505; }

body {
  background:
    radial-gradient(circle at 82% 7%, rgba(127,29,29,.16), transparent 25%),
    radial-gradient(circle at 18% 88%, rgba(245,158,11,.055), transparent 23%),
    linear-gradient(135deg, #050505 0%, #09090b 55%, #030303 100%) !important;
  color: var(--text-main);
  font-family: "JetBrains Mono", "Inter", monospace !important;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .15;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 90%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 90%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.007) 4px);
}

.site-watermark {
  left: calc(50% + (var(--sidebar-width) / 2)) !important;
  top: 58% !important;
  width: min(46vw, 680px) !important;
  opacity: .078 !important;
  filter: grayscale(1) contrast(1.14) drop-shadow(0 0 40px rgba(220,38,38,.12));
  z-index: 0 !important;
}

/* ---------- FIXED BRAND / ROLE SIDEBAR HEADER ---------- */
header {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--sidebar-width) !important;
  height: 188px !important;
  padding: 22px 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 15px !important;
  background:
    radial-gradient(circle at 0 0, rgba(220,38,38,.12), transparent 42%),
    linear-gradient(180deg, rgba(17,17,19,.99), rgba(7,7,8,.99)) !important;
  border: 0 !important;
  border-right: 1px solid #252529 !important;
  border-bottom: 1px solid #29292d !important;
  box-shadow: 14px 0 45px rgba(0,0,0,.38) !important;
  z-index: 40 !important;
}

header::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 17px;
  width: 96px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-red));
  box-shadow: 0 0 16px rgba(239,68,68,.55);
}

header h1 {
  min-height: 68px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  white-space: normal !important;
  color: #f4f4f5 !important;
  font-family: "Rajdhani", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.02 !important;
  letter-spacing: .045em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 15px rgba(239,68,68,.14);
}

.brand-icon {
  width: 58px !important;
  height: 70px !important;
  flex: 0 0 58px !important;
  filter:
    drop-shadow(0 7px 12px rgba(0,0,0,.72))
    drop-shadow(0 0 12px rgba(239,68,68,.18)) !important;
}

.header-status {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px 10px !important;
  align-items: center !important;
  text-align: left !important;
}

.header-status label {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: #8a8a93 !important;
  font-weight: 800 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
}

#status-koneksi {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  padding: 7px 9px !important;
  border-radius: 0 !important;
  border: 1px solid #303035 !important;
  background: #0a0a0c !important;
  color: #a1a1aa !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}

#user-role {
  grid-column: 1;
  grid-row: 2;
  width: 148px !important;
  height: 34px !important;
  padding: 7px 9px !important;
  color: #f4f4f5 !important;
  background: #08080a !important;
  border: 1px solid #38383d !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  outline: none;
}

#user-role option { font-weight: 800; }

/* ---------- LEFT MENU ---------- */
.nav-tabs {
  position: fixed !important;
  left: 0 !important;
  top: 188px !important;
  bottom: 0 !important;
  width: var(--sidebar-width) !important;
  padding: 10px 12px 22px !important;
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, rgba(8,8,10,.99), rgba(5,5,5,.99)) !important;
  border: 0 !important;
  border-right: 1px solid #252529 !important;
  z-index: 39 !important;
}

.nav-label {
  width: 100%;
  padding: 14px 10px 7px;
  color: #777780;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: .19em;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(239,68,68,.10);
}

.nav-label.member-label { color: #9a7b43; }

.nav-tabs .tab-btn {
  position: relative !important;
  width: 100% !important;
  min-height: 50px !important;
  margin: 2px 0 !important;
  padding: 11px 13px !important;
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  white-space: normal !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  color: #a6a6ae !important;
  background: transparent !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 13.5px !important;
  line-height: 1.38 !important;
  letter-spacing: .025em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 8px rgba(244,244,245,.09) !important;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, text-shadow .18s ease !important;
}

.nav-tabs .tab-btn::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: transparent;
  transition: .18s ease;
}

.nav-tabs .tab-btn:hover {
  color: #ffffff !important;
  border-color: #2d2d31 !important;
  background: rgba(255,255,255,.026) !important;
  transform: translateX(2px);
  text-shadow: 0 0 10px rgba(255,255,255,.20), 0 0 16px rgba(239,68,68,.10) !important;
}

.nav-tabs .tab-btn.active {
  color: #ffffff !important;
  border-color: #472124 !important;
  background: linear-gradient(90deg, rgba(127,29,29,.34), rgba(127,29,29,.075)) !important;
  box-shadow: inset 0 0 22px rgba(127,29,29,.08) !important;
  text-shadow: 0 0 9px rgba(255,255,255,.16), 0 0 18px rgba(239,68,68,.18) !important;
}

.nav-tabs .tab-btn.active::after {
  background: var(--accent-red);
  box-shadow: 0 0 11px var(--accent-red);
}

/* ---------- MAIN APP AREA ---------- */
main {
  width: calc(100% - var(--sidebar-width)) !important;
  max-width: none !important;
  margin: 0 0 0 var(--sidebar-width) !important;
  padding: 28px 30px 60px !important;
  min-height: 100vh;
  position: relative;
  z-index: 2 !important;
}

.tab-content { animation: bmcFade .2s ease; }
@keyframes bmcFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- CARDS / PANELS ---------- */
.card,
.movement-panel,
.money-chart-panel,
.loan-selected-items,
.loan-total-box,
.order-summary-box,
.manual-order-selected,
.movement-edit-items,
.sale-edit-items {
  border-radius: 0 !important;
}

.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(18,18,21,.96), rgba(10,10,12,.985)) !important;
  border: 1px solid #2b2b30 !important;
  box-shadow: 0 17px 48px rgba(0,0,0,.38) !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-red), transparent);
  box-shadow: 0 0 12px rgba(239,68,68,.28);
  pointer-events: none;
}

.card:hover {
  border-color: #34343a !important;
  background: linear-gradient(180deg, rgba(20,20,23,.98), rgba(11,11,13,.99)) !important;
}

.card-header {
  border-bottom: 1px solid #27272c !important;
  background: linear-gradient(90deg, rgba(127,29,29,.055), transparent 52%) !important;
}

.card-title,
.movement-panel-title,
.money-chart-title {
  color: #f4f4f5 !important;
  font-family: "Rajdhani", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase;
}

.dashboard-card-subtitle {
  color: #777780 !important;
  font-size: .75rem !important;
  line-height: 1.45;
}

/* ---------- STAT CARDS ---------- */
.stats-grid {
  gap: 13px !important;
}

.stat-card {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  border: 1px solid #2b2b30 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 100% 0, rgba(239,68,68,.08), transparent 42%),
    linear-gradient(160deg, #121215, #0a0a0c) !important;
  box-shadow: 0 15px 35px rgba(0,0,0,.32) !important;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}

.stat-card::before {
  width: 3px !important;
  top: 13px !important;
  bottom: 13px !important;
  height: auto !important;
  box-shadow: 0 0 14px currentColor;
}

.stat-label {
  color: #8c8c95 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

.stat-val {
  color: #f4f4f5 !important;
  font-family: "Rajdhani", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
  text-shadow: 0 0 13px rgba(255,255,255,.06);
}

/* ---------- TABLES ---------- */
.table-responsive {
  border-radius: 0 !important;
  scrollbar-color: #432025 #0b0b0d;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: rgba(5,5,6,.36);
  border: 1px solid #27272a !important;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #d6d6da !important;
  background: #0a0a0c !important;
  border-bottom: 1px solid #642427 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .095em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 -1px 0 rgba(239,68,68,.08);
}

td {
  color: #d8d8dc;
  border-bottom: 1px solid #202024 !important;
  font-size: .82rem;
}

tbody tr {
  transition: background .16s ease, box-shadow .16s ease;
}

tbody tr:hover {
  background: linear-gradient(90deg, rgba(127,29,29,.16), rgba(245,158,11,.025)) !important;
  box-shadow: inset 2px 0 0 rgba(239,68,68,.70);
}

tbody tr:last-child td { border-bottom: 0 !important; }

/* ---------- FORMS ---------- */
.form-group label {
  color: #aaaab2 !important;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .055em;
}

.form-control,
input,
select,
textarea {
  border-radius: 0 !important;
}

.form-control {
  color: #f4f4f5 !important;
  background: #09090b !important;
  border: 1px solid #343439 !important;
  outline: none !important;
  transition: border-color .17s ease, box-shadow .17s ease, background .17s ease;
}

.form-control::placeholder { color: #5f5f68 !important; }

.form-control:focus {
  background: #0c0c0f !important;
  border-color: #7f292d !important;
  box-shadow: 0 0 0 1px rgba(239,68,68,.12), 0 0 18px rgba(127,29,29,.13) !important;
}

select.form-control option {
  color: #f4f4f5;
  background: #0b0b0d;
}

/* ---------- BUTTONS ---------- */
.btn {
  border-radius: 0 !important;
  border: 1px solid #3b3b40 !important;
  background: #111114 !important;
  color: #f4f4f5 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
  letter-spacing: .035em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  box-shadow: 0 8px 20px rgba(0,0,0,.23);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: #6f3538 !important;
  box-shadow: 0 0 0 1px rgba(239,68,68,.10), 0 0 18px rgba(239,68,68,.12), 0 10px 24px rgba(0,0,0,.35) !important;
}

.btn:active { transform: translateY(1px) scale(.992); }

.btn-green {
  border-color: #235b38 !important;
  background: linear-gradient(180deg, #12321f, #0d2417) !important;
  color: #a7f3c2 !important;
}
.btn-green:hover { border-color: #22c55e !important; box-shadow: 0 0 18px rgba(34,197,94,.15) !important; }

.btn-red {
  border-color: #652428 !important;
  background: linear-gradient(180deg, #351416, #271012) !important;
  color: #fecaca !important;
}
.btn-red:hover { border-color: #ef4444 !important; box-shadow: 0 0 18px rgba(239,68,68,.18) !important; }

.btn-gold {
  border-color: #6d4a13 !important;
  background: linear-gradient(180deg, #39270b, #281c08) !important;
  color: #fde68a !important;
}
.btn-gold:hover { border-color: #f59e0b !important; box-shadow: 0 0 18px rgba(245,158,11,.16) !important; }

.btn-blue {
  border-color: #27455f !important;
  background: linear-gradient(180deg, #142738, #0f1c28) !important;
  color: #bae6fd !important;
}
.btn-blue:hover { border-color: #60a5fa !important; box-shadow: 0 0 18px rgba(96,165,250,.14) !important; }

.btn-purple {
  border-color: #67430e !important;
  background: linear-gradient(180deg, #34250e, #231a0b) !important;
  color: #fcd34d !important;
}

/* ---------- BADGES / STATUS ---------- */
.badge {
  border-radius: 0 !important;
  border: 1px solid #3a3a40 !important;
  background: #0b0b0d !important;
  font-family: "JetBrains Mono", monospace !important;
  font-weight: 900 !important;
  font-size: .67rem !important;
  letter-spacing: .055em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

.badge-green { color: #86efac !important; border-color: #245d37 !important; background: rgba(20,83,45,.20) !important; }
.badge-red { color: #fca5a5 !important; border-color: #6f262a !important; background: rgba(127,29,29,.20) !important; }
.badge-blue { color: #bae6fd !important; border-color: #29516b !important; background: rgba(14,116,144,.12) !important; }
.badge-black { color: #d4d4d8 !important; border-color: #404046 !important; background: #0a0a0c !important; }
.badge-white { color: #f4f4f5 !important; border-color: #52525b !important; background: #111114 !important; }
.badge-purple { color: #fcd34d !important; border-color: #6d4a13 !important; background: rgba(113,63,18,.18) !important; }

/* ---------- DASHBOARD ---------- */
.cash-flow-card,
.dashboard-input-wrapper .card {
  max-width: none !important;
}

.money-chart-grid { gap: 12px !important; }
.money-chart-panel {
  background: #0a0a0c !important;
  border: 1px solid #29292e !important;
  box-shadow: inset 0 0 28px rgba(0,0,0,.16);
}
.money-chart-title { font-size: .82rem !important; }
.flow-legend-item { color: #9b9ba4 !important; font-weight: 700; }

.dashboard-input-wrapper {
  margin-top: 18px !important;
}

#form-brangkas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 14px;
}
#form-brangkas .form-group { margin-bottom: 0 !important; }
#form-brangkas button[type="submit"] { grid-column: 1 / -1; min-height: 42px; margin-top: 4px; }

/* Keep Rekap Stok as its own menu. Dashboard contains no duplicate BMC/Boss stock panels. */
#stock-brangkas .vault-stock-grid { gap: 14px !important; }
#stock-brangkas .movement-panel {
  background: #0a0a0c !important;
  border: 1px solid #29292e !important;
  padding: 14px !important;
}

/* ---------- MOVEMENT / ORDERS / LOANS ---------- */
.stock-movement-page .movement-panel,
.loan-layout > .card,
.order-history-grid > .card {
  min-width: 0;
}

.movement-panel {
  background: #0b0b0d !important;
  border: 1px solid #2a2a2f !important;
}

.loan-total-box {
  background: #0a0a0c !important;
  border: 1px solid #343439 !important;
}

/* ---------- MODALS ---------- */
.modal {
  background: rgba(0,0,0,.82) !important;
  backdrop-filter: blur(7px);
}

.modal-content {
  border-radius: 0 !important;
  border: 1px solid #3a2a2d !important;
  background:
    radial-gradient(circle at 100% 0, rgba(127,29,29,.16), transparent 32%),
    linear-gradient(180deg, #111114, #09090b) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(239,68,68,.04) !important;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
}

.modal-content h3 {
  color: #f4f4f5 !important;
  text-transform: uppercase;
  letter-spacing: .045em;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
  :root { --sidebar-width: 310px; }
  main { padding: 22px 20px 50px !important; }
  header h1 { font-size: 16px !important; }
  .brand-icon { width: 46px !important; height: 56px !important; flex-basis: 46px !important; }
  #form-brangkas { grid-template-columns: 1fr; }
  #form-brangkas button[type="submit"] { grid-column: 1; }
}

@media (max-width: 900px) {
  :root { --sidebar-width: 100%; }
  body { display: block !important; }

  .site-watermark {
    left: 50% !important;
    top: 58% !important;
    width: min(72vw, 560px) !important;
  }

  header {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 118px !important;
    padding: 17px 16px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #2c2c31 !important;
  }

  header h1 { min-height: 50px; font-size: 15px !important; }
  .brand-icon { width: 40px !important; height: 48px !important; flex-basis: 40px !important; }
  .header-status { grid-template-columns: 1fr auto !important; }
  #user-role { width: 150px !important; }

  .nav-tabs {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-height: none !important;
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid #2b2b30 !important;
    z-index: 35 !important;
  }

  .nav-label { display: none !important; }
  .nav-tabs .tab-btn {
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
  }

  main {
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 13px 46px !important;
  }

  .stats-grid,
  .grid-2,
  .grid-3,
  .money-chart-grid,
  .dashboard-insight-grid,
  .loan-layout,
  .vault-stock-grid {
    grid-template-columns: 1fr !important;
  }

  #form-brangkas { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  header h1 { font-size: 13px !important; letter-spacing: .025em !important; }
  .header-status { grid-template-columns: 1fr !important; }
  .header-status label { grid-column: 1 !important; }
  #user-role { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; }
  #status-koneksi { grid-column: 1 !important; grid-row: 3 !important; justify-self: stretch; text-align: center; }
  .card { clip-path: none; }
  .modal-content { clip-path: none; }
}




/* MEMBER IS THE DEFAULT ACCESS STATE */
.admin-only { display: none !important; }

/* =========================================================
   BMC TACTICAL TOAST NOTIFICATION
   ========================================================= */
.bmc-toast-root{
  position:fixed;
  top:22px;
  right:22px;
  z-index:999999;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(390px,calc(100vw - 32px));
  pointer-events:none;
}
.bmc-toast{
  --toast-accent:#d97706;
  position:relative;
  display:grid;
  grid-template-columns:34px 1fr 28px;
  align-items:center;
  gap:10px;
  min-height:64px;
  padding:13px 12px 13px 14px;
  background:linear-gradient(135deg,rgba(22,22,25,.98),rgba(8,8,10,.98));
  border:1px solid #34343a;
  border-left:3px solid var(--toast-accent);
  box-shadow:0 20px 55px rgba(0,0,0,.58),0 0 24px color-mix(in srgb,var(--toast-accent) 15%,transparent);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transform:translateX(28px);
  opacity:0;
  transition:opacity .2s ease,transform .2s ease;
  pointer-events:auto;
  overflow:hidden;
}
.bmc-toast::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,var(--toast-accent),transparent 72%);
  opacity:.9;
}
.bmc-toast.show{opacity:1;transform:translateX(0)}
.bmc-toast-success{--toast-accent:#22c55e}
.bmc-toast-error{--toast-accent:#ef4444}
.bmc-toast-warning{--toast-accent:#f59e0b}
.bmc-toast-info{--toast-accent:#38bdf8}
.bmc-toast-icon{
  width:30px;height:30px;
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--toast-accent) 60%,#333);
  color:var(--toast-accent);
  background:color-mix(in srgb,var(--toast-accent) 9%,transparent);
  font:900 17px/1 "Rajdhani",sans-serif;
  text-shadow:0 0 12px color-mix(in srgb,var(--toast-accent) 60%,transparent);
}
.bmc-toast-content{
  color:#f4f4f5;
  font:700 13px/1.45 "Rajdhani",sans-serif;
  letter-spacing:.035em;
}
.bmc-toast-close{
  width:26px;height:26px;
  border:0;background:transparent;color:#71717a;
  font:700 21px/1 sans-serif;
  cursor:pointer;
}
.bmc-toast-close:hover{color:#f4f4f5}
@media(max-width:640px){
  .bmc-toast-root{top:14px;right:14px;width:calc(100vw - 28px)}
}