.panel-center-top{display:flex;align-items:center;justify-content:space-between;}
.token-info{display:flex;align-items:center;gap:12px;}
.token-info img{width:32px;height:32px;border-radius:50%;}
.token-info h4{margin:0;font-size:1.25rem;color:#fff;}
.token-info h4 span{font-size:.8rem;color:#8a9cb2;}
.token-stats{display:flex;gap:1rem;text-align:right;}
.token-stats .stat-item{display:flex;flex-direction:column;}
.token-stats .stat-item small{font-size:.75rem;color:#8a9cb2;}
.token-stats .stat-item span{font-size:.9rem;font-weight:600;}

.panel-chart{padding:0;}
.timeframe-bar{display:flex;padding:.5rem 1rem;border-bottom:1px solid var(--navy-border);}
.timeframe-bar .time-btn{background:transparent;border:none;color:#8a9cb2;font-size:.85rem;padding:.25rem .75rem;border-radius:6px;}
.timeframe-bar .time-btn:hover{background:var(--btn-accent-hover);}
.timeframe-bar .time-btn.active{color:#fff;background:#2b5b75;}

.chart-main-area{height:500px;position:relative;}
#tvWidgetContainer,#lwChartContainer{position:absolute;width:100%;height:100%;}
.chart-placeholder-text{display:flex;align-items:center;justify-content:center;height:100%;color:#8a9cb2;font-size:1.5rem;}


/* ==================================
   CUSTOM CHART STYLING (Pixel Perfect)
   ================================== */
/* ===== Base panel ===== */
:root{
  --tv-toolbar-h: 38px;   /* toolbar + hairline height */
  --ohlc-header-h: 44px;  /* OHLC header height (agar visible) */
}
.panel-chart{
  background:#000; border:1px solid #363a45; border-radius:6px; overflow:hidden;
}
.chart-main-area{
  position:relative; height:500px;
  /* YAHI MAIN FIX: chart canvas/price-scale ko toolbar line ke neeche start karwana */
  padding-top: var(--tv-toolbar-h);
}
/* Agar OHLC header dikhana ho, parent par class add karo: .with-ohlc */
.chart-main-area.with-ohlc{
  padding-top: calc(var(--tv-toolbar-h) + var(--ohlc-header-h));
}

#tvWidgetContainer, #lwChartPanesContainer{
  position:absolute; inset:0;   /* padding ke baad se fill karega */
}
.chart-placeholder-text{
  display:flex; align-items:center; justify-content:center; height:100%;
  color:#8a9cb2; font-size:1.5rem;
}

/* ===== Toolbar (TV style) ===== */
.chart-controls-toolbar{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:4px; padding:2px 13px;
  border-bottom:1px solid #33353b;  /* hairline */
  background-color: #000;
}
.control-separator{ width:1px; height:20px; background:#363a45; margin:0 6px; }

/* Timeframes */
#lwChartTimeframes{ display:flex; gap:4px; }
#lwChartTimeframes button{
  background:transparent; border:none; color:#B2B5BE;
  padding:5px 10px; font-size:14px; font-weight:500; border-radius:4px; cursor:pointer;
}
#lwChartTimeframes button:hover{ background:#2a2e39; color:#fff; }
#lwChartTimeframes button.active{ background:#2a2e39; color:#fff; }

/* TF dropdown */
.tf-dropdown-wrapper{ position:relative; }
#tfDropdownTrigger{
  background:transparent; border:none; color:#B2B5BE;
  padding:5px 10px; font-size:14px; font-weight:500; border-radius:4px; cursor:pointer;
  display:flex; align-items:center; gap:4px;
}
#tfDropdownTrigger:hover,#tfDropdownTrigger.active{ background:#2a2e39; color:#fff; }
.tf-dropdown-menu{
  position:absolute; top:calc(100% + 5px); left:0; z-index:101;
  background:#1c202e; border:1px solid #363a45; border-radius:6px; width:80px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.tf-dropdown-item{ padding:8px 12px; color:#e5e3e3; font-size:14px; cursor:pointer; }
.tf-dropdown-item:hover{ background:#43434b; }

/* Chart type */
#lwChartTypeSelector{ display:flex; gap:4px; }
#lwChartTypeSelector button{
  background:transparent; border:none; color:#B2B5BE;
  padding:5px 8px; font-size:16px; border-radius:4px; cursor:pointer;
}
#lwChartTypeSelector button:hover,
#lwChartTypeSelector button.active{ background:#2a2e39; color:#fff; }

/* Indicators */
.indicators-button button{
  background:transparent; border:none; color:#B2B5BE;
  font-size:14px; font-weight:500; padding:5px 8px; border-radius:4px; cursor:pointer;
}
.indicators-button button:hover,
.indicators-button button.active{ background:#2a2e39; color:#fff; }

.indicators-dropdown{
  position:absolute; top:calc(100% + 5px); left:0; z-index:100;
  background:#1c202e; border:1px solid #363a45; border-radius:6px; width:250px;
  box-shadow:0 4px 12px rgba(0,0,0,.3); display:none;
}
.indicator-item{
  padding:10px 15px; color:#D9D9D9; font-size:14px; cursor:pointer;
  transition:background-color .2s; display:flex; justify-content:space-between; align-items:center;
}
.indicator-item:hover{ background:#2a2e39; }
.indicator-item.active::after{ content:'✔'; color:#00c38c; }
.indicator-item.disabled{ color:#555; cursor:not-allowed; }
.indicator-item.disabled:hover{ background:transparent; }
.control-separator-dropdown{ height:1px; background:#363a45; margin:5px 0; }

/* Camera — ultra-thin outline (no pill) */
.snapshot-button{ position:relative; display:flex; align-items:center; }
.snapshot-button .icon-only{
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding:0 !important; margin:0; width:auto; height:auto; line-height:1; cursor:pointer;
  color:#9b9ea9;
}
.snapshot-button .icon-only:hover{ color:#fff; }
.snapshot-button .snapcam{ display:block; width:30px; height:30px; pointer-events:none; }

/* Tooltip */
.snapshot-button .snapshot-tooltip{
  position:absolute; top:50%; right:calc(100% + 8px); transform:translateY(-50%);
  background:#242221; color:#fff; padding:9px 27px; border-radius:4px; font-size:13px; white-space:nowrap;
  pointer-events:none; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
.snapshot-button:hover .snapshot-tooltip{ opacity:1; visibility:visible; }

/* ===== OHLC header (under toolbar) ===== */
#lwChartHeader{
  position:absolute; left:10px; right:10px; z-index:10;
  top: var(--tv-toolbar-h);           /* toolbar ke just neeche */
  padding:10px 0; display:flex; justify-content:space-between; align-items:center; pointer-events:none;
}
#lwSymbolInfo{ display:flex; align-items:center; gap:8px; font-family:Arial, sans-serif; }
#lwSymbolInfo img{ width:20px; height:20px; }
#lwSymbolInfo span{ font-size:16px; font-weight:400; color:#D9D9D9; }
#lwSymbolInfo #lwSymbolTimeframe, #lwSymbolInfo #lwSymbolExchange{ font-size:13px; color:#B2B5BE; font-weight:300; }

.ohlc-data-container{ display:flex; align-items:center; font-family:Arial, sans-serif; font-size:14px; color:#B2B5BE; }
#lwChartHeader .ohlc-item{ margin-left:12px; }
#lwChartHeader .ohlc-item .label{ color:#B2B5BE; font-weight:600; margin-right:4px; }
#lwChartHeader .ohlc-item .value{ color:#D9D9D9; }
#lwOHLCChange{ margin-left:12px; font-weight:600; }
#lwChartHeader .ohlc-item.change-positive .label,
#lwChartHeader .ohlc-item.change-positive .value,
#lwChartHeader .ohlc-item.change-value.change-positive{ color:#00c38cd8 !important; }
#lwChartHeader .ohlc-item.change-negative .label,
#lwChartHeader .ohlc-item.change-negative .value,
#lwChartHeader .ohlc-item.change-value.change-negative{ color:#ff5656ef !important; }

/* ===== Panes ===== */
.chart-pane{ transition:height .1s ease-in-out; }
#lwRsiPane, #lwMacdPane, #lwVolumePane{ border-top:1px solid #363a45; }

/* ===== Footer ===== */
.chart-footer-bar{
  display:flex; justify-content:space-between; align-items:center;
  height:35px; background:#000; border-top:1px solid #363a45; padding:0 10px;
  font-family:Arial, sans-serif; font-size:14px; color:#eceef5bb;
}
.footer-timeframes{ display:flex; gap:12px; }
.footer-timeframes span{ cursor:pointer; transition:color .2s; }
.footer-timeframes span:hover{ color:#686161; }
.footer-clock{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }