/* =============================================================================
static/dash/account_trading_chart.css
ART ARGENTUM — EXAMPLES CHART STUDIO v23
Client-aligned production stylesheet.

Visual contract:
- one rounded outer shell,
- neutral black-glass structural surfaces,
- rounded grey controls,
- no visible technical JSON filename,
- chart changes immediately after selecting an option.
============================================================================= */

:root{
  --acct-bg:#050607;
  --acct-shell:rgba(3,4,5,.988);
  --acct-board:rgba(0,0,0,.42);
  --acct-large:rgba(0,0,0,.58);
  --acct-item:rgba(0,0,0,.70);
  --acct-control:rgba(52,53,56,.82);
  --acct-control-hover:rgba(58,59,63,.90);
  --acct-control-focus:rgba(62,63,67,.96);

  --acct-line:rgba(255,255,255,.040);
  --acct-line-strong:rgba(255,255,255,.105);
  --acct-text:rgba(255,255,255,.94);
  --acct-soft:rgba(255,255,255,.66);
  --acct-muted:rgba(255,255,255,.39);
  --acct-faint:rgba(255,255,255,.24);

  --acct-green:#82ddb0;
  --acct-red:#eda6ae;
  --acct-gold:#ddc27f;
  --acct-blue:#bdd9ff;

  --acct-shell-radius:34px;
  --acct-control-radius:13px;
  --acct-canvas-radius:15px;

  --acct-font:var(
    --ui-font,
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif
  );

  --acct-mono:var(
    --mono-font,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace
  );
}

.acct-chart-root,
.acct-chart-root *,
.acct-chart-root *::before,
.acct-chart-root *::after{
  box-sizing:border-box;
  min-width:0;
}

.acct-chart-root{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  gap:0;
  width:100%;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--acct-shell-radius) !important;

  color:var(--acct-soft);
  background:
    radial-gradient(
      106% 84% at 94% -10%,
      rgba(255,255,255,.11),
      rgba(255,255,255,.025) 34%,
      transparent 63%
    ),
    radial-gradient(
      74% 58% at 2% 104%,
      rgba(255,255,255,.025),
      transparent 67%
    ),
    linear-gradient(
      150deg,
      rgba(255,255,255,.020),
      rgba(255,255,255,.003) 47%,
      rgba(0,0,0,.29)
    ),
    var(--acct-shell);

  box-shadow:
    0 44px 128px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.045);

  backdrop-filter:blur(30px) saturate(118%);
  -webkit-backdrop-filter:blur(30px) saturate(118%);
  font-family:var(--acct-font);
}

.acct-chart-root a{
  color:inherit;
  text-decoration:none;
}

.acct-chart-root button,
.acct-chart-root input,
.acct-chart-root textarea{
  font:inherit;
}

.acct-chart-root h1,
.acct-chart-root h2,
.acct-chart-root h3,
.acct-chart-root p{
  margin:0;
}

/* Loading veil used during automatic chart navigation. */
.acct-chart-root.is-chart-loading::after{
  content:"Loading chart…";
  position:absolute;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.58);
  color:rgba(255,255,255,.72);
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  pointer-events:all;
}

/* =============================================================================
HEADER
============================================================================= */

.acct-chart-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:28px 30px 22px;
  border:0;
  border-bottom:1px solid var(--acct-line);
  border-radius:0 !important;
  background:transparent;
  box-shadow:none;
}

.acct-chart-head-copy{
  display:flex;
  flex-direction:column;
  gap:7px;
  max-width:820px;
}

.acct-chart-kicker{
  color:var(--acct-muted);
  font-size:8px;
  font-weight:820;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.acct-chart-title{
  color:var(--acct-text);
  font-size:clamp(27px,3.4vw,48px);
  font-weight:520;
  letter-spacing:-.04em;
  line-height:1.02;
}

.acct-chart-subtitle{
  max-width:760px;
  color:var(--acct-muted);
  font-size:11.5px;
  line-height:1.58;
}

.acct-chart-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(82px,1fr));
  gap:0;
  min-width:min(100%,470px);
}

