:root{
  --bg:#0b0f14;
  --panel:#151515;
  --panel2:#101010;
  --text:#e6e6e6;
  --muted:#9aa0a6;
  --line:rgba(255,255,255,.10);

  --field:#1b1b1b;
  --field2:#171717;

  --sellBtn:#b91c1c;
  --sellBtn2:#991b1b;
  --buyBtn:#1d4ed8;
  --buyBtn2:#1e40af;

  --radius:14px;
}

html[data-theme="light"]{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#f3f5f9;
  --text:#0f172a;
  --muted:#475569;
  --line:rgba(15,23,42,.12);
  --field:#ffffff;
  --field2:#f5f7fb;

  --sellBtn:#ef4444;
  --sellBtn2:#dc2626;
  --buyBtn:#2563eb;
  --buyBtn2:#1d4ed8;
}

html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.app{display:flex;height:100vh;width:100%;overflow:hidden;}
.left{flex:1 1 auto;min-width:0;position:relative;border-right:1px solid var(--line);}
#tv_chart_container{width:100%;height:100%;}

.right{
  width:420px;
  flex:0 0 420px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  display:flex;
  flex-direction:column;
  position:relative;
  min-width:44px;
}

/* status */
#status{
  position:absolute;right:10px;top:10px;z-index:99999;
  background:rgba(0,0,0,.55);
  color:#fff;padding:8px 10px;border-radius:10px;
  font:12px system-ui;border:1px solid rgba(255,255,255,.10);
}
html[data-theme="light"] #status{
  background:rgba(255,255,255,.90);color:#0f172a;border-color:rgba(15,23,42,.12);
}

/* toast */
#toast{
  position:fixed;left:16px;bottom:16px;z-index:999999;
  background:rgba(0,0,0,.80);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;padding:10px 12px;border-radius:12px;
  font-size:13px;display:none;max-width:560px;line-height:1.35;
}
html[data-theme="light"] #toast{background:rgba(15,23,42,.92);}

/* ===== resize handle ===== */
.resizeHandle{
  width:8px;
  cursor:col-resize;
  background:transparent;
  position:relative;
  flex:0 0 8px;
}
.resizeHandle::before{
  content:"";
  position:absolute;top:0;bottom:0;left:50%;
  width:2px;transform:translateX(-50%);
  background:rgba(255,255,255,.10);
}
.resizeHandle:hover::before{background:rgba(255,255,255,.22);}
html[data-theme="light"] .resizeHandle::before{background:rgba(15,23,42,.14);}
html[data-theme="light"] .resizeHandle:hover::before{background:rgba(15,23,42,.26);}

/* =========================================================
   NOVO: Layouts dentro da barra do Charting Library
   (vai ser injetado via JS)
========================================================= */
.tvLayouts{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:10px; /* espaço antes do botão seguinte (busca rápida) */
}

.tvLayouts .layoutGroup{display:flex;align-items:center;gap:8px;}

.tvLayouts .layoutBtn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#e6e6e6;
  border-radius:10px;
  height:28px;
  padding:0 10px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}
.tvLayouts .layoutBtn:hover{background:rgba(255,255,255,.10);}

.tvLayouts .layoutSave{
  border:none;
  background:transparent;
  color:#3b82f6;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  height:28px;
  padding:0 4px;
}
.tvLayouts .layoutSave:hover{text-decoration:underline;}

.tvLayouts .layoutPills{display:flex;align-items:center;gap:8px;}
.tvLayouts .layoutPill{
  width:24px;height:24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#e6e6e6;
  font-weight:900;
  font-size:11px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.tvLayouts .layoutPill:hover{background:rgba(255,255,255,.10);}
.tvLayouts .layoutPill.isActive{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.14);
}

.tvLayoutsMenu{
  position:absolute;
  top:34px; /* relativo ao container injetado */
  left:0;
  width:220px;
  background:#111;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  z-index:999999;
}
html[data-theme="light"] .tvLayoutsMenu{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 12px 30px rgba(15,23,42,.12);
}

