#depthSettingsModal{z-index:110 !important}
#volumeColorsModal{z-index:110 !important}
.depth-settings-modal{max-width:440px; overflow:visible}
.depth-width-control{display:flex; align-items:center; gap:12px; flex:1}
.depth-width-control input[type="range"]{flex:1}
.depth-width-control span{min-width:32px; text-align:center; color:#ff5c1a; font-weight:600; font-size:13px}

#depthIndicatorsRow .depth-header .depth-gear{width:22px; height:22px; border:1px solid #2a2a30; background:#16161a; color:#bbb; border-radius:6px; display:grid; place-items:center; cursor:pointer; padding:0}
#depthIndicatorsRow .depth-header .depth-gear:hover{background:#1d1d22; color:#fff; border-color:#3a3a40}
.shape-style-panel{position:absolute; left:8px; bottom:8px; display:flex; flex-wrap:wrap; gap:8px; background:rgba(26,26,32,.95); border-top:2px solid #ff5c1a; border-radius:8px; padding:12px 16px; z-index:30; backdrop-filter:blur(12px); box-shadow:0 4px 20px rgba(0,0,0,.6); min-width:300px}
.shape-style-panel label{display:flex; align-items:center; gap:8px; color:#e5e5e5; font-size:12px; font-weight:500; min-width:fit-content}
.shape-style-panel .shape-delete{background:#1a1a20; border:none; color:#ff5c1a; border-radius:6px; height:24px; padding:0 6px; cursor:pointer}
.shape-style-panel .shape-delete:hover{background:#ff5c1a; color:#fff}
.shape-style-panel input[type="color"]{width:24px; height:20px; border:1px solid #ff5c1a; border-radius:4px; padding:0; background:#0f0f12}
.shape-style-panel input[type="range"]{
  width:120px; 
  height:6px; 
  background:#333; 
  border-radius:3px; 
  outline:none; 
  -webkit-appearance:none; 
  cursor:pointer;
}
.shape-style-panel input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; 
  width:16px; 
  height:16px; 
  background:#ff5c1a; 
  border-radius:50%; 
  cursor:pointer; 
  box-shadow:0 2px 6px rgba(255,92,26,.4);
}
.shape-style-panel input[type="range"]::-moz-range-thumb{
  width:16px; 
  height:16px; 
  background:#ff5c1a; 
  border-radius:50%; 
  cursor:pointer; 
  border:none;
}
.shape-style-panel select{background:#15151a; border:none; color:#ddd; border-radius:6px; padding:2px 8px; height:24px}

.shape-style-panel input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  background:#333;
  border:2px solid #666;
  border-radius:3px;
  cursor:pointer;
  position:relative;
  transition:all 0.2s ease;
}

.shape-style-panel input[type="checkbox"]:checked{
  background:#ff5c1a;
  border-color:#ff5c1a;
}

.shape-style-panel input[type="checkbox"]:checked::after{
  content:'✓';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color:#fff;
  font-size:10px;
  font-weight:bold;
}

.shape-style-panel input[type="checkbox"]:hover{
  border-color:#ff5c1a;
}

.shape-style-panel #textStyleGroup{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  background:rgba(20,20,26,.6);
  border:none;
  border-radius:8px;
  padding:8px 12px;
  width:100%;
  margin-top:8px;
}

.shape-style-panel #textStyleGroup label{
  display:flex;
  align-items:center;
  gap:8px;
  color:#e5e5e5;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}

.shape-style-panel #textStyleGroup input[type="text"]{
  width:160px;
  height:26px;
  background:#15151a;
  border:none;
  border-radius:6px;
  color:#e5e5e5;
  padding:0 10px;
  font-size:12px;
  transition:all 0.2s ease;
}

.shape-style-panel #textStyleGroup input[type="text"]:focus{
  outline:none;
  background:#1a1a20;
  box-shadow:0 0 0 1px #ff5c1a;
}

.shape-style-panel #textStyleGroup input[type="color"]{
  width:26px;
  height:26px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:all 0.2s ease;
  background:#0f0f12;
}

.shape-style-panel #textStyleGroup input[type="color"]:hover{
  transform:scale(1.05);
  box-shadow:0 0 0 1px #ff5c1a;
}
:root{
  --bg-0:#0a0a0b;
  --bg-1:#0e0e10;
  --panel:#141417;
  --text:#f0f0f3;
  --muted:#a8a9b0;
  --accent:#ff5c1a;
  --green:#10b981;
  --red:#ef4444;
  --grid: rgba(48, 47, 47, 0.15);
  --grid-soft: rgba(41, 41, 41, 0.08);
  --volume-up-color:#10b981;
  --volume-down-color:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100vh; margin:0; padding:0; overflow:hidden;}