.acct-chart-stat{
  position:relative;
  padding:0 15px;
}

.acct-chart-stat:first-child{
  padding-left:0;
}

.acct-chart-stat:not(:last-child)::after{
  content:"";
  position:absolute;
  top:1px;
  right:0;
  bottom:1px;
  width:1px;
  background:var(--acct-line);
}

.acct-chart-stat-label{
  display:block;
  margin-bottom:5px;
  color:var(--acct-muted);
  font-size:7px;
  font-weight:760;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.acct-chart-stat-value{
  display:block;
  overflow:hidden;
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =============================================================================
TOP PICKERS
============================================================================= */

.acct-chart-controls{
  display:grid;
  grid-template-columns:minmax(150px,.7fr) minmax(260px,1.55fr) minmax(150px,.7fr);
  align-items:stretch;
  gap:12px;
  margin:18px 30px;
  padding:14px;
  border:0;
  border-radius:0 !important;
  background:var(--acct-board);
  box-shadow:
    0 18px 44px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.018);
  backdrop-filter:blur(18px) saturate(105%);
  -webkit-backdrop-filter:blur(18px) saturate(105%);
}

.acct-chart-control{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  min-height:76px;
  padding:12px 13px;
  border:0;
  border-radius:0 !important;
  background:rgba(0,0,0,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 22px rgba(0,0,0,.14);
}

.acct-chart-control:hover,
.acct-chart-control:focus-within{
  background:rgba(0,0,0,.80);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 12px 28px rgba(0,0,0,.24);
}

.acct-chart-label,
.acct-chart-side-title,
.acct-chart-section-title,
.acct-chart-canvas-title{
  color:rgba(255,255,255,.58);
  font-size:8px;
  font-weight:820;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* =============================================================================
ROUNDED GREY INPUTS
============================================================================= */

.acct-chart-input,
.acct-chart-select,
.acct-chart-select select,
.acct-chart-textarea,
.acct-chart-picker-summary{
  width:100%;
  min-height:44px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.075) !important;
  border-radius:var(--acct-control-radius) !important;
  outline:0 !important;
  background:var(--acct-control) !important;
  color:rgba(242,243,245,.90) !important;
  -webkit-text-fill-color:rgba(242,243,245,.90);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 6px 18px rgba(0,0,0,.15);
  caret-color:rgba(255,255,255,.92);
  color-scheme:dark;
  appearance:none;
  -webkit-appearance:none;
  font-size:12px;
  line-height:1.45;
  transition:
    background .17s ease,
    border-color .17s ease,
    box-shadow .17s ease;
}

.acct-chart-input:hover,
.acct-chart-select:hover,
.acct-chart-select select:hover,
.acct-chart-textarea:hover,
.acct-chart-picker-summary:hover{
  background:var(--acct-control-hover) !important;
  border-color:rgba(255,255,255,.11) !important;
}

.acct-chart-input:focus,
.acct-chart-select:focus,
.acct-chart-select select:focus,
.acct-chart-textarea:focus,
.acct-chart-picker[open] .acct-chart-picker-summary{
  background:var(--acct-control-focus) !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.045),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.22);
}

.acct-chart-input::placeholder,
.acct-chart-textarea::placeholder{
  color:rgba(210,212,216,.34);
  -webkit-text-fill-color:rgba(210,212,216,.34);
}

.acct-chart-textarea{
  min-height:126px;
  padding:13px 14px;
  resize:vertical;
  line-height:1.52;
}

.acct-chart-risk-input{
  font-variant-numeric:tabular-nums;
}

.acct-chart-select option,
.acct-chart-select optgroup{
  background:#17181b;
  color:var(--acct-text);
}

