:root{
  --app-bg:#ffffff;
  --header-bg:#ffffff;
  --toolbar-bg:#ffffff;
  /* TradingView light-theme surface colors: cool blue-grays, not warm grays. */
  --border:#e0e3eb;
  --soft-surface:#f8f9fd;
  --secondary-surface:#eef0f5;
  --toolbar-icon:#787b86;
  --toolbar-icon-hover:#131722;
  --toolbar-active-bg:#e7f1ff;
  --toolbar-active-icon:#2962ff;
  --panel-bg:#ffffff;
  --panel-border:#e0e3eb;
  --panel-shadow:0 2px 10px rgba(19,23,34,.06);
  --text-primary:#131722;
  --text-secondary:#787b86;
  --green:#089981;
  --red:#f23645;
  --blue:#2962ff;
  --row-hover:#f8f9fd;
  --selected-bg:#e7f1ff;
  --selected-border:#2962ff;
}
*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Trebuchet MS","Segoe UI",Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  background:var(--app-bg);
  overflow:hidden;
  color:var(--text-primary);
  -webkit-user-select:none;
  user-select:none;
}
button{ font-family:inherit; }
input,select{ font-family:inherit; font-size:13px; }
input,textarea,[contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
}

.app-shell{
  width:100%;
  height:100vh;
  background:var(--app-bg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---------- TOP HEADER ---------- */
.top-header{
  flex:0 0 52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
}
.header-main{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
}
.header-main::-webkit-scrollbar{ display:none; }

.avatar-badge{ position:relative; flex:0 0 auto; margin-right:4px; }
.avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.badge{
  position:absolute;
  top:-5px;
  right:-6px;
  min-width:16px;
  height:16px;
  padding:0 3px;
  border-radius:8px;
  background:var(--red);
  color:#fff;
  font-size:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
}

.symbol-pill{
  display:flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--soft-surface);
  color:var(--text-primary);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.symbol-pill:hover{ background:var(--secondary-surface); }
.symbol-pill svg{ width:14px; height:14px; color:var(--text-secondary); }

.icon-btn{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.icon-btn:hover{ background:var(--soft-surface); color:var(--text-primary); }
.icon-btn svg{ width:17px; height:17px; }

.v-divider{
  width:1px;
  height:22px;
  background:var(--border);
  flex:0 0 auto;
  margin:0 4px;
}

.timeframes{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.tf-btn{
  border:none;
  background:transparent;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:600;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
}
.tf-btn:hover{ background:var(--soft-surface); color:var(--text-primary); }
.tf-btn.active{ background:var(--secondary-surface); color:var(--text-primary); }

.text-icon-btn{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 10px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:var(--text-primary);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.text-icon-btn:hover{ background:var(--soft-surface); }
.text-icon-btn svg{ width:16px; height:16px; color:var(--text-secondary); }
.text-icon-btn svg.chev{ width:12px; height:12px; }

.indicators-btn-wrap{ position:relative; flex:0 0 auto; }
.indicators-dropdown{
  /* Fixed (not absolute) on purpose: .header-main scrolls horizontally
     (overflow-x:auto), and per the CSS overflow spec that silently forces
     its other axis into a clipped/scrollable auto box too, even when
     overflow-y is explicitly set to visible. An absolutely-positioned
     dropdown taller than the header row would get clipped away inside
     that hidden scrollbox. position:fixed escapes containing-block/overflow
     clipping entirely; its top/left are computed in JS from the button's
     on-screen position each time it opens. */
  position:fixed;
  width:280px;
  max-height:420px;
  overflow-y:auto;
  /* Use the app's real (light) theme tokens -- this used to fall back to a
     hardcoded dark-navy background paired with this theme's dark text
     colors, which made every label almost unreadable (dark-on-dark). */
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 12px 28px rgba(44,44,43,0.18);
  padding:8px 0;
  z-index:200;
}
.indicators-dropdown[hidden]{ display:none; }
.indicators-dropdown-search{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 10px 8px;
  padding:6px 10px;
  border-radius:6px;
  background:var(--soft-surface);
  color:var(--text-secondary);
}
.indicators-dropdown-search svg{ flex:0 0 auto; }
.indicators-dropdown-search input{
  flex:1 1 auto;
  border:none;
  background:transparent;
  outline:none;
  color:var(--text-primary);
  font-size:13px;
}
.indicators-dropdown-label{
  padding:4px 14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--text-secondary);
}
.indicators-dropdown-list{ display:flex; flex-direction:column; }
.indicators-dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 14px;
  border:none;
  background:transparent;
  color:var(--text-primary);
  font-size:13px;
  text-align:left;
  cursor:pointer;
}
.indicators-dropdown-item:hover{ background:var(--soft-surface); }
.indicators-dropdown-item .indicators-dropdown-icon{
  width:24px;
  height:24px;
  border-radius:6px;
  background:var(--secondary-surface);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:12px;
  font-weight:700;
  color:#e08e00;
}
.indicators-dropdown-item-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.indicators-dropdown-item-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--text-primary); }
.indicators-dropdown-item-desc{ font-size:11px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.indicators-dropdown-divider{ height:1px; background:var(--border); margin:6px 0; }
.indicators-dropdown-empty{ padding:8px 14px; font-size:12px; color:var(--text-secondary); }

.header-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.btn{
  height:32px;
  padding:0 16px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
}
.btn-outline{
  background:#fff;
  border-color:var(--border);
  color:var(--text-primary);
}
.btn-outline:hover{ background:var(--soft-surface); }
.btn-primary{
  background:var(--blue);
  color:#fff;
}
.btn-primary:hover{ background:#1f6fc2; }
.btn-dark{
  background:#1f1e1d;
  color:#fff;
}
.btn-dark:hover{ background:#000; }
.btn-small{ height:26px; padding:0 12px; font-size:12px; }

/* ---------- APP BODY (below header) ---------- */
.app-body{
  flex:1;
  display:flex;
  overflow:hidden;
  position:relative;
  min-height:0;
}

/* ---------- LEFT TOOLBAR ---------- */
.left-toolbar{
  width:56px;
  flex:0 0 56px;
  background:var(--toolbar-bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 0;
  gap:6px;
  border-right:1px solid var(--border);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
.left-toolbar::-webkit-scrollbar{ width:0; height:0; display:none; }
.toolbar-spacer-sm{ flex:0 0 auto; height:6px; }
.tool-btn{
  width:36px;
  height:36px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--toolbar-icon);
  cursor:pointer;
  border:none;
  background:transparent;
  transition:background .15s, color .15s;
  padding:0;
}
.tool-btn:hover{ color:var(--toolbar-icon-hover); background:var(--soft-surface); }
.tool-btn.active{ background:var(--toolbar-active-bg); color:var(--toolbar-active-icon); }
.tool-btn svg{ width:18px; height:18px; }
.toolbar-spacer{ flex:1; }
.toolbar-group{ display:flex; flex-direction:column; gap:6px; align-items:center; }

/* ---------- DRAWING TOOL RAIL: flyouts ---------- */
.rail-item{ position:relative; }
/* Small hover-revealed arrow for grouped drawing tools (Lines/Fib/Shapes/
   Trade). Tapping the main tool icon now arms a tool directly; tapping
   this arrow (visible on hover) is what opens the flyout list of
   alternatives, matching TradingView's "Forecasting and measurement
   tools" style rail. */
.rail-arrow{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:11px;
  height:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  border-radius:3px;
  background:var(--toolbar-active-bg);
  color:var(--toolbar-icon);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}
.rail-item:hover .rail-arrow,
.rail-item:focus-within .rail-arrow{ opacity:1; pointer-events:auto; }
.rail-arrow:hover{ color:var(--toolbar-active-icon); }
.rail-arrow svg{ width:7px; height:7px; }
.rail-flyout{
  display:none;
  /* Fixed (not absolute) on purpose: .left-toolbar scrolls vertically
     (overflow-y:auto) and per the CSS overflow spec that forces its other
     axis (overflow-x:hidden) into a real clip box too. An absolutely
     positioned flyout popping out past the 56px-wide column was silently
     clipped/unclickable there. position:fixed escapes that clipping
     entirely; its left/top are computed in JS from the triggering
     button's on-screen position each time it opens. */
  position:fixed;
  left:0;
  top:0;
  z-index:40;
  min-width:200px;
  padding:6px;
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--panel-shadow);
}
.rail-flyout.open{ display:flex; flex-direction:column; }
.rail-flyout-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:6px;
  border:none;
  background:transparent;
  color:var(--text-primary);
  font-size:13px;
  text-align:left;
  cursor:pointer;
  white-space:nowrap;
}
.rail-flyout-item:hover{ background:var(--soft-surface); }
.rail-flyout-item.active{ background:var(--toolbar-active-bg); color:var(--toolbar-active-icon); }
.rail-flyout-item svg{ width:16px; height:16px; flex:0 0 auto; color:inherit; }
.rail-flyout-item span{ flex:1; }

/* ---------- FIXED LEFT RAIL: tool-group separator + icon slot ---------- */
.rail-sep{ width:28px; height:1px; background:var(--border); margin:5px 0; }
.rail-icon-slot{ display:flex; align-items:center; justify-content:center; }
.rail-icon-slot svg{ width:18px; height:18px; }

/* ---------- FLOATING DRAWING STYLE TOOLBAR ---------- */
.draw-floating-toolbar{
  display:none;
  position:fixed;
  z-index:45;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--panel-shadow);
}
.draw-floating-toolbar.open{ display:flex; }
.draw-toolbar-sep{ width:1px; height:20px; background:var(--border); flex:0 0 auto; }
.draw-swatches{ display:flex; align-items:center; gap:5px; }
.draw-swatch{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid transparent;
  padding:0;
  cursor:pointer;
}
.draw-swatch.active{ border-color:var(--text-primary); }
.draw-widths{ display:flex; align-items:center; gap:4px; }
.draw-width-btn{
  min-width:22px;
  height:22px;
  padding:0 4px;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-secondary);
  font-size:12px;
  cursor:pointer;
}
.draw-width-btn:hover{ background:var(--soft-surface); }
.draw-width-btn.active{ background:var(--toolbar-active-bg); color:var(--toolbar-active-icon); }
.draw-linestyles{ display:flex; align-items:center; gap:4px; }
.draw-linestyle-btn{
  width:26px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
}
.draw-linestyle-btn:hover{ background:var(--soft-surface); }
.draw-linestyle-btn.active{ background:var(--toolbar-active-bg); }
.draw-linestyle-preview{ display:block; width:16px; height:0; border-top:2px solid var(--text-secondary); }
.draw-linestyle-dashed{ border-top-style:dashed; }
.draw-linestyle-dotted{ border-top-style:dotted; }
.draw-fill{ display:flex; align-items:center; gap:6px; }
.draw-fill[hidden]{ display:none; }
.draw-fill-slider{ width:64px; height:16px; cursor:pointer; accent-color:var(--toolbar-active-icon, #2783de); }
.draw-toolbar-sep[hidden]{ display:none; }
.draw-toolbar-icon{
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:none;
  background:transparent;
  color:var(--toolbar-icon);
  cursor:pointer;
  padding:0;
}
.draw-toolbar-icon:hover{ color:var(--toolbar-icon-hover); background:var(--soft-surface); }
.draw-toolbar-icon.active{ background:var(--toolbar-active-bg); color:var(--toolbar-active-icon); }
.draw-toolbar-icon svg{ width:15px; height:15px; }

/* ---------- OBJECT TREE PANEL ---------- */
/* The object tree now docks inside the shared right-hand wrapper (see
   .watchlist-card) instead of floating over the chart, so it reuses
   .watchlist-card / .watchlist-header / .kebab for its box and header and
   only needs its own rules for the list content below. */
#drawObjectTree.watchlist-card{ align-self:stretch; max-height:100%; }
.object-tree-list{ overflow-y:auto; flex:1 1 auto; padding:4px; }
.object-tree-empty{ padding:16px 8px; text-align:center; color:var(--text-secondary); font-size:12px; }
.object-tree-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 8px;
  border-radius:6px;
  cursor:pointer;
  font-size:12.5px;
  color:var(--text-primary);
}
.object-tree-row:hover{ background:var(--soft-surface); }
.object-tree-row.active{ background:var(--selected-bg); }
.object-tree-icon{ flex:0 0 auto; font-size:11px; }
.object-tree-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.object-tree-action{
  flex:0 0 auto;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  cursor:pointer;
  border-radius:5px;
  font-size:11px;
  padding:0;
  opacity:.75;
}
.object-tree-action:hover{ background:var(--secondary-surface); opacity:1; }
.object-tree-action.muted{ opacity:.4; }

/* ---------- CENTER CHART ---------- */
.chart-wrap{
  flex:1;
  min-width:0;
  position:relative;
  background:var(--app-bg);
}
#chartCanvas{
  display:block;
  width:100%;
  height:100%;
  cursor:crosshair;
}
.chart-status{
  display:none;
  position:absolute;
  inset:0;
  bottom:26px; /* stay clear of the time axis strip */
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 24px;
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.4;
  background:transparent;
  pointer-events:none;
}
.chart-status-error{
  color:var(--red);
}

/* ---------- CONTEXT MENU ---------- */
.context-menu{
  display:none;
  position:fixed;
  z-index:50;
  min-width:220px;
  margin:0;
  padding:6px;
  list-style:none;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 28px rgba(44,44,43,.18);
  font-size:13px;
}
.context-menu.open{ display:block; }
.context-menu li{
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
  color:var(--text-primary);
  white-space:nowrap;
}
.context-menu li:hover{ background:var(--soft-surface); }
.context-menu li.disabled{
  color:var(--text-secondary);
  cursor:default;
  pointer-events:none;
}
.context-menu li.separator{
  height:1px;
  padding:0;
  margin:6px 4px;
  background:var(--border);
  cursor:default;
}
.context-menu li.separator:hover{ background:var(--border); }

/* ---------- RIGHT ICON RAIL (watchlist/alerts/object-tree/...) ---------- */
.right-icon-rail{
  flex:0 0 44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:14px 0;
}
.right-rail-btn{
  position:relative;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  border-radius:6px;
  color:var(--text-secondary);
  cursor:pointer;
}
.right-rail-btn svg{ width:18px; height:18px; }
.right-rail-btn:hover{ background:var(--soft-surface); color:var(--text-primary); }
.right-rail-btn.active{ background:var(--toolbar-active-bg); color:var(--toolbar-active-icon); }
.right-rail-badge{
  position:absolute;
  top:2px;
  right:2px;
  min-width:14px;
  height:14px;
  padding:0 3px;
  border-radius:7px;
  background:#e5484d;
  color:#fff;
  font-size:9px;
  font-weight:700;
  line-height:14px;
  text-align:center;
}
.right-rail-sep{
  width:22px;
  height:1px;
  background:var(--border);
  margin:6px 0;
}
/* Alerts and the object tree now dock inside .right-panel-wrap alongside
   the watchlist (see .watchlist-card), sharing one fixed-width box so
   switching between them never resizes or repositions the sidebar. Only
   the empty-state styling below is still used from this block. */
.right-side-panel-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  padding:32px 20px 36px;
  color:var(--text-secondary);
}
.right-side-panel-empty svg{ color:var(--border); margin-bottom:4px; }
.right-side-panel-empty p{ margin:0; font-size:13px; font-weight:600; color:var(--text-primary); }
.right-side-panel-empty span{ font-size:12px; line-height:1.4; }

/* ---------- RIGHT WATCHLIST PANEL ---------- */
.right-panel-wrap{
  flex:0 0 248px;
  display:flex;
  align-items:flex-start;
  padding:14px 14px 14px 0;
  position:relative;
  transition:flex-basis .2s ease, opacity .2s ease;
}
.right-panel-wrap.collapsed{
  flex:0 0 0px;
  padding-right:0;
  overflow:visible;
}
.right-panel-wrap.collapsed .watchlist-card{ display:none; }
.watchlist-card{
  width:100%;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:10px;
  box-shadow:var(--panel-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/* Same author-CSS-beats-UA-default gotcha as elsewhere: force [hidden] to
   actually hide the card instead of losing to `display:flex` above. This
   is what makes Watchlist/Alerts/Object tree swap cleanly with no
   flicker -- exactly one of the three ever renders at a time, all at the
   same width, so the sidebar itself never changes size between them. */
.watchlist-card[hidden]{ display:none; }
.watchlist-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px 16px;
}
.watchlist-header h2{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--text-primary);
}
.kebab{
  width:26px;
  height:26px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-secondary);
  cursor:pointer;
  border:none;
  background:transparent;
  padding:0;
}
.kebab:hover{ background:var(--row-hover); }

.section{ padding:2px 8px 8px; }
.section-label{
  display:flex;
  align-items:center;
  gap:4px;
  padding:8px 8px 4px 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text-secondary);
  text-transform:uppercase;
}
.section-label svg{ width:11px; height:11px; }

.row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 8px;
  border-radius:8px;
  cursor:pointer;
}
.row:hover{ background:var(--row-hover); }
.row.selected{
  background:var(--selected-bg);
  border:1px solid var(--selected-border);
  padding:6px 7px;
}
.symbol-icon{
  width:26px;
  height:26px;
  border-radius:50%;
  flex:0 0 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:#fff;
}
.row-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.row-name{ font-size:13px; font-weight:600; color:var(--text-primary); }
.row-price{
  font-size:13px;
  font-weight:600;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.divider{ height:1px; background:var(--panel-border); margin:6px 12px; }

/* ---------- BOTTOM HEADER ---------- */
.bottom-bar{
  flex:0 0 34px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 12px;
  background:var(--header-bg);
  border-top:1px solid var(--border);
}
.range-tabs{ display:flex; align-items:center; gap:2px; }
.range-btn{
  border:none;
  background:transparent;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:600;
  padding:5px 9px;
  border-radius:6px;
  cursor:pointer;
}
.range-btn:hover{ background:var(--soft-surface); color:var(--text-primary); }
.range-btn.active{ background:var(--secondary-surface); color:var(--text-primary); }

.goto-date-wrap{ position:relative; margin-left:4px; }
.date-popover{
  display:none;
  position:absolute;
  bottom:32px;
  left:0;
  z-index:40;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 28px rgba(44,44,43,.18);
  padding:10px;
  gap:8px;
  align-items:center;
  flex-direction:column;
  width:180px;
}
.date-popover.open{ display:flex; }
.date-popover-label{ font-size:12px; font-weight:600; color:var(--text-secondary); align-self:flex-start; }
.date-popover input[type=date]{
  width:100%;
  height:30px;
  padding:0 8px;
  border-radius:6px;
  border:1px solid var(--border);
  color:var(--text-primary);
}
.date-popover .btn{ width:100%; }

.bottom-spacer{ flex:1; }
.clock-readout{
  font-size:12px;
  color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---------- SETTINGS MODAL ---------- */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(44,44,43,.35);
  align-items:center;
  justify-content:center;
}
.modal-overlay.open{ display:flex; }
.settings-modal{
  width:640px;
  max-width:92vw;
  max-height:82vh;
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.settings-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px 12px;
  border-bottom:1px solid var(--border);
}
.settings-header h2{ margin:0; font-size:16px; font-weight:600; letter-spacing:.1px; }
.settings-body{
  display:flex;
  flex:1;
  min-height:0;
  padding:10px 20px 0;
  gap:20px;
}
.settings-tabs{
  flex:0 0 170px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-right:10px;
  border-right:1px solid var(--border);
  overflow-y:auto;
}
.settings-tab{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:var(--text-primary);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-align:left;
}
.settings-tab svg{ width:16px; height:16px; color:var(--text-secondary); flex:0 0 auto; }
.settings-tab:hover{ background:var(--soft-surface); }
.settings-tab.active{ background:var(--secondary-surface); }

.settings-content{
  flex:1;
  min-width:0;
  overflow-y:auto;
  padding:4px 4px 20px;
}
.settings-pane{ display:flex; flex-direction:column; gap:14px; }
.settings-pane[hidden]{ display:none; }
.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.settings-row label{ font-size:13px; color:var(--text-primary); }
.settings-row select{
  height:30px;
  padding:0 8px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-primary);
}
.settings-row input[type=color]{
  width:44px;
  height:28px;
  padding:2px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.settings-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--text-primary);
  cursor:pointer;
}
.settings-check input{ width:16px; height:16px; cursor:pointer; }
.settings-check-nested{ margin-left:24px; }
.settings-row-dual{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.settings-check-inline{ flex:1; }
.dual-colors{ display:flex; gap:6px; }
.row-controls{ display:flex; align-items:center; gap:8px; }
.settings-number{
  width:64px;
  height:30px;
  padding:0 8px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-primary);
}
.settings-unit{ font-size:12px; color:var(--text-secondary); }
.settings-section-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text-secondary);
  text-transform:uppercase;
}
.settings-note{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--text-secondary);
}
.fib-levels-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}
.fib-level-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.fib-level-row input[type=number]{
  width:70px;
  height:28px;
  padding:0 6px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-primary);
}
.fib-level-pct{ font-size:12px; color:var(--text-secondary); margin-right:2px; }
.fib-level-row input[type=color]{
  width:34px;
  height:26px;
  padding:2px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.fib-level-remove{
  width:24px;
  height:24px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-secondary);
  cursor:pointer;
  font-size:12px;
  line-height:1;
}
.fib-level-remove:hover{ background:var(--soft-surface); color:var(--negative,#f23645); }
.fib-level-add{
  align-self:flex-start;
  margin-top:4px;
  height:28px;
  padding:0 12px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-primary);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.fib-level-add:hover{ background:var(--soft-surface); }

.settings-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  border-top:1px solid var(--border);
}
.template-select{
  height:34px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-primary);
}
.settings-footer-actions{ display:flex; gap:8px; }