body{
  background: var(--bg-0);
  color:var(--text); font-family:'Comfortaa', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
::selection{background:#ff6b35; color:#fff}
::-moz-selection{background:#ff6b35; color:#fff}
.app{height:100vh; display:flex; flex-direction:column;}
header{
  display:flex; align-items:center; gap:20px; padding:12px 16px;
  border-bottom:1px solid rgba(255,92,26,0.15); background: linear-gradient(180deg, #121214, #0e0e10);
  position:sticky; top:0; z-index:5; flex-shrink: 0;
}
main{flex: 1; overflow: hidden; display: flex; flex-direction: column;}
.brand{display:flex; align-items:center; gap:14px; font-weight:700; font-size:22px; letter-spacing:0.5px;}
.logo{width:40px; height:40px; border-radius:10px; background:url('logo.png') center/cover; box-shadow:0 2px 10px rgba(0,0,0,.4)}
.brand b{font-family:'Inter', sans-serif; background:linear-gradient(135deg, #ffffff 0%, #ff6b35 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:700;}
.pair{padding:8px 12px; background:#121216; border:1px solid #1f1f24; border-radius:10px; font-weight:600; display:flex; align-items:center; gap:8px; cursor:pointer; transition:.15s ease}
.pair:hover{background:#171720; border-color:rgba(255,92,26,0.3)}
.pair-info{font-size:12px; color:var(--muted); font-weight:400; margin-left:8px}

.modal{
  position:fixed; 
  inset:0; 
  background:rgba(10,10,11,0.92); 
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:100; 
  display:none; 
  align-items:center; 
  justify-content:center;
  opacity:0;
  transition:opacity 0.2s ease;
}
.modal.open{
  display:flex;
  opacity:1;
}
.modal-content{
  background:linear-gradient(145deg, #141419 0%, #1a1a20 100%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  width:90%;
  max-width:800px;
  max-height:90vh;
  overflow:hidden;
  box-shadow:0 25px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  transform:scale(0.95);
  transition:transform 0.2s ease;
}
.modal.open .modal-content{
  transform:scale(1);
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 28px 20px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
}
.modal-title{
  font-size:18px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.02em;
}
.modal-close{
  width:32px;
  height:32px;
  border:none;
  background:rgba(255,255,255,0.08);
  color:var(--muted);
  border-radius:8px;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:18px;
  transition:all 0.15s ease;
}
.modal-close:hover{
  background:rgba(239,68,68,0.15);
  color:#ef4444;
  transform:scale(1.05);
}
.modal-body{
  padding:28px;
  max-height:calc(90vh - 120px);
  overflow-y:auto;
}

.symbol-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); 
  gap:12px;
}
.symbol-item{
  padding:14px 12px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  transition:all 0.15s ease;
  position:relative;
  overflow:hidden;
  display:block;
}
.symbol-item:hover{
  border-color:rgba(255,92,26,0.3);
}
.symbol-item.active{
  background:rgba(255,92,26,0.1);
  border-color:rgba(255,92,26,0.4);
  color:var(--text);
}

.symbol-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}

.symbol-name{
  font-weight:700;
  font-size:14px;
  color:var(--text);
}

.symbol-controls{
  display:flex;
  align-items:center;
  gap:8px;
}

.symbol-price{
  font-size:12px;
  color:var(--muted);
  font-weight:500;
  margin-bottom:2px;
}

.symbol-change{
  font-size:12px;
  font-weight:500;
}

.indicator-list{display:flex; flex-direction:column; gap:12px}
.indicator-item{display:flex; align-items:center; justify-content:space-between; padding:12px; background:#1a1a20; border:1px solid #2a2a30; border-radius:10px}
.indicator-info h4{margin:0; font-size:14px; font-weight:600}
.indicator-info p{margin:4px 0 0; font-size:12px; color:var(--muted)}
.toggle{position:relative; width:36px; height:20px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:10px; cursor:pointer; transition:all .2s ease}
.toggle.active{background:rgba(255,92,26,0.9); border-color:rgba(255,92,26,1)}
.toggle::after{content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; background:rgba(255,255,255,0.9); border-radius:50%; transition:all .2s ease; box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.toggle.active::after{left:18px; background:#fff}

[title] {
  position: relative;
}


.custom-tooltip {
  position: fixed;
  background: linear-gradient(180deg, #121214, #0e0e10);
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid #1a1a1c;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.custom-tooltip.show {
  opacity: 1;
  visibility: visible;
}

.custom-tooltip::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  border: 3px solid transparent;
  border-bottom: 3px solid #121214;
}

@keyframes tooltipShow {
  to {
    opacity: 1;
    visibility: visible;
  }
}


.indicators-modal{
  max-width:900px;
}

.symbol-modal{
  max-width:800px;
}

.symbol-modal .modal-body{
  padding:20px;
  max-height:calc(90vh - 100px);
  min-height:500px;
  height:500px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative;
}

.symbol-preloader{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:none;
  align-items:center;
  justify-content:center;
  transition:opacity 0.6s ease, transform 0.6s ease;
  background:rgba(20,20,23,0.95);
  z-index:10;
}

.symbol-preloader.hide{
  opacity:0;
  transform:scale(0.95);
  pointer-events:none;
}

.chart-bars{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:80px;
  justify-content:center;
}

.bar{
  width:12px;
  background:#ff5c1a;
  border-radius:6px;
  animation:barPulse 1.5s ease-in-out infinite;
}

.bar:nth-child(1){height:45px; animation-delay:0s;}
.bar:nth-child(2){height:65px; animation-delay:0.15s;}
.bar:nth-child(3){height:35px; animation-delay:0.3s;}
.bar:nth-child(4){height:70px; animation-delay:0.45s;}
.bar:nth-child(5){height:50px; animation-delay:0.6s;}
.bar:nth-child(6){height:40px; animation-delay:0.75s;}
.bar:nth-child(7){height:60px; animation-delay:0.9s;}

@keyframes barPulse{
  0%, 100%{
    transform:scaleY(1);
    opacity:0.8;
  }
  50%{
    transform:scaleY(1.3);
    opacity:1;
  }
}

.symbol-modal-content{
  opacity:0;
  transition:opacity 0.6s ease;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.symbol-modal .search-container{margin:0;}
.symbol-modal .search-input{height:42px; font-size:14px;}
.symbol-modal .favorites-grid{margin-top:8px;}
.symbol-item.favorite-symbol.active{outline:1px solid #ff5c1a;}
.favorite-btn.active{color:#ff5c1a;}
.favorite-btn.active svg{fill:#ff5c1a; stroke:#ff5c1a;}

.symbol-modal-content.show{
  opacity:1;
}

.indicators-modal .modal-body{
  padding:20px;
  max-height:calc(90vh - 100px);
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow-y:auto;
  overflow-x:hidden;
}

.favorites-section{
  background:linear-gradient(145deg, rgba(255,92,26,0.08) 0%, rgba(255,92,26,0.02) 100%);
  border:1px solid rgba(255,92,26,0.2);
  border-radius:12px;
  padding:16px;
  margin-bottom:4px;
}

.favorites-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

.favorites-header h4{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.02em;
}

.star-icon{
  width:18px;
  height:18px;
  color:#ff5c1a;
}

.favorites-container{
  min-height:60px;
}

.favorites-container .custom-indicators{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:8px;
  margin-top:0;
}

.favorites-container .symbol-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:8px;
  margin-top:0;
}

.favorite-item{
  background:rgba(255,92,26,0.08);
  border:1px solid rgba(255,92,26,0.2);
}

.favorite-item:hover{
  background:rgba(255,92,26,0.12);
  border-color:rgba(255,92,26,0.3);
}

.favorite-symbol{
  background:rgba(255, 255, 255, 0.02);
  border:1px solid rgba(255,255,255,0.06);
}

.favorite-symbol:hover{
  border-color:rgba(255,92,26,0.3);
}

.favorite-symbol.active{
  background:rgba(255,92,26,0.15);
  border-color:rgba(255,92,26,0.4);
}

.favorites-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:20px;
  text-align:center;
}

.favorites-empty svg{
  width:32px;
  height:32px;
  color:rgba(255,92,26,0.3);
}

.favorites-empty p{
  margin:0;
  font-size:13px;
  color:var(--muted);
  font-weight:500;
}

.custom-indicators{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:10px;
  margin-top:8px;
}

.custom-indicator-btn{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  transition:all 0.15s ease;
  position:relative;
  overflow:hidden;
  display:block;
}

.custom-indicator-btn:hover{
  border-color:rgba(255,92,26,0.3);
  background:rgba(255,255,255,0.04);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.custom-indicator-btn.active{
  background:rgba(255,92,26,0.1);
  border-color:rgba(255,92,26,0.4);
}

.indicator-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}

.indicator-title{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;
}

.indicator-controls{
  display:flex;
  align-items:center;
  gap:8px;
}

.favorite-btn{
  width:24px;
  height:24px;
  border:none;
  background:none;
  color:var(--muted);
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  border-radius:4px;
  position:relative;
}

.favorite-btn:hover{
  color:#ff5c1a;
  background:rgba(255,92,26,0.1);
  transform:scale(1.1);
}

.favorite-btn.active{
  color:#ff5c1a;
}

.favorite-btn.active svg{
  fill:#ff5c1a;
  animation:favoriteAdded 0.3s ease;
}

@keyframes favoriteAdded{
  0%{transform:scale(1) rotate(0deg);}
  50%{transform:scale(1.3) rotate(15deg);}
  100%{transform:scale(1) rotate(0deg);}
}

.favorite-btn svg{
  width:16px;
  height:16px;
  transition:all 0.2s ease;
}

.indicator-description{
  font-size:11px;
  color:var(--muted);
  line-height:1.3;
  margin:0;
  font-weight:400;
  opacity:0.8;
}


.settings-section{
  margin-bottom:16px;
  padding:12px 14px;
  background:rgba(255,255,255,0.01);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:10px;
}
.settings-section:last-child{
  margin-bottom:0;
}
.settings-section h4{
  margin:0 0 8px;
  font-size:14px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;
  opacity:0.9;
}
.setting-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.setting-item:last-child{
  border-bottom:none;
}
.setting-item label{
  font-size:15px;
  color:var(--text);
  font-weight:600;
  letter-spacing:-0.01em;
}
.setting-item select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:linear-gradient(145deg, #1a1a20, #141419);
  border:1px solid rgba(255,92,26,0.2);
  color:var(--text);
  padding:12px 40px 12px 16px;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
  min-width:150px;
  cursor:pointer;
  box-shadow:0 4px 8px rgba(0,0,0,0.2);
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5c1a' stroke-width='2'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
}
.setting-item select:hover{
  border-color:#ff5c1a;
}
.setting-item select:focus{
  outline:none;
  border-color:#ff5c1a;
}
.setting-item select option{
  background:#0d0d10;
  color:var(--text);
  padding:12px 16px;
  font-weight:500;
  border:1px solid rgba(255,92,26,0.2);
  border-radius:12px;
  margin:4px 8px;
}
.setting-item select option:hover{
  background:#141419;
  border-color:#ff5c1a;
}
.setting-item select option:checked{
  background:rgba(255,92,26,0.15);
  border-color:#ff5c1a;
  color:#ff5c1a;
}

.custom-select{
  position:relative;
  min-width:120px;
}
.custom-select-trigger{
  background:#1a1a20;
  border:1px solid #333;
  color:var(--text);
  padding:0 12px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:38px;
  box-sizing:border-box;
  line-height:38px;
}
.custom-select-trigger:hover{
  border-color:#ff5c1a;
}
.custom-select-value{
  flex:1;
  text-align:left;
  line-height:38px;
  height:38px;
  display:flex;
  align-items:center;
}
.custom-select-arrow{
  width:16px;
  height:16px;
  color:#a8a9b0;
  transition:transform 0.15s ease;
  margin-left:8px;
  flex-shrink:0;
}
.custom-select.open .custom-select-arrow{
  transform:rotate(180deg);
  color:#ff5c1a;
}
.custom-select-options{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#1a1a20;
  border:1px solid #333;
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  z-index:1000;
  margin-top:2px;
  padding:4px;
  display:none;
}
.custom-select.open .custom-select-options{
  display:block;
}
.custom-option{
  padding:8px 12px;
  cursor:pointer;
  border-radius:4px;
  font-weight:500;
  font-size:13px;
  transition:all 0.1s ease;
}
.custom-option:hover{
  background:rgba(255,92,26,0.1);
  color:#ff5c1a;
}
.custom-option.active{
  color:#ff5c1a;
  font-weight:600;
}

.volume-colors-modal{
  max-width:440px;
  overflow:visible;
}
.volume-colors-modal .modal-body{
  padding:28px;
  overflow:visible;
}
.volume-color-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.volume-color-row:last-of-type{
  border-bottom:none;
}
.volume-label{
  font-size:15px;
  color:var(--text);
  font-weight:600;
}
.color-picker-container{
  position:relative;
  z-index:1;
}
.hidden-color-input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none;
  background:#1a1a20;
  border:1px solid #333;
  border-radius:8px;
  font-family:'Comfortaa',sans-serif;
  color:#f0f0f3;
}
.hidden-color-input::-webkit-color-swatch-wrapper{
  padding:0;
  border:none;
  border-radius:8px;
  background:#1a1a20;
}
.hidden-color-input::-webkit-color-swatch{
  border:1px solid #333;
  border-radius:8px;
  background:#1a1a20;
}
.hidden-color-input::-moz-color-swatch{
  border:1px solid #333;
  border-radius:8px;
  background:#1a1a20;
}
.color-preview-btn{
  width:32px;
  height:32px;
  border:1px solid #333;
  border-radius:6px;
  cursor:pointer;
  transition:border-color 0.15s ease;
}
.color-preview-btn:hover{
  border-color:#ff5c1a;
}
.color-palette-dropdown{
  position:absolute;
  top:0;
  left:calc(100% + 10px);
  background:#1a1a20;
  border:1px solid #333;
  border-radius:8px;
  padding:12px;
  z-index:99999;
  display:none;
  grid-template-columns:repeat(6, 1fr);
  gap:6px;
  width:180px;
  height:auto;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  overflow:hidden;
}
.color-palette-dropdown.active{
  display:grid;
}
.palette-color{
  width:22px;
  height:22px;
  border-radius:4px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.1);
  transition:border-color 0.15s ease;
}
.palette-color:hover{
  border-color:#ff5c1a;
}
input[type="color"]{
  background:#1a1a20 !important;
  border:1px solid #333 !important;
  border-radius:8px !important;
  font-family:'Comfortaa',sans-serif !important;
  color:#f0f0f3 !important;
}
input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0 !important;
  border:none !important;
  border-radius:8px !important;
  background:#1a1a20 !important;
}
input[type="color"]::-webkit-color-swatch{
  border:1px solid #333 !important;
  border-radius:8px !important;
  background:#1a1a20 !important;
}
input[type="color"]::-moz-color-swatch{
  border:1px solid #333 !important;
  border-radius:8px !important;
  background:#1a1a20 !important;
}
.volume-actions{
  display:flex;
  gap:12px;
  margin-top:24px;
  justify-content:center;
}
.volume-btn{
  padding:10px 20px;
  border-radius:20px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  border:1px solid #333;
  background:#1a1a2000;
  color:var(--text);
  min-width:90px;
  transition:all 0.2s ease;
}
.volume-btn:hover{
  border-color:#ff5c1a;
  background:#22222200;
}
.apply-btn{
  background:#ff5c1a;
  border:1px solid #ff5c1a;
  color:white;
}
.apply-btn:hover{
  background:#e54a17;
  border-color:#e54a17;
}
.color-palette{
  position:absolute;
  top:100%;
  left:-50px;
  background:#1a1a20;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  padding:12px;
  z-index:2000;
  margin-top:6px;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:6px;
  width:180px;
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
}
.palette-color{
  width:22px;
  height:22px;
  border-radius:4px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.1);
}
.palette-color:hover{
  border-color:#ff5c1a;
}

.toolbar{display:flex; align-items:center; gap:8px; margin-left:auto}
.btn, .seg button{
  height:36px; padding:0 14px; border-radius:8px; border:1px solid #222228;
  background:#141419; color:var(--text); 
  cursor:pointer;
  cursor:-webkit-grab;
  cursor:-moz-grab;
  display:inline-flex; align-items:center; gap:6px;
  transition:.15s ease; font-weight:500; font-size:13px;
  font-family:'Comfortaa', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.btn:active, .seg button:active{
  cursor:grabbing;
  cursor:-webkit-grabbing;
  cursor:-moz-grabbing;
}
.btn:hover, .seg button:hover{border-color:rgba(255,92,26,0.3); background:rgba(255,92,26,0.05)}
.btn.active, .seg button.active{background:var(--accent); color:#fff; border-color:var(--accent)}

.search-container{position:relative; margin-left:8px}
.search-input{width:200px; height:36px; padding:0 12px; background:#141419; border:1px solid #222228; border-radius:8px; color:var(--text); font-size:13px; font-family:'Comfortaa', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.search-input::placeholder{color:var(--muted); font-size:13px; font-family:'Comfortaa', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.search-input:focus{outline:none; border-color:rgba(255,92,26,0.3)}
.search-results{position:absolute; top:100%; left:0; right:0; background:var(--panel); border:1px solid #2a2a30; border-radius:8px; max-height:200px; overflow-y:auto; z-index:10; display:none}
.search-result{padding:8px 12px; cursor:pointer; border-bottom:1px solid #1a1a20; transition:.15s ease}
.search-result:hover{background:#1a1a20}
.search-result:last-child{border-bottom:none}
.search-symbol{font-weight:600; font-size:13px; font-family:'Comfortaa', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.search-preview{font-size:11px; color:var(--muted); margin-top:2px; font-family:'Comfortaa', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.search-result.no-results{color:var(--muted); font-style:italic; cursor:default}
.search-result.no-results:hover{background:transparent}

.modal-body::-webkit-scrollbar{
  width:6px;
}
.modal-body::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.02);
  border-radius:3px;
}
.modal-body::-webkit-scrollbar-thumb{
  background:rgba(255,92,26,0.3);
  border-radius:3px;
  transition:background 0.15s ease;
}
.modal-body::-webkit-scrollbar-thumb:hover{
  background:rgba(255,92,26,0.5);
}

.zoom-controls{position:absolute; top:16px; left:16px; display:flex; gap:4px; z-index:15}
.zoom-btn{width:32px; height:32px; background:rgba(0,0,0,.35); border:1px solid #24242a; color:var(--text); border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s ease; padding:0; box-sizing:border-box}
.zoom-btn:hover{background:rgba(255,107,53,0.1); border-color:rgba(255,107,53,0.3); color:rgba(255,107,53,0.8)}
.zoom-btn.active{background:rgba(255,107,53,0.8); border-color:rgba(255,107,53,0.9); color:white}
.zoom-btn svg{width:16px; height:16px; flex-shrink:0; stroke-width:2.5}

.candle-type-selector{display:flex; gap:4px; margin-left:8px}
.candle-type-btn{height:36px; padding:0 12px; background:#141419; border:1px solid #222228; border-radius:8px; color:var(--text); cursor:pointer; font-size:12px; transition:.15s ease; font-family:'Comfortaa', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.candle-type-btn:hover{border-color:rgba(255,92,26,0.3)}
.candle-type-btn.active{background:var(--accent); border-color:var(--accent); color:#fff}

.seg{
  display:flex; 
  gap:4px; 
  background:#101015; 
  padding:4px; 
  border-radius:10px; 
  border:1px solid #1f1f24; 
  position:relative;
}
.seg::before{
  content:'';
  position:absolute;
  top:4px;
  left:4px;
  height:32px;
  background:var(--accent);
  border-radius:6px;
  transition:transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index:1;
  width:var(--slider-width, 32px);
  transform:translateX(var(--slider-x, 0px));
}
.seg button{
  background:transparent; 
  border:none; 
  height:32px; 
  padding:0 12px; 
  border-radius:6px; 
  position:relative; 
  z-index:2; 
  color:var(--muted); 
  font-weight:500; 
  transition:color 0.25s ease;
  white-space:nowrap;
}
.seg button.active{
  color:#ffffff;
}

.container{display:grid; grid-template-columns:56px 1fr; flex:1; overflow:hidden; height:100%;}
.chart-wrap{height:100%; display:flex; flex-direction:column; overflow:hidden;}

.chart-area{flex:1; position:relative; overflow:hidden; min-height:0; height:100%;}
.price-scale-grip{position:absolute; right:0; top:0; width:80px; height:100%; cursor:ns-resize; z-index:25; background:transparent}

#chart{
  width:100% !important; 
  height:100% !important; 
  display:block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
#overlay{
  width:100% !important; 
  height:100% !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.depth-panel{
  background:transparent;
  border-top:none;
  padding:0;
  margin:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  box-sizing:border-box;
  position:relative;
}
.depth-panel:empty{display:none;}

.depth-indicators-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:100%;
  border:none;
  border-radius:0;
  overflow:visible;
  box-sizing:border-box;
  padding:0;
  background:transparent;
}

.depth-item{
  position:relative;
  display:block;
  background:transparent;
  border:none;
  border-radius:12px;
  padding:0;
  gap:0;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  transition:background-color 0.15s ease;
  height:120px;
  margin-bottom:0;
  box-shadow:none;
  overflow:hidden;
  resize:vertical;
  min-height:80px;
}
.depth-item:hover{background:#1a1a1a00}
.depth-item:not(:last-child){
  border-bottom:none;
}
.depth-item::before{display:none}

.depth-label{
  font-family:'Inter', 'Segoe UI', sans-serif;
  font-weight:600;
  color:#ff5c1a;
  font-size:14px;
  letter-spacing:0.5px;
  text-align:left;
  background:transparent;
  border:none;
  padding:0;
  text-transform:none;
  position:absolute;
  top:8px;
  left:8px;
  z-index:3;
}

.depth-prices{display:none}
.depth-price{
  font-family:'Roboto Mono', 'Consolas', monospace;
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  text-align:left;
  color:#ffffff;
  background:none;
  border:none;
  padding:0;
  font-variant-numeric:tabular-nums;
  display:flex;
  align-items:center;
  gap:4px;
}
#depthIndicatorsRow .depth-item .depth-header{
  position:absolute;
  top:8px;
  left:8px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
}
.depth-header .depth-remove{margin-left:8px; position:static; top:auto; right:auto}

.depth-badge{
  display:flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.25));
  border:1px solid #24242a;
  border-radius:8px;
  padding:6px 8px;
  font-size:12px;
  color:#ddd;
}
.depth-badge .name{font-weight:700; color:#ff8c42}
.depth-badge .kv{display:flex; align-items:center; gap:6px}
.depth-badge .kv .badge-ask, .depth-badge .kv .badge-bid{min-width:34px; display:inline-block; text-align:right}
.depth-badge .ask-tag{color:#ef4444; font-weight:700}
.depth-badge .bid-tag{color:#10b981; font-weight:700}
.depth-badge .sep{opacity:.3}

.depth-order{display:flex; align-items:center; gap:6px; margin-left:6px}
.depth-order button{width:22px; height:22px; border:1px solid #2a2a30; background:#16161a; color:#bbb; border-radius:6px; display:grid; place-items:center; cursor:pointer; padding:0}
.depth-order button:hover{background:#1d1d22; color:#fff; border-color:#3a3a40}
.depth-order .depth-remove{width:22px; height:22px}

.depth-right{display:none}
.depth-value-badge{
  position:absolute;
  right:8px;
  transform:translateY(-50%);
  min-width:56px;
  text-align:center;
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
  font-weight:800;
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  z-index:4;
}
.depth-value-badge.bid{background:#10b981}
.depth-value-badge.ask{background:#ef4444}

.depth-tooltip{position:absolute; z-index:10; pointer-events:none; background:linear-gradient(180deg,#121214,#0e0e10); color:#d0d0d5; border:1px solid #1a1a1f; font-size:11px; padding:4px 6px; border-radius:6px; white-space:nowrap; display:none; box-shadow:0 6px 18px rgba(0,0,0,.45)}

.depth-live-badge{
  position:absolute;
  right:56px;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  display:flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.25));
  border:1px solid #24242a;
  border-radius:8px;
  padding:4px 8px;
  font-size:12px;
  color:#ddd;
  cursor:grab;
  user-select:none;
  display:none;
}
.depth-live-badge:active{cursor:grabbing}
.depth-live-badge .tick{
  display:flex; align-items:center; gap:4px; font-weight:800;
}
.depth-live-badge .tick.up .box{background:#ef4444}
.depth-live-badge .tick.dn .box{background:#10b981}
.depth-live-badge .box{width:10px; height:10px; border-radius:2px; border:1px solid rgba(255,255,255,.08)}
.depth-live-badge .price{font-variant-numeric:tabular-nums}

.chart-wrap.depth-focus .chart-area{display:none}
.chart-wrap.depth-focus .depth-panel{height:100%}
.chart-wrap.depth-focus #depthIndicatorsRow{height:100%}
.chart-wrap.depth-focus .depth-item{height:100%}
.chart-wrap.depth-focus .depth-item:not(.focused){display:none}
.chart-wrap.depth-focus .depth-live-badge{pointer-events:none; cursor:default}

.depth-scale-col{
  position:absolute;
  right:0;
  top:0;
  width:50px;
  height:100%;
  cursor:ns-resize;
  z-index:100;
  pointer-events:auto !important;
  transition:background-color 0.2s ease;
}
.depth-scale-col *{
  pointer-events:none !important;
}
.depth-scale-col:hover{
  background:rgba(255,255,255,0.02);
}
.depth-scale-col:active{
  background:rgba(255,255,255,0.04);
  cursor:grabbing;
}

.scale-tag{
  position:absolute;
  right:4px;
  min-width:44px;
  padding:4px 6px;
  border-radius:3px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.3px;
  color:#fff;
  text-align:right;
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
  pointer-events:none !important;
  opacity:.92;
  transition:top 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.12s ease;
  will-change:top;
  backdrop-filter:blur(4px);
  z-index:3;
}
.scale-tag.ask{
  background:linear-gradient(135deg, rgba(239,68,68,.96) 0%, rgba(220,38,38,.96) 100%);
  border:1px solid rgba(239,68,68,.3);
  border-top-color:rgba(255,255,255,.2);
  border-left-color:rgba(255,255,255,.15);
}
.scale-tag.bid{
  background:linear-gradient(135deg, rgba(16,185,129,.96) 0%, rgba(5,150,105,.96) 100%);
  border:1px solid rgba(16,185,129,.3);
  border-top-color:rgba(255,255,255,.2);
  border-left-color:rgba(255,255,255,.15);
}

.scale-back{
  position:absolute;
  right:6px;
  font-size:9px;
  font-weight:400;
  color:rgba(136,136,136,0.35);
  z-index:1;
  pointer-events:none;
  transform:translateY(-50%);
  text-shadow:0 1px 3px rgba(0,0,0,.95);
  letter-spacing:0.2px;
  opacity:1;
  transition:top 0.15s ease, opacity 0.15s ease;
}

.scale-line{
  position:absolute;
  left:-300px;
  width:calc(100% + 300px);
  height:1px;
  background:rgba(255,255,255,0.025);
  z-index:0;
  pointer-events:none !important;
  transition:top 0.15s ease;
}

/* Глобальный прицел для всего приложения */
.global-crosshair{position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:9999; display:none}
.global-crosshair-v{position:absolute; top:0; width:0.5px; transform:translateX(-0.25px); background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.5) 0px, rgba(255,255,255,0.5) 3px, transparent 3px, transparent 7px)}
.global-crosshair-h{position:absolute; left:0; right:0; height:0.5px; transform:translateY(-0.25px); background:repeating-linear-gradient(to right, rgba(255,255,255,0.5) 0px, rgba(255,255,255,0.5) 3px, transparent 3px, transparent 7px)}

/* Цена свечи в ценовой шкале основного графика */
.crosshair-price{position:absolute; width:auto; min-width:56px; max-width:72px; height:20px; background:rgba(128,128,128,0.8); color:#fff; font-size:11px; font-weight:500; border-radius:4px; pointer-events:none; z-index:20; display:none; border:1px dashed rgba(128,128,128,0.9); text-align:center; line-height:18px; display:flex; align-items:center; justify-content:center; white-space:nowrap; padding:0 6px}
.crosshair-price.green{background:rgba(16,185,129,0.9); border-color:rgba(16,185,129,0.95)}
.crosshair-price.red{background:rgba(239,68,68,0.9); border-color:rgba(239,68,68,0.95)}

.depth-scale-grip{display:none}

.depth-item.fullscreen{position:fixed; inset:60px 16px 16px 16px; z-index:2000; background:rgba(14,14,16,0.98); border:1px solid #2a2a30; border-radius:12px; height:auto}
.depth-price.ask{ 
  color:#ff4444;
}
.depth-price.bid{ 
  color:#00ff88;
}


.depth-minichart{
  width:100%;
  max-width:100%;
  min-width:0;
  height:100%;
  background:#0d0d0f;
  border:none;
  border-radius:0;
  position:relative;
  overflow:hidden;
  margin:0;
  display:block;
  transition:opacity 0.2s ease;
  cursor:pointer;
  box-sizing:border-box;
}

.depth-minichart:hover{opacity:0.96}

.depth-remove{
  background:rgba(0,0,0,.35);
  border:1px solid #24242a;
  color:#bbb;
  cursor:pointer;
  font-size:14px;
  padding:0;
  border-radius:8px;
  transition:opacity .15s ease, background .15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  font-weight:600;
  line-height:1;
  z-index:3;
}
.depth-remove:hover{background:rgba(239,68,68,0.2); color:#fff}
.depth-remove::before{content:'×'; font-size:14px}


#deleteOneBtn{margin-right:8px}

.side{
  border-right:1px solid #1a1a1f; background:#0d0d10; display:flex; flex-direction:column; gap:8px; padding:8px; align-items:center;
  grid-row:1 / -1;
}
.tool{
  width:40px; height:40px; border-radius:10px; border:1px solid #222228; 
  background:#141419; display:grid; place-items:center; 
  cursor:pointer;
  cursor:-webkit-grab;
  cursor:-moz-grab;
  transition:.15s; position:relative;
  font-family:'Comfortaa', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.tool:active{
  cursor:grabbing;
  cursor:-webkit-grabbing;
  cursor:-moz-grabbing;
}
.tool:hover{
  background:#171720; 
  border-color:rgba(255,92,26,0.3);
}
.tool.active{
  background:var(--accent); 
  border-color:var(--accent);
}
.tool.active svg{color:#fff}
.tool svg{width:20px; height:20px}

.tool[data-tool="cursor"]{position:relative}
.cursor-dropdown{position:absolute; left:100%; top:0; background:var(--panel); border:1px solid #2a2a30; border-radius:8px; padding:4px; min-width:120px; display:none; z-index:20; margin-left:8px}
.cursor-dropdown.show{display:block}
.cursor-option{padding:6px 12px; cursor:pointer; border-radius:4px; font-size:12px; transition:.15s ease; font-family:'Comfortaa', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.cursor-option:hover{background:#1a1a20}
.cursor-option.active{background:var(--accent); color:#fff}

canvas{
  display:block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.overlay{position:absolute; inset:0; pointer-events:none}
#overlay{
  pointer-events:auto; 
  cursor:grab;
  cursor:-webkit-grab;
  cursor:-moz-grab;
}
#overlay:active{
  cursor:grabbing;
  cursor:-webkit-grabbing;
  cursor:-moz-grabbing;
}
#overlay.drawing{cursor:crosshair;}
#overlay.cursor-crosshair{
  cursor:crosshair;
}
#overlay.cursor-crosshair::before{
  content:''; 
  position:fixed; 
  left:var(--cursor-x, 50%);
  top:var(--cursor-y, 50%);
  width:12px; 
  height:12px; 
  border:1px dotted rgba(160, 160, 160, 0.4);
  border-radius:50%; 
  pointer-events:none; 
  z-index:99999; 
  transform:translate(-50%, -50%); 
  transition:none;
}
#overlay.cursor-crosshair::after{
  content:''; 
  position:fixed; 
  left:var(--cursor-x, 50%);
  top:var(--cursor-y, 50%);
  width:1px; 
  height:1px; 
  background:rgba(160, 160, 160, 0.6);
  border-radius:50%; 
  pointer-events:none; 
  z-index:99999; 
  transform:translate(-50%, -50%); 
  transition:none;
}
#overlay.cursor-move{
  cursor:move;
  cursor:-webkit-grab;
  cursor:-moz-grab;
}
#overlay.cursor-grab{
  cursor:grab;
  cursor:-webkit-grab;
  cursor:-moz-grab;
}
#overlay.cursor-grab:active{
  cursor:grabbing;
  cursor:-webkit-grabbing;
  cursor:-moz-grabbing;
}
#overlay.cursor-default{cursor:default;}
#overlay.cursor-pointer{cursor:pointer;}
#overlay.cursor-text{cursor:text;}
#overlay.cursor-wait{cursor:wait;}
#overlay.cursor-help{cursor:help;}
#overlay.cursor-not-allowed{cursor:not-allowed;}
#overlay.cursor-zoom-in{
  cursor:zoom-in;
  cursor:-webkit-zoom-in;
  cursor:-moz-zoom-in;
}
#overlay.cursor-zoom-out{
  cursor:zoom-out;
  cursor:-webkit-zoom-out;
  cursor:-moz-zoom-out;
}
#overlay.cursor-dot{
  cursor:none;
}
#overlay.cursor-dot::after{
  content:''; 
  position:fixed; 
  left:var(--cursor-x, 50%);
  top:var(--cursor-y, 50%);
  width:6px; 
  height:6px; 
  background:rgba(160, 160, 160, 0.6); 
  border:1px solid rgba(160, 160, 160, 0.3);
  border-radius:50%; 
  pointer-events:none; 
  z-index:99999; 
  transform:translate(-50%, -50%); 
  transition:none;
}
#overlay.cursor-precise{
  cursor:none;
}
#overlay.cursor-precise::after{
  content:''; 
  position:fixed; 
  left:var(--cursor-x, 50%);
  top:var(--cursor-y, 50%);
  width:2px; 
  height:2px; 
  background:rgba(160, 160, 160, 0.7); 
  border-radius:50%; 
  pointer-events:none; 
  z-index:99999; 
  transform:translate(-50%, -50%); 
  transition:none;
}
.hud{position:absolute; top:16px; right:100px; background:rgba(0,0,0,.35); border:1px solid #24242a; padding:8px 14px; border-radius:10px; font-size:13px; color:var(--text); font-weight:500}
.watermark{
  position:absolute; 
  left:16px; 
  bottom:50px; 
  color:rgba(255,255,255,.3); 
  font-weight:600; 
  font-size:13px; 
  letter-spacing:0.5px;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  transition:all 0.2s ease;
  cursor:default;
  padding:8px 12px;
  border-radius:8px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.watermark:hover{
  color:rgba(255,255,255,.7);
  transform:translateY(-1px);
}

canvas {
  transition: opacity 0.3s ease;
}

.chart-indicator {
  transition: opacity 0.3s ease;
}

.indicators-section{display:flex; flex-direction:column; background:#0e0e10; border-top:1px solid #1a1a1f;}
.indicators-section:empty{display:none}




footer{padding:4px 18px; flex-shrink:0; min-height:0; display:flex; justify-content:space-between; align-items:center; background:#0a0a0b; border-top:1px solid #1a1a1f; font-size:12px; color:var(--muted);}
.link{color:var(--accent); text-decoration:none; font-weight:500; transition:opacity .2s}
.link:hover{opacity:0.8}

@media (max-width: 860px){
  .container{grid-template-columns:48px 1fr}
  .seg{display:none}
}

.chart-preloader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 12, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.chart-preloader.hiding {
  animation: fadeOut 0.3s ease forwards;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.preloader-logo {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 6px 20px rgba(255, 92, 26, 0.5));
}

.preloader-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 100px;
}

.preloader-bars .bar {
  width: 8px;
  background: linear-gradient(180deg, #ff5c1a 0%, #ff8040 100%);
  border-radius: 6px;
  animation: barPulse 2s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(255, 92, 26, 0.5);
}

@keyframes barPulse {
  0%, 100% {
    height: 25px;
    opacity: 0.5;
    transform: scaleY(1);
  }
  50% {
    height: 100px;
    opacity: 1;
    transform: scaleY(1.05);
  }
}

.preloader-text {
  font-size: 17px;
  font-weight: 600;
  color: #e5e5e5;
  letter-spacing: 1px;
  animation: textPulse 2s ease-in-out infinite;
  text-align: center;
  min-height: 24px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@keyframes textPulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}