/* Dash dcc.Dropdown / React Select compatibility. */
.acct-chart-select .Select-control{
  min-height:44px !important;
  border:1px solid rgba(255,255,255,.075) !important;
  border-radius:var(--acct-control-radius) !important;
  background:var(--acct-control) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 6px 18px rgba(0,0,0,.15) !important;
}

.acct-chart-select.is-focused .Select-control,
.acct-chart-select .Select-control:hover{
  border-color:rgba(255,255,255,.18) !important;
  background:var(--acct-control-hover) !important;
}

.acct-chart-select .Select-value,
.acct-chart-select .Select-placeholder,
.acct-chart-select .Select-input{
  line-height:42px !important;
}

.acct-chart-select .Select-value-label,
.acct-chart-select .Select-placeholder,
.acct-chart-select .Select-input > input{
  color:rgba(242,243,245,.90) !important;
}

.acct-chart-select .Select-arrow{
  border-top-color:rgba(255,255,255,.48) !important;
}

.acct-chart-select .Select-menu-outer{
  z-index:80 !important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:12px !important;
  background:rgba(18,19,22,.99) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.58) !important;
}

.acct-chart-select .VirtualizedSelectOption,
.acct-chart-select .Select-option{
  background:transparent !important;
  color:var(--acct-soft) !important;
}

.acct-chart-select .VirtualizedSelectFocusedOption,
.acct-chart-select .Select-option.is-focused,
.acct-chart-select .Select-option.is-selected{
  background:rgba(255,255,255,.07) !important;
  color:var(--acct-text) !important;
}

/* =============================================================================
CUSTOM PICKER
============================================================================= */

.acct-chart-picker{
  position:relative;
  width:100%;
}

.acct-chart-picker-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  list-style:none;
  cursor:pointer;
}

.acct-chart-picker-summary::-webkit-details-marker{
  display:none;
}

.acct-chart-picker-current{
  overflow:hidden;
  color:var(--acct-text);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.acct-chart-picker-arrow{
  color:var(--acct-muted);
  font-size:9px;
  transition:transform .16s ease,color .16s ease;
}

.acct-chart-picker[open] .acct-chart-picker-arrow{
  color:rgba(255,255,255,.76);
  transform:rotate(180deg);
}

.acct-chart-picker-menu{
  position:absolute;
  z-index:90;
  top:calc(100% + 7px);
  left:0;
  right:0;
  display:grid;
  gap:4px;
  max-height:320px;
  padding:7px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.11);
  border-radius:12px !important;
  background:rgba(18,19,22,.99);
  box-shadow:0 24px 70px rgba(0,0,0,.62);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.16) transparent;
}

.acct-chart-picker-option{
  display:flex;
  align-items:center;
  min-height:38px;
  padding:0 11px;
  border:0;
  border-radius:9px !important;
  background:transparent;
  color:var(--acct-soft);
  font-size:11px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}

.acct-chart-picker-option:hover,
.acct-chart-picker-option:focus-visible{
  outline:0;
  background:rgba(255,255,255,.065);
  color:var(--acct-text);
}

.acct-chart-picker-option.is-selected{
  background:rgba(255,255,255,.11);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}

.acct-chart-picker-empty{
  padding:11px;
  color:var(--acct-muted);
  font-size:10px;
}

/* Apply Chart was removed from the renderer. Keep this fallback for stale HTML. */
#account-trading-chart-apply,
[data-aa-chart-apply="1"]{
  display:none !important;
}

/* =============================================================================
BUTTONS
============================================================================= */

