
.livechart-draw-toolbar{
  display:flex; flex-direction:column; align-items:center;
  flex:0 0 var(--draw-rail-width,72px); width:var(--draw-rail-width,72px); gap:4px; padding:6px 0;
  background:var(--panel); border:1px solid var(--line-soft);
}
.livechart-draw-toolbar[hidden]{ display:none !important; }
.livechart-draw-visibility-btn:not(.toolbar-btn--active) .toolbar-btn__icon{ opacity:.58; }
.livechart-draw-reveal-btn{
  position:absolute; top:8px; left:4px; z-index:9;
  box-sizing:border-box; max-width:calc(100% - 8px);
  height:30px; display:flex; align-items:center; gap:5px;
  padding:0 8px 0 6px;
  border:1px solid rgba(255,200,87,.55); border-radius:4px;
  background:rgba(12,14,18,.96); color:var(--signal);
  box-shadow:0 5px 16px rgba(0,0,0,.42);
  cursor:pointer; font:700 9px/1 var(--font-mono); white-space:nowrap;
}
.livechart-draw-reveal-btn[hidden]{ display:none !important; }
.livechart-draw-reveal-btn:hover,
.livechart-draw-reveal-btn:focus-visible{ background:var(--signal-soft); outline:none; }
.livechart-draw-reveal-btn .th-draw-icon{ width:16px !important; min-width:16px; height:16px !important; }
.livechart-chart-row--side-right .livechart-draw-reveal-btn{
  left:auto; right:4px; padding:0 6px 0 8px;
}
.livechart-chart-row--side-left .livechart-draw-toolbar{ order:0; border-right:none; }
.livechart-chart-row--side-right .livechart-draw-toolbar{ order:1; border-left:none; }
.livechart-draw-toolbar .toolbar-btn{ width:22px; height:22px; padding:0; justify-content:center; }
.livechart-draw-toolbar__spacer{ flex:1; }
.livechart-draw-toolbar__side-btn{
  flex:0 0 auto;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-soft); border-radius:4px;
  color:var(--mute); cursor:pointer;
}
.livechart-draw-toolbar__side-btn:hover{ color:var(--ink); border-color:var(--line); }
.livechart-chart-row--side-right .livechart-draw-toolbar__side-btn svg{ transform:scaleX(-1); }
/* display:contents so, on mobile, the trend-line/h-line/v-line buttons
   re-parented into this slot (see wireDrawToolbarPlacement() in
   live-chart.js) lay out exactly like any other direct child of
   .livechart-overflow-panel — same full-width row treatment share/
   fullscreen already get there — rather than as a nested flex row. */
.livechart-draw-mobile-slot{ display:contents; }
@media (max-width:640px){
  .livechart-draw-toolbar{ display:none; }
}
.livechart-card--compact-tools .livechart-draw-toolbar:not(.is-mobile){ display:none; }