/* Custom indicator (Pine Script) modal */
.indicator-modal{ width:560px; }
.indicator-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 20px;
  overflow-y:auto;
}
.indicator-active-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.indicator-active-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--soft-surface);
}
.indicator-active-row.is-error{
  border-color:#f23645;
  background:rgba(242,54,69,.08);
}
.indicator-active-name{
  font-size:13px;
  color:var(--text-primary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.indicator-active-row.is-error .indicator-active-name{ color:#c0392b; }
.indicator-active-row.is-highlighted{
  border-color:var(--accent, #2196f3);
  box-shadow:0 0 0 1px var(--accent, #2196f3) inset;
}
.indicator-name-input{
  flex:1;
  height:32px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-primary);
  font-size:13px;
}

/* Indicator settings modal (TradingView-style Inputs/Style/Visibility) */
.indicator-settings-modal{
  width:560px;
  border-radius:14px;
}
.indicator-settings-modal .settings-header{ padding:16px 22px 0; border-bottom:none; }
.indicator-settings-tabs{
  display:flex;
  gap:2px;
  padding:12px 22px 0;
  border-bottom:1px solid var(--border);
}
.indicator-settings-tab{
  padding:8px 14px 10px;
  border:none;
  background:transparent;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border-radius:6px 6px 0 0;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:background .12s ease, color .12s ease;
}
.indicator-settings-tab:hover{ color:var(--text-primary); background:var(--soft-surface); }
.indicator-settings-tab.active{
  color:var(--toolbar-active-icon, #2183e0);
  border-bottom-color:var(--toolbar-active-icon, #2183e0);
  background:transparent;
}
.indicator-settings-body{
  display:block;
  padding:18px 22px 6px;
  overflow-y:auto;
  min-height:240px;
  max-height:56vh;
}
.indicator-settings-pane{ display:flex; flex-direction:column; gap:18px; }
.indicator-settings-pane[hidden]{ display:none; }
.indicator-settings-group{ display:flex; flex-direction:column; gap:11px; }
.indicator-settings-group-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--text-secondary);
  text-transform:uppercase;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.indicator-settings-modal .settings-footer{ border-radius:0 0 14px 14px; }
.indicator-settings-inline-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
.indicator-settings-field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.indicator-settings-inline-row .indicator-settings-field{ justify-content:flex-start; flex:0 0 auto; }
.indicator-settings-field label{ font-size:13px; color:var(--text-primary); }
.indicator-settings-field select,
.indicator-settings-field input[type=text],
.indicator-settings-field input[type=number]{
  height:30px;
  padding:0 8px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-primary);
  font-size:13px;
  transition:border-color .12s ease;
}
.indicator-settings-field select:hover,
.indicator-settings-field input[type=text]:hover,
.indicator-settings-field input[type=number]:hover{ border-color:#b9b8b5; }
.indicator-settings-field select:focus,
.indicator-settings-field input[type=text]:focus,
.indicator-settings-field input[type=number]:focus{
  outline:none;
  border-color:var(--toolbar-active-icon, #2183e0);
  box-shadow:0 0 0 1px var(--toolbar-active-icon, #2183e0);
}
.indicator-settings-field input[type=number]{ width:76px; }
.indicator-settings-field input[type=color]{
  width:38px;
  height:26px;
  padding:2px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.indicator-settings-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--text-primary);
  cursor:pointer;
}
.indicator-settings-check input{ width:16px; height:16px; cursor:pointer; }
.indicator-settings-plot-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 8px;
  border-radius:6px;
  margin:0 -8px;
  transition:background .12s ease;
}
.indicator-settings-plot-row:hover{ background:var(--soft-surface); }
.indicator-settings-plot-name{ font-size:13px; color:var(--text-primary); }
.indicator-settings-empty{ font-size:13px; color:var(--text-secondary); padding:8px 0; }
.indicator-settings-error{ font-size:13px; color:#c0392b; padding:8px 0; }
.settings-footer-defaults .template-select{ height:32px; }
.indicator-script-input{
  width:100%;
  min-height:180px;
  resize:vertical;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-primary);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px;
  line-height:1.5;
}
.indicator-error{
  padding:8px 10px;
  border-radius:8px;
  background:rgba(242,54,69,.1);
  border:1px solid #f23645;
  color:#c0392b;
  font-size:12.5px;
}

/* On-chart legend for active custom indicators (top-left, over the canvas).
   Sits BELOW the canvas-drawn symbol name + O/H/L/C readout (drawn at
   x=10,y=8 in chart.js's drawOhlcReadout, ~20px tall) so the two never
   overlap. */
.indicator-legend{
  position:absolute;
  top:32px;
  left:10px;
  right:10px;
  z-index:5;
  display:flex;
  flex-direction:column;
  pointer-events:none;
}
.indicator-legend-header{
  display:flex;
  pointer-events:auto;
  margin-bottom:4px;
}
.indicator-legend-header-toggle{
  display:flex;
  align-items:center;
  gap:5px;
  border:1px solid var(--panel-border);
  background:rgba(255,255,255,.96);
  border-radius:7px;
  padding:4px 9px 4px 7px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text-secondary);
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.indicator-legend-header-toggle:hover{ color:var(--text-primary); background:#fff; }
.indicator-legend-header-chevron{ transform:rotate(90deg); transition:transform .12s ease; flex-shrink:0; }
.indicator-legend-header-chevron.is-open{ transform:rotate(180deg); }
.indicator-legend-header-count{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:15px;
  height:15px;
  padding:0 4px;
  border-radius:999px;
  background:var(--secondary-surface);
  color:var(--text-primary);
  font-size:10px;
  font-weight:700;
}
.indicator-legend-header-calculating{
  display:flex;
  align-items:center;
  font-size:10px;
  font-weight:600;
  color:var(--text-secondary);
  font-style:italic;
  margin-left:2px;
}
.indicator-legend-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:280px;
}
.indicator-legend-row{
  display:flex;
  align-items:center;
  gap:7px;
  pointer-events:auto;
  background:#ffffff;
  border:1px solid var(--panel-border);
  border-radius:7px;
  padding:4px 7px 4px 5px;
  font-size:12px;
  font-weight:600;
  color:var(--text-primary);
  box-shadow:0 1px 3px rgba(44,44,43,.1);
  transition:background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.indicator-legend-row:hover{
  background:#ffffff;
  border-color:var(--selected-border);
  box-shadow:0 3px 8px rgba(44,44,43,.16);
}
.indicator-legend-row.is-error{ color:#c0392b; }
.indicator-legend-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  flex-shrink:0;
  border:none;
  background:none;
  cursor:pointer;
  padding:0;
  color:var(--text-secondary);
  transition:transform .12s ease;
}
.indicator-legend-toggle.is-expanded{ transform:rotate(90deg); }
.indicator-legend-toggle:hover{ color:var(--text-primary); }
.indicator-legend-dot{
  width:12px;
  height:3px;
  border-radius:2px;
  flex-shrink:0;
}
.indicator-legend-label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
}
.indicator-legend-actions{
  display:flex;
  align-items:center;
  gap:2px;
  flex-shrink:0;
}
.indicator-legend-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border:none;
  background:none;
  cursor:pointer;
  color:var(--text-secondary);
  line-height:1;
  padding:0;
  border-radius:4px;
  font-size:10px;
  font-weight:700;
  font-family:monospace;
}
.indicator-legend-icon:hover{ color:var(--text-primary); background:rgba(0,0,0,.06); }
.indicator-legend-eye.is-off{ color:#b5b2ac; }
.indicator-legend-remove:hover{ color:#c0392b; background:rgba(192,57,43,.1); }
.indicator-legend-more-menu{
  position:fixed;
  min-width:150px;
  background:var(--panel-surface, #fff);
  border:1px solid var(--border-color, #e3e1dc);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  padding:4px 0;
  z-index:80;
}
.indicator-legend-more-item{
  display:block;
  width:100%;
  text-align:left;
  padding:7px 12px;
  border:none;
  background:none;
  cursor:pointer;
  font-size:12.5px;
  color:var(--text-primary);
}
.indicator-legend-more-item:hover{ background:var(--soft-surface); }
.indicator-legend-details{
  display:flex;
  flex-direction:column;
  gap:2px;
  pointer-events:auto;
  background:rgba(255,255,255,.9);
  border-radius:6px;
  padding:4px 8px 4px 24px;
  margin-top:-1px;
  font-size:11px;
  color:var(--text-secondary);
}
.indicator-legend-detail-line{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}


/* TradingView-proportioned chart settings dialog */
#settingsOverlay .settings-modal{width:965px;height:725px;max-width:96vw;max-height:94vh;border-radius:4px;box-shadow:0 8px 32px rgba(0,0,0,.22)}
#settingsOverlay .settings-header{height:78px;box-sizing:border-box;padding:20px;border-bottom:0}
#settingsOverlay .settings-header h2{font-size:26px;font-weight:700}
#settingsOverlay .settings-body{padding:0 18px;gap:26px}
#settingsOverlay .settings-tabs{flex-basis:272px;padding:10px 0;border-right:0;gap:3px}
#settingsOverlay .settings-tab{min-height:52px;padding:0 24px;border-radius:10px;font-size:18px;font-weight:500;gap:13px}
#settingsOverlay .settings-tab svg{width:25px;height:25px;color:#131722}
#settingsOverlay .settings-tab.active{background:#f0f0f0;font-weight:600}
#settingsOverlay .settings-content{padding:26px 20px 36px 0}
#settingsOverlay .settings-pane{gap:20px}
#settingsOverlay .settings-section-label{font-size:13px;font-weight:500;letter-spacing:0;color:#777;text-transform:uppercase;margin:2px 0 4px}
#settingsOverlay .settings-check,#settingsOverlay .settings-row label{font-size:18px}
#settingsOverlay .settings-check input[type=checkbox]{width:24px;height:24px;accent-color:#2f3133}
#settingsOverlay .settings-row{min-height:44px}
#settingsOverlay .settings-row select{width:238px;height:45px;border-radius:9px;font-size:17px;padding:0 12px}
#settingsOverlay .settings-number{width:175px;height:43px;font-size:17px}
#settingsOverlay .settings-opacity{width:195px;accent-color:#2962ff;margin-left:24px}
#settingsOverlay .settings-help{display:inline-flex;width:20px;height:20px;border-radius:50%;background:#bdbdbd;color:#fff;align-items:center;justify-content:center;font-size:13px}
#settingsOverlay .settings-footer{height:76px;box-sizing:border-box;padding:12px 18px}
#settingsOverlay .template-select,#settingsOverlay .btn{height:46px;font-size:18px;border-radius:9px}
.indicator-legend-row.is-loading .indicator-legend-dot{background:transparent!important;border:2px solid #b8babd;border-top-color:#2962ff;box-sizing:border-box;animation:indicator-loading-spin .8s linear infinite}
.indicator-legend-row.is-loading .indicator-legend-label{color:#6a6d75}
@keyframes indicator-loading-spin{to{transform:rotate(360deg)}}


/* fixed36: denser settings typography and Object tree layers */
#settingsOverlay .settings-header h2{font-size:22px}
#settingsOverlay .settings-tab{font-size:15px;min-height:47px}
#settingsOverlay .settings-check,#settingsOverlay .settings-row label{font-size:15px}
#settingsOverlay .settings-row select{font-size:15px;height:40px}
#settingsOverlay .settings-number{font-size:15px;height:40px}
#settingsOverlay .settings-pane{gap:16px}
#settingsOverlay .settings-note{font-size:14px;margin:-10px 0 2px 34px;color:#777}
.object-tree-section-label{padding:10px 8px 5px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}
.object-tree-chart-row{font-weight:700;border-bottom:1px solid var(--border)}
.object-tree-indicator-row{cursor:grab}
.object-tree-indicator-row:active{cursor:grabbing}
.object-tree-drag{color:var(--text-secondary);font-size:10px;letter-spacing:-3px;margin-right:2px}
.object-tree-layer-badge{font-size:9px;color:var(--text-secondary);background:var(--secondary-surface);padding:2px 5px;border-radius:4px}

/* ---------- TradingView-style Bar Replay ---------- */
#barReplayBtn.active{ color:#2962ff; background:#e9efff; }
.replay-select-hint{
  position:absolute;left:50%;bottom:42px;transform:translateX(-50%);z-index:35;
  height:34px;display:flex;align-items:center;gap:9px;padding:0 12px;
  border:1px solid var(--border);border-radius:7px;background:#fff;color:#131722;
  box-shadow:0 4px 18px rgba(0,0,0,.14);font-size:12px;font-weight:600;pointer-events:auto;
}
.replay-select-hint[hidden],.replay-panel[hidden]{display:none!important}
.replay-select-dot{width:8px;height:8px;border-radius:50%;background:#2962ff;box-shadow:0 0 0 3px rgba(41,98,255,.15)}
.replay-select-hint button{border:0;border-radius:4px;padding:3px 6px;background:#f0f3fa;color:#5d606b;font-size:10px;cursor:pointer}
.replay-panel{
  position:absolute;z-index:34;left:50%;bottom:34px;transform:translateX(-50%);
  min-height:44px;max-width:calc(100% - 24px);display:flex;align-items:center;gap:8px;padding:6px 8px;
  background:#fff;border:1px solid #d1d4dc;border-radius:8px;box-shadow:0 5px 24px rgba(19,23,34,.16);
  color:#131722;font-size:11px;white-space:nowrap;pointer-events:auto;
}
.replay-transport,.replay-paper{display:flex;align-items:center;gap:5px}
.replay-icon-btn,.replay-play-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:5px;background:transparent;color:#434651;cursor:pointer;padding:0}
.replay-icon-btn:hover{background:#f0f3fa}
.replay-icon-btn svg,.replay-play-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.replay-play-btn{border-radius:50%;background:#2962ff;color:#fff}.replay-play-btn:hover{background:#1e53d4}
.replay-play-btn svg{fill:currentColor;stroke:none}.replay-pause-icon{display:none}.replay-play-btn.is-playing .replay-play-icon{display:none}.replay-play-btn.is-playing .replay-pause-icon{display:block}
.replay-speed,.replay-date,.replay-qty{height:28px;border:1px solid #d1d4dc;border-radius:5px;background:#fff;color:#131722;font:500 11px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:0 6px;outline:none}
.replay-speed:focus,.replay-date:focus,.replay-qty:focus{border-color:#2962ff}.replay-date{width:152px}.replay-qty{width:48px}.replay-progress{min-width:82px;color:#787b86;font-variant-numeric:tabular-nums;text-align:center}
.replay-separator{width:1px;height:28px;background:#e0e3eb;margin:0 2px}.replay-paper-label{color:#787b86;font-weight:600;margin-right:1px}
.replay-order{height:28px;border:0;border-radius:5px;padding:0 9px;color:#fff;font-size:11px;font-weight:700;cursor:pointer}.replay-buy{background:#089981}.replay-buy:hover,.replay-buy.active{background:#067a67}.replay-sell{background:#f23645}.replay-sell:hover,.replay-sell.active{background:#c92d39}.replay-close-position{background:#787b86}.replay-close-position:disabled{opacity:.35;cursor:default}
.replay-stats{min-width:154px;padding:0 6px;font-variant-numeric:tabular-nums;color:#434651}.replay-stats.positive{color:#089981}.replay-stats.negative{color:#f23645}.replay-export{width:28px}.replay-exit{margin-left:1px}
@media(max-width:1180px){.replay-paper-label,.replay-progress,.replay-export{display:none}.replay-date{width:136px}.replay-stats{min-width:118px}}

/* fixed49: TradingView-density chrome and authenticated landing */
html,body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:13px;font-weight:400;letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
button,input,select,textarea{font-weight:400}
.top-header{flex-basis:46px;height:46px;padding:0 8px;gap:8px}
.header-main{gap:2px}.header-actions{gap:6px}.v-divider{height:24px;margin:0 3px}
.chart-brand{width:34px;height:34px;display:grid;place-items:center;text-decoration:none;color:#fff;margin-right:2px}.chart-brand span{width:24px;height:24px;border-radius:6px;background:#2962ff;display:grid;place-items:center;font-size:12px;font-weight:700}
.symbol-pill{height:34px;padding:0 8px;border:0;background:transparent;border-radius:4px;font-size:13px;font-weight:600}.symbol-pill:hover{background:#f0f3fa}
.icon-btn,.text-icon-btn{height:34px;border-radius:4px}.icon-btn{width:34px}.text-icon-btn{padding:0 8px;font-size:12px;font-weight:400}.tf-btn{height:34px;padding:0 8px;border-radius:4px;font-size:12px;font-weight:400}.tf-btn.active{color:#2962ff;background:#e9efff;font-weight:500}
.btn{height:34px;border-radius:4px;font-size:12px;font-weight:500;padding:0 12px}.btn-primary{background:#2962ff}
.left-toolbar{width:46px;flex-basis:46px;padding:4px 0;gap:1px}.tool-btn{width:38px;height:38px;border-radius:4px}.tool-btn svg,.rail-icon-slot svg{width:19px;height:19px;stroke-width:1.65}.tool-btn.active{background:transparent;color:#2962ff}.tool-btn:hover{background:#f0f3fa}.rail-sep{width:28px;margin:3px 0}
.save-state{color:#787b86;font-size:11px;min-width:34px;text-align:right}.save-state.is-saving{color:#2962ff}.save-state.is-error{color:#f23645}.account-button{width:30px;height:30px;border:0;border-radius:50%;background:#e9efff;color:#2962ff;font-size:12px;cursor:pointer}.account-button span{font-weight:600}
.landing{position:fixed;inset:0;z-index:10000;background:#fff;color:#131722;overflow:auto}.landing[hidden]{display:none}.landing-nav{height:68px;max-width:1240px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f3fa}.brand{display:flex;align-items:center;gap:10px;color:#131722;text-decoration:none;font-size:17px;font-weight:650}.brand-mark{width:30px;height:30px;border-radius:7px;background:#2962ff;color:#fff;display:grid;place-items:center;font-size:14px}.landing-links{display:flex;gap:30px}.landing-links a{color:#434651;text-decoration:none;font-size:13px}.landing-signin{height:36px;padding:0 16px;border:1px solid #d1d4dc;border-radius:6px;background:#fff;color:#131722;cursor:pointer}.landing-main{max-width:1240px;margin:auto;padding:70px 28px 46px}.hero{display:grid;grid-template-columns:minmax(360px,.82fr) minmax(520px,1.18fr);gap:62px;align-items:center}.eyebrow{color:#2962ff;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.hero h1{margin:18px 0;font-size:58px;line-height:1.02;letter-spacing:-.045em;font-weight:650}.hero h1 span{color:#2962ff}.hero p{max-width:520px;font-size:18px;line-height:1.55;color:#5d606b;font-weight:350}.hero-actions{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}.google-signin{height:48px;padding:0 20px;border:1px solid #d1d4dc;border-radius:6px;background:#fff;font-size:14px;color:#131722;display:flex;gap:12px;align-items:center;cursor:pointer;box-shadow:0 1px 2px rgba(19,23,34,.06)}.google-signin:hover{border-color:#2962ff;background:#f8faff}.google-g{font-size:17px;font-weight:700;color:#4285f4}.auth-note{font-size:11px;color:#787b86}.hero-chart{border:1px solid #dfe3eb;border-radius:10px;overflow:hidden;box-shadow:0 18px 60px rgba(32,48,85,.13);background:#fff}.hero-chart svg{display:block;width:100%;height:auto}.preview-top,.preview-replay{height:40px;padding:0 14px;display:flex;align-items:center;gap:16px;border-bottom:1px solid #e0e3eb;color:#434651}.preview-top span:first-child{font-weight:600;color:#131722}.preview-live{margin-left:auto;color:#089981}.preview-replay{border-top:1px solid #e0e3eb;border-bottom:0}.preview-replay span{margin-left:auto;color:#089981}.landing-strip{margin-top:76px;padding-top:32px;border-top:1px solid #e0e3eb;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.landing-strip div{display:flex;flex-direction:column;gap:7px}.landing-strip b{font-size:14px;font-weight:600}.landing-strip span{color:#787b86;font-size:12px}.auth-error{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#fff1f2;color:#b42332;border:1px solid #ffc5ca;padding:10px 14px;border-radius:6px}
@media(max-width:900px){.landing-links{display:none}.landing-main{padding-top:40px}.hero{grid-template-columns:1fr}.hero h1{font-size:44px}.hero-chart{max-width:720px}.landing-strip{grid-template-columns:1fr 1fr}.header-actions .btn-outline{display:none}}
@media(max-width:520px){.landing-nav,.landing-main{padding-left:18px;padding-right:18px}.hero{gap:36px}.hero h1{font-size:38px}.hero p{font-size:16px}.landing-strip{grid-template-columns:1fr}.timeframes .tf-btn:nth-child(n+5){display:none}}

/* fixed50: Titan wordmark + more readable thin UI type */
.chart-brand{width:auto;min-width:174px;gap:8px;padding:0 7px 0 2px;justify-content:flex-start}
.chart-brand .chart-brand-mark{width:25px;height:25px;border-radius:6px;background:#2962ff;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:650;flex:0 0 auto}
.chart-brand .chart-brand-name{width:auto;height:auto;background:transparent;color:#131722;display:block;font-size:12px;font-weight:550;white-space:nowrap;letter-spacing:-.01em}
.text-icon-btn,.tf-btn,.symbol-pill,.btn{font-size:13px}
.indicator-legend,.chart-status,.watchlist-card,.right-panel-wrap{font-size:13px}
.account-button:disabled{cursor:default;opacity:1}
@media(max-width:760px){.chart-brand{min-width:34px;width:34px;padding:0}.chart-brand .chart-brand-name{display:none}}


/* fixed53 — Titan Journal visual system */
:root[data-titan-theme="dark"]{
  --app-bg:#0f172a;--header-bg:#0d1524;--toolbar-bg:#0d1524;--border:#2a3441;
  --soft-surface:#182235;--secondary-surface:#202c40;--toolbar-icon:#94a3b8;
  --toolbar-icon-hover:#f8fafc;--toolbar-active-bg:rgba(34,197,94,.15);--toolbar-active-icon:#4ade80;
  --panel-bg:#111827;--panel-border:#2a3441;--panel-shadow:0 10px 30px rgba(0,0,0,.36);
  --text-primary:#f8fafc;--text-secondary:#94a3b8;--green:#22c55e;--red:#f87171;
  --blue:#22c55e;--row-hover:#182235;--selected-bg:rgba(34,197,94,.13);--selected-border:#22c55e;
}
:root[data-titan-theme="dark"] input,:root[data-titan-theme="dark"] select,:root[data-titan-theme="dark"] textarea{background:#111827;color:#f8fafc;border-color:#2a3441}
:root[data-titan-theme="dark"] .btn-outline,:root[data-titan-theme="dark"] .btn-dark{background:#111827;color:#f8fafc;border-color:#2a3441}
:root[data-titan-theme="dark"] .modal-overlay{background:rgba(2,6,23,.72)}
:root[data-titan-theme="dark"] .settings-modal,:root[data-titan-theme="dark"] .indicator-dropdown,:root[data-titan-theme="dark"] .context-menu{background:#111827;color:#f8fafc;border-color:#2a3441}
:root[data-titan-theme="dark"] .btn-primary{background:#22c55e;border-color:#22c55e;color:#07140c}
:root[data-titan-theme="dark"] .account-button{background:#16a34a;color:#fff}

.chart-brand-logo{width:28px;height:28px;border-radius:7px;object-fit:cover;display:block}
.header-theme-button,.theme-toggle{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--panel-bg);color:var(--text-primary);display:grid;place-items:center;cursor:pointer;font-size:15px}
.header-theme-button:hover,.theme-toggle:hover{border-color:#22c55e;color:#22c55e}
.account-wrap{position:relative}.account-button{overflow:hidden;display:grid;place-items:center}.account-button img{width:100%;height:100%;object-fit:cover;display:block}
.profile-menu{position:absolute;right:0;top:calc(100% + 10px);width:260px;padding:9px;background:var(--panel-bg);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 46px rgba(2,6,23,.28);z-index:20000}
.profile-menu[hidden]{display:none}.profile-head{display:flex;align-items:center;gap:11px;padding:8px}.profile-head>div:last-child{min-width:0;display:flex;flex-direction:column;gap:3px}.profile-head b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-head span{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center;font-weight:700;overflow:hidden}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-divider{height:1px;background:var(--border);margin:6px 2px}.profile-menu>button{width:100%;border:0;background:transparent;color:var(--text-primary);border-radius:9px;padding:9px 10px;display:flex;gap:10px;align-items:center;text-align:left;font-size:12px;cursor:pointer}.profile-menu>button:hover{background:var(--soft-surface)}.profile-menu>button.danger{color:#f87171}

.landing{--land-bg:#f7f8fa;--land-panel:#fff;--land-panel-2:#f3f4f6;--land-border:#e5e7eb;--land-text:#111827;--land-muted:#6b7280;--land-accent:#16a34a;position:fixed;inset:0;z-index:10000;background:var(--land-bg);color:var(--land-text);overflow:auto;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;user-select:text}
:root[data-titan-theme="dark"] .landing{--land-bg:#0a101c;--land-panel:#111827;--land-panel-2:#0f1929;--land-border:#243044;--land-text:#f8fafc;--land-muted:#94a3b8;--land-accent:#22c55e}
.landing[hidden]{display:none}.landing *{box-sizing:border-box}.landing button,.landing a{font-family:inherit}.landing-nav{height:74px;max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--land-border);position:relative;z-index:2}.brand{display:flex;align-items:center;gap:11px;color:var(--land-text);text-decoration:none;font-size:15px;font-weight:500}.brand b{font-weight:750}.brand-logo{width:38px;height:38px;border-radius:9px;object-fit:cover}.landing-links{display:flex;gap:30px}.landing-links a{color:var(--land-muted);font-size:12px;text-decoration:none}.landing-links a:hover{color:var(--land-text)}.landing-nav-actions{display:flex;gap:9px;align-items:center}.landing-signin{height:36px;padding:0 17px;border:1px solid var(--land-border);border-radius:9px;background:var(--land-panel);color:var(--land-text);font-size:12px;cursor:pointer}.landing-signin:hover{border-color:var(--land-accent)}
.landing-main{max-width:1240px;margin:0 auto;padding:74px 28px 58px}.hero{display:grid;grid-template-columns:minmax(360px,.78fr) minmax(560px,1.22fr);gap:58px;align-items:center}.hero-copy{min-width:0}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--land-accent);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--land-accent);box-shadow:0 0 0 5px rgba(34,197,94,.12)}.hero h1{margin:22px 0 20px;font-size:55px;line-height:1.03;letter-spacing:-.045em;font-weight:760}.hero h1 span{color:var(--land-accent)}.hero p{max-width:540px;margin:0;font-size:17px;line-height:1.65;color:var(--land-muted);font-weight:400}.hero-actions{margin-top:29px;display:flex;flex-direction:column;align-items:flex-start;gap:11px}.google-signin{height:49px;padding:0 20px;border:1px solid var(--land-border);border-radius:10px;background:var(--land-panel);color:var(--land-text);display:flex;gap:11px;align-items:center;justify-content:center;font-size:13px;font-weight:650;cursor:pointer;box-shadow:0 4px 14px rgba(2,6,23,.08)}.google-signin:hover{border-color:var(--land-accent);transform:translateY(-1px)}.google-logo{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #e5e7eb}.google-logo:after{content:"G";font-weight:800;color:#4285f4;font-size:13px}.auth-note{font-size:10.5px;color:var(--land-muted)}.hero-proof{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;color:var(--land-muted);font-size:10.5px}.hero-proof span:first-letter{color:var(--land-accent)}
.terminal-preview{border:1px solid var(--land-border);border-radius:18px;overflow:hidden;background:var(--land-panel);box-shadow:0 26px 70px rgba(2,6,23,.26);min-width:0}.terminal-windowbar{height:38px;border-bottom:1px solid var(--land-border);background:var(--land-panel-2);display:flex;align-items:center;justify-content:center;color:var(--land-muted);font-size:9.5px;position:relative}.terminal-windowbar b{position:absolute;right:13px;color:var(--land-accent);font-size:9px}.window-dots{position:absolute;left:13px;display:flex;gap:5px}.window-dots i{width:7px;height:7px;border-radius:50%;background:#f87171}.window-dots i:nth-child(2){background:#fbbf24}.window-dots i:nth-child(3){background:#22c55e}.terminal-preview-body{height:472px;display:flex}.preview-sidebar{width:47px;border-right:1px solid var(--land-border);background:var(--land-panel-2);padding:12px 9px;display:flex;flex-direction:column;align-items:center;gap:16px}.preview-sidebar img{width:28px;height:28px;border-radius:7px}.preview-sidebar span{width:19px;height:19px;border:1px solid var(--land-border);border-radius:5px}.preview-sidebar span.active{background:rgba(34,197,94,.18);border-color:var(--land-accent)}.preview-workspace{flex:1;min-width:0;padding:0 15px 12px}.preview-toolbar{height:45px;border-bottom:1px solid var(--land-border);display:flex;align-items:center;gap:17px;color:var(--land-muted);font-size:9.5px}.preview-toolbar strong{color:var(--land-text);font-size:11px}.preview-toolbar em{margin-left:auto;color:var(--land-accent);font-style:normal}.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 0}.preview-metrics>div{border:1px solid var(--land-border);border-radius:9px;padding:9px 10px;background:var(--land-panel-2)}.preview-metrics small{display:block;color:var(--land-muted);font-size:7.5px;letter-spacing:.05em}.preview-metrics b{display:block;margin-top:4px;font-size:12px;color:var(--land-text)}.preview-metrics>div:first-child b{color:var(--land-accent)}.hero-chart{height:305px;position:relative;border:1px solid var(--land-border);border-radius:10px;overflow:hidden;background:var(--land-panel)}.hero-chart svg{width:100%;height:100%;display:block;color:var(--land-muted)}.chart-area{fill:rgba(34,197,94,.10)}.chart-line{fill:none;stroke:#4ade80;stroke-width:2.5}.candles{fill:#4ade80;stroke:#4ade80;stroke-width:2}.candles .down{fill:#f87171;stroke:#f87171}.chart-badge{position:absolute;top:11px;left:12px;padding:5px 8px;border-radius:6px;background:rgba(34,197,94,.14);color:#4ade80;font-size:8px;font-weight:700}.preview-bottom{height:32px;display:flex;align-items:center;gap:14px;color:var(--land-muted);font-size:8.5px}.preview-bottom strong{margin-left:auto;color:var(--land-text)}.preview-bottom em{color:var(--land-accent);font-style:normal}
.landing-section{padding:110px 0 30px}.section-heading{max-width:630px;margin-bottom:36px}.section-heading>span,.landing-cta>div>span{color:var(--land-accent);font-size:10px;letter-spacing:.11em;font-weight:700}.section-heading h2,.landing-cta h2{margin:11px 0 10px;font-size:34px;line-height:1.15;letter-spacing:-.025em}.section-heading p,.landing-cta p{font-size:14px;line-height:1.55;color:var(--land-muted)}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feature-grid article{border:1px solid var(--land-border);background:var(--land-panel);border-radius:14px;padding:22px;min-height:195px}.feature-icon{width:36px;height:36px;border-radius:9px;background:rgba(34,197,94,.13);color:var(--land-accent);display:grid;place-items:center;font-size:18px}.feature-grid h3{font-size:14px;margin:26px 0 9px}.feature-grid p{font-size:11.5px;line-height:1.6;color:var(--land-muted);margin:0}.landing-cta{margin-top:100px;padding:38px 42px;border:1px solid var(--land-border);border-radius:18px;background:var(--land-panel);display:flex;align-items:center;justify-content:space-between;gap:30px}.landing-cta h2{font-size:28px}.landing-cta p{margin:0}.landing-footer{max-width:1240px;margin:0 auto;padding:28px;border-top:1px solid var(--land-border);display:flex;align-items:center;gap:25px;color:var(--land-muted);font-size:10.5px}.landing-footer .brand{margin-right:auto}.landing-footer .brand-logo{width:30px;height:30px}.landing .auth-error{position:fixed;z-index:10;left:50%;bottom:20px;transform:translateX(-50%);background:#321820;color:#fecdd3;border:1px solid #7f1d1d;padding:10px 14px;border-radius:9px;font-size:11px}
@media(max-width:980px){.hero{grid-template-columns:1fr}.terminal-preview{max-width:760px}.feature-grid{grid-template-columns:1fr 1fr}.landing-links{display:none}.hero h1{font-size:48px}}
@media(max-width:600px){.landing-main,.landing-nav{padding-left:18px;padding-right:18px}.landing-main{padding-top:45px}.hero h1{font-size:39px}.hero p{font-size:15px}.terminal-preview-body{height:390px}.preview-sidebar{display:none}.feature-grid{grid-template-columns:1fr}.landing-cta{margin-top:60px;padding:28px;align-items:flex-start;flex-direction:column}.landing-footer{flex-wrap:wrap}.chart-brand-name{display:none}.header-theme-button{display:none}}