.acct-chart-button,
.acct-chart-example-delete{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border:0 !important;
  border-radius:var(--acct-control-radius) !important;
  background:rgba(52,53,56,.74) !important;
  color:rgba(238,240,243,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 22px rgba(0,0,0,.16);
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}

.acct-chart-button:hover,
.acct-chart-button:focus-visible,
.acct-chart-example-delete:hover,
.acct-chart-example-delete:focus-visible{
  transform:translateY(-1px);
  outline:none;
  background:rgba(63,64,68,.88) !important;
  color:var(--acct-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 12px 28px rgba(0,0,0,.26);
}

.acct-chart-button--primary{
  background:rgba(72,73,77,.92) !important;
  color:#fff !important;
}

.acct-chart-button--ghost{
  background:rgba(0,0,0,.30) !important;
  color:var(--acct-muted);
}

.acct-chart-button.is-disabled,
.acct-chart-button:disabled,
.acct-chart-example-delete:disabled{
  opacity:.42;
  pointer-events:none;
  transform:none;
}

/* =============================================================================
MAIN WORKSPACE
============================================================================= */

.acct-chart-layout{
  display:grid;
  grid-template-columns:minmax(0,1.68fr) minmax(310px,.72fr);
  gap:14px;
  align-items:start;
  padding:0 30px 18px;
}

.acct-chart-main-card,
.acct-chart-side-card,
.acct-chart-saved-section{
  border:0;
  border-radius:0 !important;
  background:var(--acct-large);
  box-shadow:
    0 18px 42px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.022);
  backdrop-filter:blur(17px) saturate(108%);
  -webkit-backdrop-filter:blur(17px) saturate(108%);
}

.acct-chart-main-card,
.acct-chart-side-card{
  padding:18px;
}

.acct-chart-main-card:hover,
.acct-chart-side-card:hover,
.acct-chart-saved-section:hover{
  background:rgba(0,0,0,.64);
}

.acct-chart-canvas-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--acct-line);
}

/* Technical source / JSON filename is intentionally hidden. */
.acct-chart-source{
  display:none !important;
}

/* =============================================================================
MAIN CANDLE CHART
============================================================================= */

.acct-chart-canvas{
  position:relative;
  width:100%;
  height:520px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.055);
  border-radius:var(--acct-canvas-radius) !important;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 25%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.015),
      rgba(255,255,255,.004)
    ),
    #080a0d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 80px rgba(0,0,0,.14);
}

.acct-chart-grid-line{
  position:absolute;
  left:58px;
  right:22px;
  height:1px;
  background:rgba(255,255,255,.055);
  pointer-events:none;
}

.acct-chart-grid-line--25{top:25%}
.acct-chart-grid-line--50{top:50%}
.acct-chart-grid-line--75{top:75%}

.acct-chart-axis-label{
  position:absolute;
  left:9px;
  z-index:4;
  color:rgba(255,255,255,.46);
  font-size:9px;
  font-variant-numeric:tabular-nums;
}

.acct-chart-axis-label--top{top:10px}
.acct-chart-axis-label--mid{top:50%;transform:translateY(-50%)}
.acct-chart-axis-label--bottom{bottom:10px}

.acct-chart-candle{
  position:absolute;
  top:0;
  right:22px;
  bottom:0;
  left:58px;
  z-index:6;
  width:auto;
  pointer-events:none;
}

.acct-chart-candle-wick{
  position:absolute;
  width:1px;
  margin-left:-.5px;
  background:rgba(230,230,235,.55);
}

.acct-chart-candle-body{
  position:absolute;
  min-height:2px;
  border:1px solid rgba(235,235,240,.32);
  background:rgba(210,210,216,.22);
}

.acct-chart-candle.is-up .acct-chart-candle-wick{
  background:rgba(120,190,155,.72);
}

.acct-chart-candle.is-up .acct-chart-candle-body{
  border-color:rgba(135,210,170,.82);
  background:rgba(72,150,112,.78);
}

.acct-chart-candle.is-down .acct-chart-candle-wick{
  background:rgba(210,125,132,.72);
}

.acct-chart-candle.is-down .acct-chart-candle-body{
  border-color:rgba(225,135,142,.82);
  background:rgba(160,70,78,.78);
}