/* ---------- professional shared drawing suite ---------- */
.th-drawing-overlay{
  position:absolute; inset:0; z-index:2;
  display:block; pointer-events:none;
}
.th-draw-object-menu{
  position:absolute; z-index:7;
  display:flex; align-items:stretch; gap:2px;
  max-width:calc(100% - 8px); box-sizing:border-box;
  padding:4px; border:1px solid var(--line); border-radius:6px;
  background:rgba(13,15,19,.98); box-shadow:0 10px 28px rgba(0,0,0,.52);
  pointer-events:auto; user-select:none;
}
.th-draw-object-menu[hidden],.th-draw-object-menu [hidden]{ display:none !important; }
.th-draw-object-menu button{
  min-width:52px; height:38px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:0 8px; border:1px solid transparent; border-radius:4px;
  background:transparent; color:var(--ink); cursor:pointer;
  font:700 9px/1 var(--font-mono); white-space:nowrap;
}
.th-draw-object-menu button:hover,.th-draw-object-menu button:focus-visible{
  color:var(--signal); border-color:rgba(255,200,87,.42); background:rgba(255,200,87,.09); outline:none;
}
.th-draw-object-menu button.is-active{ color:var(--signal); background:rgba(255,200,87,.09); }
.th-draw-object-menu button:disabled{ opacity:.35; cursor:default; }
.th-draw-object-menu .th-draw-icon{ width:18px !important; min-width:18px; height:18px !important; }
.th-draw-object-menu__delete{ color:var(--danger) !important; }
.th-draw-object-menu__delete:hover,.th-draw-object-menu__delete:focus-visible{
  border-color:rgba(255,91,110,.5) !important; background:rgba(255,91,110,.1) !important;
}
.livechart-draw-toolbar.th-draw-toolbar{
  position:relative; display:flex; flex:0 0 var(--draw-rail-width,72px); width:var(--draw-rail-width,72px);
  box-sizing:border-box; padding:3px 2px; overflow:visible;
  z-index:8;
}
.th-draw-mobile-toggle{ display:none; }
.th-draw-toolbar__body{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.th-draw-toolbar__body--shell{
  min-height:100%; justify-content:center; gap:8px;
  opacity:.72; pointer-events:none;
}
.th-draw-toolbar__body--shell small{
  max-width:62px; color:var(--mute); text-align:center;
  font:700 8px/1.25 var(--font-mono); letter-spacing:.02em;
}
.th-draw-shell-spinner{
  width:17px; height:17px; box-sizing:border-box;
  border:2px solid var(--line); border-top-color:var(--signal);
  border-radius:50% !important;
  animation:th-draw-shell-spin .8s linear infinite;
}
@keyframes th-draw-shell-spin{ to{ transform:rotate(360deg); } }
.th-draw-group{ position:relative; width:100%; display:flex; justify-content:center; }
.th-draw-category,.th-draw-action,.th-draw-mobile-toggle{
  position:relative; box-sizing:border-box; border:1px solid transparent; border-radius:3px;
  background:transparent; color:var(--ink); font:700 11px/1 var(--font-mono);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.th-draw-category,.th-draw-action{ width:var(--draw-button-width,64px); height:var(--draw-button-height,42px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:2px 1px; }
.th-draw-category > span,.th-draw-action > span{ display:block; line-height:0; pointer-events:none; }
.th-draw-category small,.th-draw-action small{ display:block; max-width:calc(var(--draw-button-width,64px) - 4px); overflow:hidden; color:var(--mute); font:700 var(--draw-label-size,8px)/1 var(--font-mono); letter-spacing:.015em; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.th-draw-icon{ display:block !important; width:var(--draw-icon-size,24px) !important; min-width:var(--draw-icon-size,24px); height:var(--draw-icon-size,24px) !important; color:inherit; overflow:visible; pointer-events:none; }
.th-draw-icon path,.th-draw-icon circle,.th-draw-icon rect,.th-draw-icon ellipse{ fill:none !important; stroke:currentColor !important; vector-effect:non-scaling-stroke; }
.th-draw-category:hover,.th-draw-action:hover,.th-draw-category.is-active,.th-draw-action.is-active,
.th-draw-category[aria-expanded="true"],.th-draw-toolbar [data-tool].is-active{
  color:var(--signal); border-color:rgba(255,200,87,.42); background:rgba(255,200,87,.09);
}
.th-draw-category:hover small,.th-draw-action:hover small,.th-draw-category[aria-expanded="true"] small,.th-draw-action.is-active small{ color:var(--signal); }
.th-draw-action:disabled{ opacity:.25; cursor:default; }
.th-draw-category i{
  position:absolute; right:1px; bottom:1px; width:0; height:0;
  border-left:3px solid transparent; border-top:3px solid currentColor; opacity:.6;
}
.th-draw-divider{ width:18px; height:1px; margin:1px 0; background:var(--line); flex:none; }
.th-draw-flyout{
  display:none; position:absolute; left:var(--draw-flyout-offset,70px); top:-3px; z-index:30;
  width:300px; max-height:480px; overflow:auto; box-sizing:border-box;
  padding:6px; border:1px solid var(--line); border-radius:5px;
  background:rgba(13,15,19,.98); box-shadow:0 12px 32px rgba(0,0,0,.48);
}
.livechart-chart-row--side-right .th-draw-flyout{ left:auto; right:var(--draw-flyout-offset,70px); }
.th-draw-group.is-open .th-draw-flyout{ display:grid; grid-template-columns:1fr; gap:2px; }
.th-draw-flyout strong{
  padding:4px 7px 6px; color:var(--mute-dim); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase;
}
.th-draw-flyout button{
  min-height:36px; display:grid; grid-template-columns:40px 1fr; align-items:center;
  padding:3px 7px; border:0; border-radius:4px; background:transparent;
  color:var(--ink); text-align:left; cursor:pointer; font-size:12.5px;
}
.th-draw-flyout button:hover,.th-draw-flyout button.is-active{ background:rgba(255,255,255,.055); color:var(--signal); }
.th-draw-flyout button:disabled{ opacity:.3; cursor:default; }
.th-draw-flyout button b{ display:grid; place-items:center; color:var(--signal); }
.th-draw-flyout button b .th-draw-icon{ width:21px; height:21px; }
.th-draw-style-panel{
  position:absolute; z-index:31; left:var(--draw-rail-width,72px); bottom:0; width:280px; box-sizing:border-box;
  padding:9px; border:1px solid var(--line); border-radius:5px;
  background:rgba(13,15,19,.98); box-shadow:0 12px 32px rgba(0,0,0,.48);
}
.livechart-chart-row--side-right .th-draw-style-panel{ left:auto; right:var(--draw-rail-width,72px); }
.th-draw-style-panel__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; color:var(--ink); font-size:11px; }
.th-draw-style-panel__head button{ width:22px; height:22px; padding:0; border:0; background:transparent; color:var(--mute); cursor:pointer; font-size:17px; }
.th-draw-style-panel label{ display:grid; grid-template-columns:62px 1fr; align-items:center; gap:7px; min-height:30px; color:var(--mute); font-size:10px; }
.th-draw-style-panel input[type="color"]{ width:100%; height:24px; padding:1px; border:1px solid var(--line); background:var(--void); }
.th-draw-style-panel input[type="range"]{ width:100%; accent-color:var(--signal); }
.th-draw-width-control{ display:grid; grid-template-columns:minmax(0,1fr) 58px; align-items:center; gap:7px; min-width:0; }
.th-draw-width-control input[type="number"]{ width:58px; height:25px; box-sizing:border-box; padding:2px 5px; border:1px solid var(--line); border-radius:3px; background:var(--void); color:var(--ink); font:10px var(--font-mono); text-align:right; }
.th-draw-width-control input[type="number"]:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 1px var(--signal-soft); }
.th-draw-style-panel select{ height:25px; border:1px solid var(--line); border-radius:3px; background:var(--void); color:var(--ink); font-size:10px; }
.th-draw-style-lock{ width:100%; min-height:34px; margin-top:6px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); border-radius:4px; background:var(--panel); color:var(--ink); cursor:pointer; font-size:11px; }
.th-draw-style-lock .th-draw-icon{ width:17px; height:17px; }
.th-draw-style-lock.is-active{ color:var(--signal); border-color:rgba(255,200,87,.45); }

.livechart-draw-toolbar.th-draw-toolbar.is-mobile{
    display:flex !important; flex:0 0 34px; width:34px; height:34px;
    padding:0; border:0; background:transparent; z-index:45;
}
.th-draw-toolbar.is-mobile .th-draw-mobile-toggle{ display:grid; place-items:center; width:34px; height:34px; font-size:15px; border-color:var(--line); }
.th-draw-toolbar.is-mobile.is-open .th-draw-mobile-toggle{ color:var(--signal); border-color:var(--signal); }
.th-draw-toolbar.is-mobile .th-draw-toolbar__body{
    display:none; position:fixed; left:10px; right:10px; bottom:10px; z-index:90;
    width:auto; max-height:48vh; overflow-y:auto; box-sizing:border-box;
    grid-template-columns:repeat(5,minmax(42px,1fr)); align-items:start; gap:5px;
    padding:10px; border:1px solid var(--line); border-radius:8px;
    background:rgba(12,14,18,.98); box-shadow:0 16px 50px rgba(0,0,0,.62);
}
.th-draw-toolbar.is-mobile.is-open .th-draw-toolbar__body{ display:grid; }
.th-draw-toolbar.is-mobile .th-draw-recent,.th-draw-toolbar.is-mobile .th-draw-group{ width:100%; }
.th-draw-toolbar.is-mobile .th-draw-category,.th-draw-toolbar.is-mobile .th-draw-action{ width:100%; height:48px; border-color:var(--line-soft); font-size:11px; }
.th-draw-toolbar.is-mobile .th-draw-divider{ grid-column:1/-1; width:100%; margin:2px 0; }
.th-draw-toolbar.is-mobile .th-draw-flyout{
    position:fixed; left:10px !important; right:10px !important; top:auto; bottom:64px;
    width:auto; max-height:52vh; grid-template-columns:repeat(2,minmax(0,1fr));
}
.th-draw-toolbar.is-mobile .th-draw-flyout strong{ grid-column:1/-1; }
.th-draw-toolbar.is-mobile .th-draw-style-panel{
    position:fixed; left:10px !important; right:10px !important; top:auto; bottom:10px;
    width:auto; max-height:70vh; overflow:auto;
}
.livechart-draw-toolbar.th-draw-toolbar.is-mobile[hidden]{ display:none !important; }
.market-chart-row .livechart-draw-toolbar{height:100%;min-height:0;max-height:100%;align-self:stretch;background:var(--panel)}
@media (min-width:641px){
.market-chart-row .livechart-draw-toolbar.th-draw-toolbar:not(.is-mobile){--draw-rail-width:82px !important;--draw-button-width:74px !important;--draw-icon-size:18px !important;--draw-label-size:8px !important;--draw-flyout-offset:80px !important;flex:0 0 82px;width:82px;min-width:82px;height:100%;min-height:0;max-height:100%;overflow:visible}
.market-chart-row .livechart-draw-toolbar:not(.is-mobile)>.th-draw-toolbar__body{height:100%;min-height:0;justify-content:space-between;gap:0;overflow:visible}
.market-chart-row .livechart-draw-toolbar:not(.is-mobile)>.th-draw-toolbar__body>.th-draw-action,.market-chart-row .livechart-draw-toolbar:not(.is-mobile)>.th-draw-toolbar__body>.th-draw-group{flex:1 1 0;min-height:0;max-height:34px}
.market-chart-row .livechart-draw-toolbar:not(.is-mobile)>.th-draw-toolbar__body>.th-draw-group>.th-draw-category,.market-chart-row .livechart-draw-toolbar:not(.is-mobile)>.th-draw-toolbar__body>.th-draw-action{width:74px;height:100%;min-height:0;max-height:34px;padding:1px}
.market-chart-row .livechart-draw-toolbar:not(.is-mobile)>.th-draw-toolbar__body>.th-draw-divider{flex:0 0 1px;margin:0}
.market-chart-row .th-draw-category small,.market-chart-row .th-draw-action small{max-width:70px;overflow:visible;text-overflow:clip}
.market-chart-row .th-draw-flyout{width:min(320px,calc(100vw - 110px));max-width:calc(100vw - 110px);overflow-x:hidden;overflow-y:auto}
}
@media (max-width:640px){
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-category small,
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-action small{
    max-width:100%;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    line-height:1.1;
    text-align:center;
  }
}
@media (max-width:520px){
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-toolbar__body{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:390px){
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-toolbar__body{grid-template-columns:repeat(3,minmax(0,1fr));}
}


.th-draw-flyout__head{display:flex;align-items:center;gap:6px;min-width:0}
.th-draw-flyout__head strong{flex:1;min-width:0}
.th-draw-mobile-back,.th-draw-style-back{display:none}
@media (max-width:640px){
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-toolbar__body{max-height:min(58dvh,460px);overflow-x:hidden}
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-mobile-head{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;min-height:46px}
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-flyout{
    position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    grid-column:1/-1;width:100%;max-width:none;max-height:none;box-shadow:none;border:0;padding:0;background:transparent;overflow:visible;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-flyout__head{grid-column:1/-1;display:flex;align-items:center;min-height:40px;border-bottom:1px solid var(--line)}
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-mobile-back,
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-style-back{display:inline-grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink);font-size:18px}
  .market-chart-row .th-draw-toolbar.is-mobile.is-detail-open .th-draw-toolbar__body>.th-draw-recent,
  .market-chart-row .th-draw-toolbar.is-mobile.is-detail-open .th-draw-toolbar__body>.th-draw-divider,
  .market-chart-row .th-draw-toolbar.is-mobile.is-detail-open .th-draw-toolbar__body>.th-draw-action,
  .market-chart-row .th-draw-toolbar.is-mobile.is-detail-open .th-draw-toolbar__body>.th-draw-group:not(.is-open){display:none!important}
  .market-chart-row .th-draw-toolbar.is-mobile.is-detail-open .th-draw-toolbar__body>.th-draw-group.is-open{grid-column:1/-1;display:block;width:100%}
  .market-chart-row .th-draw-toolbar.is-mobile.is-detail-open .th-draw-toolbar__body>.th-draw-group.is-open>.th-draw-category{display:none!important}
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-style-panel{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;grid-column:1/-1;width:100%;max-width:none;max-height:none;box-shadow:none;border:0;padding:0;background:transparent;overflow:visible}
  .market-chart-row .th-draw-toolbar.is-mobile .th-draw-style-panel[hidden]{display:none!important}
  .market-chart-row .th-draw-toolbar.is-mobile.is-style-open .th-draw-toolbar__body>.th-draw-recent,
  .market-chart-row .th-draw-toolbar.is-mobile.is-style-open .th-draw-toolbar__body>.th-draw-divider,
  .market-chart-row .th-draw-toolbar.is-mobile.is-style-open .th-draw-toolbar__body>.th-draw-action,
  .market-chart-row .th-draw-toolbar.is-mobile.is-style-open .th-draw-toolbar__body>.th-draw-group{display:none!important}
}
