/* Back Future Draw Engine R8 */
#chart{position:relative}
.bfDrawCanvasR8{position:absolute;inset:0;z-index:18;pointer-events:none}
.bfDrawMenuR8{max-height:min(70vh,620px)!important;overflow:auto!important;min-width:330px!important;padding:8px!important}
.bfDrawQuick{display:flex;gap:6px;position:sticky;top:0;z-index:3;padding:4px 0 8px;background:inherit}
.bfDrawQuick button,.bfDrawGrid button,.bfPropActions button,.bfTradeLevels button{border:1px solid rgba(100,116,139,.35);border-radius:8px;background:transparent;color:inherit;padding:7px 9px;cursor:pointer;font:inherit}
.bfDrawQuick button.active,.bfDrawGrid button.active{outline:2px solid #3b82f6}
.bfDrawCat{border-top:1px solid rgba(100,116,139,.2);padding-top:5px;margin-top:4px}
.bfDrawCat summary{cursor:pointer;font-weight:700;padding:6px 4px}
.bfDrawGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:3px}
.bfDrawGrid button{text-align:left;white-space:normal}
.bfDrawPanelR8{position:absolute;right:12px;top:64px;z-index:40;width:min(360px,calc(100% - 24px));max-height:70%;overflow:auto;background:rgba(255,255,255,.98);color:#0f172a;border:1px solid #cbd5e1;border-radius:12px;box-shadow:0 18px 48px rgba(15,23,42,.2);padding:10px}
.chartWrap.bfProDark .bfDrawPanelR8{background:rgba(15,23,42,.98);color:#e2e8f0;border-color:#334155}
.bfDrawPanelHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bfDrawPanelHead>button{border:0;background:transparent;font-size:22px;color:inherit;cursor:pointer}
.bfDrawLayerRow{display:grid;grid-template-columns:30px 30px 1fr auto;gap:5px;align-items:center;padding:5px;border-radius:7px;cursor:pointer}
.bfDrawLayerRow.active{background:rgba(59,130,246,.14)}
.bfDrawLayerRow button{border:0;background:transparent;color:inherit;cursor:pointer}
.bfDrawLayerRow small{opacity:.65}
.bfDrawPropsR8 label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:7px 0;font-size:12px}
.bfDrawPropsR8 input,.bfDrawPropsR8 select{min-width:0;max-width:210px;border:1px solid #cbd5e1;border-radius:7px;padding:5px;background:transparent;color:inherit}
.bfPropRow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.bfPropRow label{display:block}
.bfPropRow input{width:100%;box-sizing:border-box}
.bfPointBox{border-top:1px solid #cbd5e1;border-bottom:1px solid #cbd5e1;padding:7px 0;margin:8px 0}
.bfPointEdit{display:grid;grid-template-columns:28px 1fr 1fr;gap:4px;margin-top:4px}
.bfPointEdit input{width:100%;box-sizing:border-box;font-size:11px}
.bfPropActions,.bfTradeLevels{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.bfTradeLevels small{width:100%;opacity:.75}
.bfDrawContextR8{position:absolute;z-index:60;display:flex;flex-direction:column;min-width:190px;padding:6px;background:#fff;color:#0f172a;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 12px 36px rgba(15,23,42,.22)}
.chartWrap.bfProDark .bfDrawContextR8{background:#0f172a;color:#e2e8f0;border-color:#334155}
.bfDrawContextR8 button{border:0;background:transparent;color:inherit;text-align:left;padding:7px;border-radius:6px;cursor:pointer}
.bfDrawContextR8 button:hover{background:rgba(59,130,246,.12)}
.bfDrawToast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:99999;background:#0f172a;color:#fff;border-radius:10px;padding:10px 14px;box-shadow:0 12px 30px rgba(0,0,0,.25);font:600 13px system-ui}
.bfDrawToast.alert{background:#b45309}.bfDrawToast.warn{background:#991b1b}
@media(max-width:800px){.bfDrawGrid{grid-template-columns:1fr}.bfDrawMenuR8{min-width:280px!important}.bfDrawPanelR8{top:100px}}

/*
 * BACKFUTURE_DRAW_ENGINE_R8_MENU_CONTRAST_FIX_R1
 *
 * R8 menu must remain readable regardless of the
 * legacy R7 toolbar color inheritance.
 */

/* ---------- LIGHT CHART ---------- */

.bfR76DrawMenu.bfDrawMenuR8{
  background:#ffffff !important;
  color:#0f172a !important;

  border-color:#cbd5e1 !important;

  min-width:440px !important;
  max-width:min(
    540px,
    calc(100vw - 24px)
  ) !important;

  box-shadow:
    0 18px 50px
    rgba(15,23,42,.22) !important;
}

.bfR76DrawMenu.bfDrawMenuR8
.bfDrawQuick{
  background:#ffffff !important;
}

.bfR76DrawMenu.bfDrawMenuR8
.bfDrawCat{
  color:#0f172a !important;
}

.bfR76DrawMenu.bfDrawMenuR8
.bfDrawCat summary{
  color:#1e293b !important;
  opacity:1 !important;

  font-weight:800 !important;

  padding:9px 7px !important;
}

.bfR76DrawMenu.bfDrawMenuR8
button{
  color:#0f172a !important;

  background:#f8fafc !important;

  border-color:#cbd5e1 !important;

  opacity:1 !important;
}

.bfR76DrawMenu.bfDrawMenuR8
button:hover{
  color:#020617 !important;

  background:#e2e8f0 !important;

  border-color:#94a3b8 !important;
}

.bfR76DrawMenu.bfDrawMenuR8
button.active{
  color:#0f172a !important;

  background:#dbeafe !important;

  border-color:#3b82f6 !important;

  outline:
    2px solid
    rgba(59,130,246,.40) !important;
}

.bfR76DrawMenu.bfDrawMenuR8
button:disabled{
  color:#64748b !important;

  background:#f8fafc !important;

  opacity:.48 !important;

  cursor:not-allowed !important;
}

/* ---------- DARK CHART ---------- */

.chartWrap.bfProDark
.bfR76DrawMenu.bfDrawMenuR8{
  background:#0f172a !important;
  color:#e2e8f0 !important;

  border-color:#334155 !important;

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.42) !important;
}

.chartWrap.bfProDark
.bfR76DrawMenu.bfDrawMenuR8
.bfDrawQuick{
  background:#0f172a !important;
}

.chartWrap.bfProDark
.bfR76DrawMenu.bfDrawMenuR8
.bfDrawCat{
  color:#e2e8f0 !important;
}

.chartWrap.bfProDark
.bfR76DrawMenu.bfDrawMenuR8
.bfDrawCat summary{
  color:#e2e8f0 !important;
}

.chartWrap.bfProDark
.bfR76DrawMenu.bfDrawMenuR8
button{
  color:#e2e8f0 !important;

  background:#111f33 !important;

  border-color:#334155 !important;

  opacity:1 !important;
}

.chartWrap.bfProDark
.bfR76DrawMenu.bfDrawMenuR8
button:hover{
  color:#ffffff !important;

  background:#1e293b !important;

  border-color:#64748b !important;
}

.chartWrap.bfProDark
.bfR76DrawMenu.bfDrawMenuR8
button.active{
  color:#ffffff !important;

  background:#1e3a5f !important;

  border-color:#60a5fa !important;
}

.chartWrap.bfProDark
.bfR76DrawMenu.bfDrawMenuR8
button:disabled{
  color:#94a3b8 !important;

  background:#111827 !important;

  opacity:.42 !important;
}

/* ---------- MENU DETAILS ---------- */

.bfR76DrawMenu.bfDrawMenuR8
.bfDrawGrid{
  gap:7px !important;
}

.bfR76DrawMenu.bfDrawMenuR8
.bfDrawGrid button{
  min-height:42px !important;

  padding:9px 11px !important;

  line-height:1.25 !important;

  font-weight:650 !important;
}