.acct-chart-candle.is-selected .acct-chart-candle-body,
.acct-chart-candle.is-selected .acct-chart-candle-wick{
  box-shadow:0 0 0 1px rgba(255,255,255,.34);
}

.acct-chart-candle.is-dimmed{
  opacity:.24;
}

/* =============================================================================
RISK LEVELS
============================================================================= */

.acct-chart-risk-line{
  position:absolute;
  left:58px;
  right:22px;
  z-index:12;
  display:none;
  height:1px;
  border-top:1px dashed rgba(255,255,255,.32);
  pointer-events:none;
}

.acct-chart-risk-line--entry{border-color:rgba(189,217,255,.72)}
.acct-chart-risk-line--sl{border-color:rgba(237,166,174,.76)}
.acct-chart-risk-line--tp{border-color:rgba(130,221,176,.76)}

.acct-chart-risk-badge{
  position:absolute;
  top:-10px;
  right:0;
  padding:2px 5px;
  border-radius:5px !important;
  background:#080a0d;
  color:var(--acct-red);
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.acct-chart-risk-badge--entry{color:var(--acct-blue)}
.acct-chart-risk-badge--tp{color:var(--acct-green)}

.acct-chart-risk-text{
  position:absolute;
  top:-10px;
  right:30px;
  color:var(--acct-muted);
  font-size:8px;
  font-variant-numeric:tabular-nums;
}

.acct-chart-selection-layer{
  position:absolute;
  top:0;
  right:22px;
  bottom:0;
  left:58px;
  z-index:20;
  cursor:crosshair;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.acct-chart-selection-rect{
  position:absolute;
  z-index:24;
  border:1px solid rgba(189,217,255,.92);
  border-radius:7px !important;
  background:rgba(125,175,255,.12);
  box-shadow:
    inset 0 0 0 1px rgba(189,217,255,.08),
    0 8px 24px rgba(0,0,0,.18);
  pointer-events:none;
}

.acct-chart-empty-canvas{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--acct-muted);
  font-size:11px;
}

.acct-chart-selection-summary{
  margin-top:11px;
  color:var(--acct-muted);
  font-size:9px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* =============================================================================
DETAILS PANEL
============================================================================= */

.acct-chart-side-card{
  display:grid;
  gap:11px;
}

.acct-chart-side-title{
  margin-bottom:3px;
  padding-bottom:11px;
  border-bottom:1px solid var(--acct-line);
  color:rgba(255,255,255,.70);
}

.acct-chart-side-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.acct-chart-side-half{
  display:grid;
  gap:7px;
}

.acct-chart-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:4px;
}

.acct-chart-feedback{
  min-height:18px;
  color:var(--acct-muted);
  font-size:10px;
  line-height:1.4;
}

.acct-chart-feedback.is-ok{color:var(--acct-green)}
.acct-chart-feedback.is-error{color:var(--acct-red)}
.acct-chart-feedback.is-info{color:var(--acct-blue)}

.acct-chart-hidden-input{
  display:none !important;
}

/* =============================================================================
SAVED EXAMPLES
============================================================================= */

.acct-chart-saved-section{
  margin:0 30px 30px;
  padding:18px;
}

.acct-chart-section-title{
  margin-bottom:14px;
  padding-bottom:11px;
  border-bottom:1px solid var(--acct-line);
  color:rgba(255,255,255,.66);
}

.acct-chart-examples-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.acct-chart-examples-empty{
  padding:22px 0;
  color:var(--acct-muted);
  font-size:11px;
}

.acct-chart-example-card{
  display:grid;
  grid-template-columns:minmax(220px,.9fr) minmax(0,1fr);
  grid-template-areas:
    "mini top"
    "mini summary"
    "mini prompt"
    "mini delete";
  gap:8px 14px;
  min-width:0;
  overflow:hidden;
  padding:13px;
  border:0;
  border-radius:0 !important;
  background:var(--acct-item);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022);
  transition:background .16s ease,box-shadow .16s ease,transform .16s ease;
}