.tvLayoutsItem{
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:inherit;
  font-weight:800;
  font-size:13px;
}
.tvLayoutsItem:hover{background:rgba(255,255,255,.06);}
html[data-theme="light"] .tvLayoutsItem:hover{background:rgba(15,23,42,.06);}
.tvLayoutsItemSmall{color:var(--muted);font-weight:700;font-size:12px;}

/* ===== Ticket ===== */
.tvHdr{display:flex;align-items:center;justify-content:space-between;padding:14px 0px 0px;}
.tvHdrLeft{display:flex;gap:10px;align-items:center;}
.tvBrand{width:44px;height:44px;border-radius:9px;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;}
.tvSymLine{display:flex;flex-direction:column;gap:2px;}
.tvSym{font-weight:800;font-size:14px;letter-spacing:.2px;}
.tvEnv{font-size:12px;color:var(--muted);}
.tvHdrRight{display:flex;gap:8px;}
.tvIcon{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;}
.tvIcon:hover{background:rgba(255,255,255,.10);}

.tvBidAsk{padding:0 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch;}
.tvSideBtn{border:none;border-radius:14px;padding:5px 14px 8px;cursor:pointer;user-select:none;background:linear-gradient(180deg,#353535,#2d2d2d);min-height:0px;display:flex;flex-direction:column;justify-content:space-between;}
.tvSell{text-align:left;}
.tvBuy{text-align:right;}
.tvSell.isActive{background:linear-gradient(180deg,var(--sellBtn),var(--sellBtn2));outline:none;}
.tvBuy.isActive{background:linear-gradient(180deg,var(--buyBtn),var(--buyBtn2));outline:none;}
.tvSideLbl{font-size:12px;opacity:.95;}
.tvSidePx{margin-top:4px;font-size:12px;}
.tvSell.isActive{outline:2px solid rgba(255,255,255,.20);}
.tvBuy.isActive{outline:2px solid rgba(255,255,255,.20);}
.tvSpread{align-self:center;justify-self:center;padding:3px 10px;border-radius:10px;background:#000;color:#fff;font-weight:800;font-size:12px;border:1px solid rgba(255,255,255,.10);transform:translateY(-6px);}

.tvTypeTabs{position:relative;margin-top:10px;padding:0 12px 0;display:flex;border-bottom:1px solid var(--line);}
.tvTypeTab{flex: 1 1 0%;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: rgb(209, 212, 220);
    font-weight: 700;
    cursor: pointer;}
.tvTypeTab.isOn{color:var(--text);}
.tvTypeUnderline{position:absolute;left:12px;bottom:-1px;width:calc((100% - 24px)/3);height:4px;background:#e6e6e6;border-radius:4px;transition:transform .18s ease;}
html[data-theme="light"] .tvTypeUnderline{background:#0f172a;}

.tvForm{padding:12px;flex:1 1 auto;padding-bottom:110px;}
.tvFieldRow{margin-top:14px;}
.tvFieldTop{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px;margin-bottom:8px;}
.tvFieldName{font-weight:700;}
.tvFieldTopRight{opacity:.8;}
.tvTopDrop{border:none;background:transparent;color:var(--muted);font-weight:700;font-size:14px;cursor:pointer;}
.tvField{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--field),var(--field2));border:1px solid var(--line);border-radius:12px;padding:10px 10px;}
.tvFieldInput{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-weight:800;font-size:16px;min-width:0;}
.tvSelect{appearance:none;}
.tvFieldRight{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:700;font-size:14px;white-space:nowrap;}
.tvFieldHint{opacity:.95;}
.tvChevron{opacity:.8;}
.tvSpinner{display:flex;flex-direction:column;gap:2px;padding-left:8px;border-left:1px solid var(--line);color:var(--muted);font-size:10px;line-height:10px;}
.tvSpinUp,.tvSpinDn{display:block;transform:scaleX(1.1);}

.tvSectionHdr{margin-top:18px;display:flex;align-items:center;justify-content:space-between;color:var(--text);}
.tvSectionTitle{font-weight:900;font-size:16px;}
.tvCollapseBtn{border:none;background:transparent;color:var(--muted);font-weight:900;font-size:16px;cursor:pointer;}
.tvExitRow{margin-top:12px;}
.tvExitTop{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px;margin-bottom:8px;}
.tvExitName{font-weight:700;}
.tvExitField{opacity:.95;}
.tvExitField .tvFieldInput:disabled{opacity:.55;}

.tvSwitch{position:relative;display:inline-block;width:46px;height:26px;}
.tvSwitch input{opacity:0;width:0;height:0;}
.tvSwitchUi{position:absolute;cursor:pointer;inset:0;background:#2b2b2b;border:1px solid var(--line);border-radius:999px;transition:.15s;}
.tvSwitchUi:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:2px;background:#8e8e8e;border-radius:999px;transition:.15s;}
.tvSwitch input:checked + .tvSwitchUi{background:#1c3d7a;}
.tvSwitch input:checked + .tvSwitchUi:before{transform:translateX(20px);background:#78a7ff;}
html[data-theme="light"] .tvSwitchUi{background:#e6e8ef;}
html[data-theme="light"] .tvSwitchUi:before{background:#9aa3b2;}

.tvAddLevel{margin-top:14px;border:none;background:transparent;color:#58a6ff;font-weight:800;font-size:16px;cursor:pointer;padding:8px 0;text-align:left;}
.mt16{margin-top:16px;}

.tvInfo{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.tvInfoTitle{color:var(--muted);font-weight:900;font-size:14px;margin-bottom:10px;}
.tvInfoRow{display:flex;align-items:center;justify-content:space-between;padding:8px 0;color:var(--muted);font-weight:700;}
.tvInfoVal{color:var(--text);font-weight:900;}

.tvBottom{position:absolute;left:0;right:0;bottom:0;padding:12px;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35));}
html[data-theme="light"] .tvBottom{background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85));}
.tvPlaceBtn{width:100%;border:none;border-radius:16px;color:#fff;padding:12px 12px;cursor:pointer;background:linear-gradient(180deg,#3a3f4b,#2f3440);}
.tvPlaceBtn:disabled{opacity:.55;cursor:not-allowed;}
.tvPlaceBtn.isBuy{background:linear-gradient(180deg,var(--buyBtn),var(--buyBtn2));}
.tvPlaceBtn.isSell{background:linear-gradient(180deg,var(--sellBtn),var(--sellBtn2));}
.tvPlaceMain{font-weight:1000;font-size:18px;letter-spacing:.2px;}
.tvPlaceSub{margin-top:4px;font-weight:800;font-size:13px;opacity:.95;}

.right.isCollapsed{width:132px !important;flex:0 0 132px !important;}
.right.isCollapsed .tvForm,
.right.isCollapsed .tvBidAsk,
.right.isCollapsed .tvTypeTabs,
.right.isCollapsed .tvBottom{display:none;}
.right.isCollapsed .tvHdr{padding:0px 0px;}
.right.isCollapsed .tvHdrLeft{display:none;}
.right.isCollapsed .tvHdrRight{width:100%;justify-content:center;}

.tvCollapsedBar{display:none;position:absolute;inset:46px 0 0 0;padding:10px 8px;border-left:1px solid var(--line);align-items:center;justify-content:flex-start;gap:10px;flex-direction:column;}
.right.isCollapsed .tvCollapsedBar{display:flex;}
.tvCollapsedBtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;}
.tvCollapsedBtn:hover{background:rgba(255,255,255,.10);}
.tvCollapsedText{font-weight:900;color:var(--muted);font-size:12px;writing-mode:vertical-rl;transform:rotate(180deg);}
/* Layouts (injetado na topbar do TradingView) */
.tvLayouts{display:flex;align-items:center;gap:10px;margin-right:10px}
.tvLayouts .layoutGroup{display:flex;align-items:center;gap:8px}
.tvLayouts .layoutBtn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#e6e6e6;
  border-radius:10px;height:28px;padding:0 10px;
  font-weight:900;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:8px
}
.tvLayouts .layoutSave{
  border:none;background:transparent;color:#3b82f6;font-weight:900;font-size:12px;
  cursor:pointer;height:28px;padding:0 4px
}
.tvLayouts .layoutPills{display:flex;align-items:center;gap:8px}
.tvLayouts .layoutPill{
  width:24px;height:24px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#e6e6e6;font-weight:900;font-size:11px;
  cursor:pointer;display:flex;align-items:center;justify-content:center
}
.tvLayouts .layoutPill.isActive{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.14)}
.tvLayoutsMenu{
  position:absolute;top:34px;left:0;width:220px;background:#111;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.35);z-index:999999
}
.tvLayoutsItem{padding:10px 12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;color:inherit;font-weight:800;font-size:13px}
.tvLayoutsItem:hover{background:rgba(255,255,255,.06)}
.tvLayoutsItemSmall{opacity:.7;font-weight:700;font-size:12px}
/* ===== FIX: slot do TradingView (createButton) não ficar cinzento ===== */
.tvLayoutsSlot{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* garante que o nosso bloco fica dark e não herda fundo claro/cinzento */
.tvLayouts{
  background: transparent;
  color: #e6e6e6;
}

/* botão "Diário" mais dark (estilo TV) */
.tvLayouts .layoutBtn{
  background: rgba(19, 23, 34, .92) !important; /* dark TV-ish */
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #e6e6e6 !important;
}

/* pills também mais dark */
.tvLayouts .layoutPill{
  background: rgba(19, 23, 34, .92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #e6e6e6 !important;
}

/* dropdown sempre dark */
.tvLayoutsMenu{
  background: #0b0f14 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
/* ===== Layouts TV-like (Diário em cima, Salvar em baixo) ===== */
.tvLayoutsSlot{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.tvLayouts{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

/* Coluna esquerda: "Diário ▾" + "Salvar" */
.tvLayoutCol{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  margin-right:6px;
}

.tvLayoutNameBtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border: none;
  background: transparent;
  color: #e6e6e6;
  font-weight:900;
  font-size:14px;
  padding: 0;
  cursor:pointer;
}
.tvLayoutCaret{ opacity:.7; font-weight:900; }

.tvLayoutSaveLink{
  border:none;
  background:transparent;
  color:#3b82f6;
  font-weight:800;
  font-size:12px;
  padding:0;
  cursor:pointer;
  text-align:left;
}
.tvLayoutSaveLink:hover{ text-decoration: underline; }

/* Pills TV-like */
.tvLayouts .layoutPills{display:flex;align-items:center;gap:8px}
.tvLayouts .layoutPill{
  width:22px;height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#e6e6e6;
  font-weight:900;
  font-size:11px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.tvLayouts .layoutPill:hover{background:rgba(255,255,255,.10)}
.tvLayouts .layoutPill.isActive{
  border-color:rgba(255,255,255,.30);
  background:rgba(255,255,255,.14);
}

/* Dropdown menu (dark) */
.tvLayoutsMenu{
  position:absolute;
  top:30px;
  left:0;
  width:220px;
  background:#0b0f14 !important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  z-index:999999;
}
.tvLayoutsItem{
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#e6e6e6;
  font-weight:800;
  font-size:13px;
}
.tvLayoutsItem:hover{background:rgba(255,255,255,.06)}
html, body { background: #0b0f14 !important; }
#tv_chart_container { background: #0b0f14 !important; }