.acct-chart-example-card:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 32px rgba(0,0,0,.24);
}

.acct-chart-example-top{
  grid-area:top;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.acct-chart-example-top strong{
  color:var(--acct-text);
  font-size:11px;
}

.acct-chart-example-date{
  color:var(--acct-muted);
  font-size:8px;
}

.acct-chart-example-summary{
  grid-area:summary;
  color:var(--acct-soft);
  font-size:10px;
  line-height:1.45;
}

.acct-chart-example-prompt{
  grid-area:prompt;
  max-height:72px;
  margin:0;
  overflow:auto;
  color:var(--acct-muted);
  font-family:var(--acct-font);
  font-size:9px;
  line-height:1.4;
  white-space:pre-wrap;
}

.acct-chart-example-delete{
  grid-area:delete;
  justify-self:start;
  min-height:31px;
  color:var(--acct-red);
  background:rgba(72,31,35,.38) !important;
}

/* =============================================================================
SAVED EXAMPLE MINI CHART
============================================================================= */

.acct-chart-example-mini{
  grid-area:mini;
  position:relative;
  width:100%;
  min-width:0;
  height:154px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
  border-radius:12px !important;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 33.333%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.012),
      rgba(255,255,255,.002)
    ),
    #080a0d;
}

.acct-chart-example-mini--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--acct-muted);
  font-size:9px;
}

.acct-chart-example-mini-grid{
  position:absolute;
  left:8px;
  right:8px;
  height:1px;
  background:rgba(255,255,255,.045);
}

.acct-chart-example-mini-grid--25{top:25%}
.acct-chart-example-mini-grid--50{top:50%}
.acct-chart-example-mini-grid--75{top:75%}

.acct-chart-example-mini-wick{
  position:absolute;
  width:1px;
  margin-left:-.5px;
  background:rgba(230,230,235,.58);
}

.acct-chart-example-mini-body{
  position:absolute;
  min-height:2px;
  border:1px solid rgba(235,235,240,.34);
  background:rgba(210,210,216,.24);
}

.acct-chart-example-mini-body.is-up{
  border-color:rgba(135,210,170,.76);
  background:rgba(72,150,112,.72);
}

.acct-chart-example-mini-body.is-down{
  border-color:rgba(225,135,142,.76);
  background:rgba(160,70,78,.72);
}

.acct-chart-example-mini-risk{
  position:absolute;
  left:8px;
  right:8px;
  z-index:7;
  height:1px;
  border-top:1px dashed rgba(255,255,255,.30);
}

.acct-chart-example-mini-risk--entry{border-color:rgba(189,217,255,.68)}
.acct-chart-example-mini-risk--sl{border-color:rgba(237,166,174,.70)}
.acct-chart-example-mini-risk--tp{border-color:rgba(130,221,176,.70)}

.acct-chart-example-mini-risk-badge{
  position:absolute;
  top:-9px;
  right:0;
  padding:1px 3px;
  border-radius:3px !important;
  background:#080a0d;
  color:var(--acct-soft);
  font-size:6px;
  font-weight:800;
  text-transform:uppercase;
}

.acct-chart-example-mini-risk-price{
  position:absolute;
  top:-9px;
  right:20px;
  color:var(--acct-muted);
  font-size:7px;
}

.acct-chart-example-mini-footer{
  position:absolute;
  left:8px;
  right:8px;
  bottom:6px;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--acct-muted);
  font-size:7px;
}

.acct-chart-example-mini-footer strong{
  color:var(--acct-soft);
  font-size:8px;
}

/* =============================================================================
OVERVIEW TITLE SAFETY — SHARED CLIENT / PUBLIC CARDS
============================================================================= */

.extended-html-body
.account-trading-agents-root--list
.account-trading-agent-card-top,
.public-trading-agents-page--overview
.account-trading-agent-card-top{
  align-items:flex-start !important;
  min-height:52px;
}

.extended-html-body
.account-trading-agents-root--list
.account-trading-agent-card-heading,
.public-trading-agents-page--overview
.account-trading-agent-card-heading{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  padding:1px 0 0;
}

.extended-html-body
.account-trading-agents-root--list
.account-trading-agent-card-title,
.public-trading-agents-page--overview
.account-trading-agent-card-title{
  display:-webkit-box !important;
  width:100%;
  margin:0 !important;
  padding:2px 0 3px !important;
  overflow:hidden !important;
  color:var(--taa-text,rgba(255,255,255,.94));
  font-size:20px;
  font-weight:560;
  letter-spacing:-.025em;
  line-height:1.24 !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:normal;
  text-overflow:ellipsis;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}

.extended-html-body
.account-trading-agents-root--list
.account-trading-agent-status,
.public-trading-agents-page--overview
.account-trading-agent-status{
  flex:0 0 auto;
  margin-top:2px;
}

/* =============================================================================
RESPONSIVE
============================================================================= */

@media(max-width:1100px){
  .acct-chart-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .acct-chart-stats{
    width:100%;
  }

  .acct-chart-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:820px){
  .acct-chart-controls{
    grid-template-columns:1fr;
  }

  .acct-chart-examples-list{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .acct-chart-root{
    border-radius:24px !important;
  }

  .acct-chart-head{
    padding:21px 17px 17px;
  }

  .acct-chart-controls{
    margin:14px 10px;
    padding:9px;
    gap:8px;
  }

  .acct-chart-control{
    min-height:68px;
  }

  .acct-chart-layout{
    padding:0 10px 14px;
  }

  .acct-chart-main-card,
  .acct-chart-side-card{
    padding:14px;
  }

  .acct-chart-saved-section{
    margin:0 10px 18px;
    padding:14px;
  }

  .acct-chart-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 0;
  }

  .acct-chart-stat:nth-child(2)::after{
    display:none;
  }

  .acct-chart-stat:nth-child(3){
    padding-left:0;
  }

  .acct-chart-canvas{
    height:390px;
  }

  .acct-chart-grid-line,
  .acct-chart-risk-line{
    left:48px;
    right:14px;
  }

  .acct-chart-candle{
    left:48px;
    right:14px;
  }

  .acct-chart-selection-layer{
    left:48px;
    right:14px;
  }

  .acct-chart-axis-label{
    left:7px;
    font-size:8px;
  }

  .acct-chart-example-card{
    grid-template-columns:1fr;
    grid-template-areas:
      "mini"
      "top"
      "summary"
      "prompt"
      "delete";
  }

  .acct-chart-example-mini{
    height:148px;
  }

  .acct-chart-actions,
  .acct-chart-side-row{
    grid-template-columns:1fr;
  }

  .extended-html-body
  .account-trading-agents-root--list
  .account-trading-agent-card-top,
  .public-trading-agents-page--overview
  .account-trading-agent-card-top{
    min-height:0;
  }

  .extended-html-body
  .account-trading-agents-root--list
  .account-trading-agent-card-title,
  .public-trading-agents-page--overview
  .account-trading-agent-card-title{
    font-size:19px;
    line-height:1.26 !important;
  }
}




/* =============================================================================
EXAMPLES CHART — PICKER ABOVE CHART
============================================================================= */

.acct-chart-controls{
  position:relative;
  z-index:200;
  overflow:visible;
}

.acct-chart-control{
  position:relative;
  overflow:visible;
}

.acct-chart-picker{
  position:relative;
  z-index:1;
  overflow:visible;
}

.acct-chart-picker[open]{
  z-index:1000;
}

.acct-chart-picker-menu{
  z-index:1100 !important;
}

.acct-chart-layout{
  position:relative;
  z-index:1;
}

.acct-chart-main-card,
.acct-chart-side-card{
  position:relative;
  z-index:1;
}