body { background-color: #ebebeb; color:#0f0f0f; font-family: 'Arial', sans-serif;}

@media (min-width: 576px){
	.container{max-width: none;}
	.modal-dialog{max-width: 700px;}
	.modal-sm{max-width: 400px;}
}
@media (min-width: 768px){
	.container{max-width: 740px; margin: 0 auto;}
 
}
@media (min-width: 992px){
	.container{max-width: 960px; margin: 0 auto;}
}
@media (min-width: 1200px){
	.container{max-width: 1170px; margin: 0 auto;}
}
@media (min-width: 1400px){
	.container{max-width: 1280px; margin: 0 auto;}
}
@media (min-width: 1600px){
	.container{max-width: 1500px; margin: 0 auto;}
}
@media (min-width: 1880px){
	.container{max-width: 1600px; margin: 0 auto;}
}
@media (min-width: 1920px){
	.container{max-width: 1800px; margin: 0 auto;}
}

.header {background-color: #0f172a; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}

.header .logo { font-size: 1.5rem; font-weight: bold; color: #93c5fd;}

.chart-card {display: flex; gap: 10px;}

.chart-card .chart-container{ background: #ffffff; border-radius: 0.75rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); padding: 1.5rem;}

.chart-card .right-sidebar{ background: #ffffff; border-radius: 0.75rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); padding: 10px; max-height: calc(100vh - 111px); overflow: auto; width: 25%;}

.chart-container { position: relative; height:100%; width: 100%;}



.control-panel {display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 10px; background: white; height: 40px; border-radius: 5px; padding: 0 20px}

.control-group { display: flex; align-items: center; gap: 0.5rem;  border-right: 1px solid #d1d0d0; padding-right: 22px;}

.control-group:last-child { border-right: 0;}

/* .control-group:last-child{justify-content: end;} */

/* select, button { padding: 0.25rem 0.75rem; border: none; border-radius: 0.25rem; font-size: 0.75rem; background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%); color: #ffffff; cursor: pointer; transition: background 0.2s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);} */

/* select { background: #ffffff; color: #1e293b; border: 1px solid #cbd5e1; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);} */

/* button:hover { background: linear-gradient(90deg, #2563eb 0%, #3b82f6);} */

/* .btn-active { background: #888683 !important;} */

#error-message { display: none; color: #f87171; font-weight: bold; text-align: center; margin-top: 0.75rem;}





:fullscreen .chart-card { flex-grow: 1; margin: 0; border-radius: 0; padding: 1rem;}

:fullscreen .chart-container {height: 100%;}

.control-panel .control-panel-group-1{width: 80%; display: flex; align-items: center; gap: 22px;}

.control-panel .control-panel-group-2{width: 18%; display: flex; align-items: center; gap: 26px; justify-content: end;}

.control-panel .control-panel-group-2 .right-icon-wrapper{display: flex; gap: 12px; align-items: center;}

.control-panel .control-panel-group-2 .right-icon-wrapper button{font-size: 18px;}

select { appearance: none; -webkit-appearance: none; -moz-appearance: none;   background: none;     border: none;}

.chart-wrapper{display: flex; gap: 15px;}

.chart-wrapper .chart-right-sidebar{background-color: white;border-radius: 0.75rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); padding: 1.5rem;}



.control-group .chart-tab{display: flex; gap: 16px;}



.dropdown { position: relative; display: inline-block; width: 100%; padding: 4px 8px;}

.dropdown:hover {background-color: #f1f1f1; border-radius: 3px;}

.dropdown-button { display: flex; align-items: center; justify-content: center; cursor: pointer; width: 100%;}

.dropdown-button span{ margin-left: 10px;}

.dropdown-button img { width: 24px; height: 24px;}

/* .dropdown-content { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: white; border: 1px solid #ccc; z-index: 10; box-shadow: 0px 4px 8px rgba(0,0,0,0.1); width: 230px; border-radius: 5px; max-height: calc(100vh - 200px); overflow: auto;}

.dropdown-content div { padding: 10px; display: flex; align-items: center; cursor: pointer;}

.dropdown-content div img { width: 20px; height: 20px; margin-right: 10px;}

.dropdown-content div:hover { background-color: #f1f1f1;} */

.chart-tab .range-btn.btn-active{color: #22c55e; font-weight: 600;}

.control-group button{padding: 4px 8px; border-radius: 3px; transition: 0.3s all ease;}

.control-group button:hover{background-color: #f1f1f1; padding: 4px 8px; border-radius: 3px;}



/* Modal styles */

.modal { display: none; /* Hidden by default */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; overflow: auto; /* Enable scrolling if needed */}

.modal-content { background-color: #ffffff; padding: 20px; border-radius: 0.5rem; width: 90%; max-width: 500px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); min-width: 760px;}

.close-btn { float: right; font-size: 1.5rem; cursor: pointer; color: #1e293b; line-height: 1;}

.upload-input { margin-top: 1rem; width: 100%; padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 0.375rem;}

:fullscreen .container {  background-color: #1e293b; /* Maintain dark background */  padding: 0;  margin: 0;  width: 100%;  height: 100%;  display: flex;  flex-direction: column;}

.modal-content .modal-heading-wrap{display: flex; justify-content: space-between; border-bottom: 1px solid rgb(207, 207, 207); padding-bottom: 10px; margin-bottom: 25px;}

.modal-content .modal-heading-wrap .modal-heading{font-weight: 600; font-size: 22px; color: #1f2937;}



.modal-content .search-container { display: flex; align-items: center; width: 100%; border: 1px solid #ccc; border-radius: 25px; background-color: white; transition: border-color 0.3s; margin-bottom: 22px;}

.modal-content .search-container:hover { border-color: #22c55e;}

.modal-content .search-container input { border: none; outline: none; flex: 1; font-size: 16px; border-radius: 25px; padding: 5px 10px;}

.modal-content .search-container button { background: none; border: none; cursor: pointer; padding: 5px;}

.modal-content .search-container button img { width: 20px; height: 20px;}

.search-modal .bitcoin-lists{max-height: calc(100vh - 300px);overflow-y: auto;}

.search-modal .bitcoin-lists .list-item{margin-bottom: 14px; display: flex; align-items: center; gap: 64px; border-bottom: 1px solid #f0f0f0; padding-bottom: 14px;}

.search-modal .bitcoin-lists .list-item .icon-title-wrap{display: flex; gap: 14px; align-items: center;}

.search-modal .bitcoin-lists .list-item .icon-title-wrap .list-icon{width: 24px; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; background-color: #22c55e; display: flex; justify-content: center; align-items: center; padding: 2px;}

.search-modal .bitcoin-lists .list-item .icon-title-wrap .list-icon img{width: 72%; height: 72%; object-fit: contain; } 

.white-icon {filter: invert(1);}

.search-modal .bitcoin-lists .list-item .icon-title-wrap  .list-title{font-size: 16px;  color: #22c55e; font-weight: 600;} 

.search-modal .bitcoin-lists .list-item  .list-des{font-size: 16px;}

.search-modal .bitcoin-lists .list-item  .list-des span{font-weight: 600;}



/******************sidebar***************************/



.stock-list { list-style-type: none; padding: 0; margin: 0; max-width: 300px; border-radius: 8px;}

.stock-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eee; transition: background-color 0.2s ease;}

.stock-item:hover { background-color: #f1f1f1;}

.stock-item a { text-decoration: none; color: #007BFF; font-size: 16px; font-weight: 500; flex-grow: 1; display: block;}

/* .stock-item a:hover { text-decoration: underline;} */

.heart-toggle { cursor: pointer; font-size: 18px; transition: color 0.3s ease, transform 0.2s ease;}

.heart-toggle.filled {  color: #e63946;  transform: scale(1.1);}

.heart-toggle.unfilled { color: #999;}

.heart-toggle:hover { transform: scale(1.2);}

.heart-toggle.filled:hover { color: #cc333f;}

.heart-toggle.unfilled:hover { color: #666;}

/* Animation for heart toggle */

@keyframes heartBeat { 

    0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1.1); }

}

.heart-toggle.filled:active { animation: heartBeat 0.3s ease;}

/* Responsive design */

@media (max-width: 600px) {

    .stock-list { max-width: 100%;}



    .stock-item a {

        font-size: 14px;

    }



    .heart-toggle {

        font-size: 16px;

    }

}





.tooltip { position: relative; display: inline-block; cursor: pointer; color: #333;}

.tooltip .tooltip-text { visibility: hidden; width: 180px; background-color: #222; color: #fff; font-size: 15px; text-align: center; padding: 10px 12px; border-radius: 8px; position: absolute; z-index: 1; top: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);}

.tooltip .tooltip-text::after { content: ""; position: absolute; bottom: 100%; rotate:180deg; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; border-color: #222 transparent transparent transparent;}

.stock-item:hover .tooltip-text { visibility: visible; opacity: 1;}





/*************************dark mode***************************/

.dark-mode{ background-color: #1e293b; color: #f8fafc;}

.dark-mode .control-panel{background: #0f172a; color: #f8fafc;}

.dark-mode .dropdown-button img{filter: invert(1);}

/* .dark-mode .dropdown-content{background-color: #282828; border: 1px solid #000000;}

.dark-mode .dropdown-content .chart-type-btn img{filter: invert(1);}

.dark-mode .dropdown-content div:hover{background-color: #000000;} */

.dark-mode .dropdown:hover{background-color: #000000;}

.dark-mode .control-group button:hover{background-color: #000000;}

.dark-mode .chart-card .chart-container{background: #0f172a;}

.dark-mode .chart-card .right-sidebar{background: #0f172a;}

.dark-mode .stock-item{border-bottom: 1px solid #454545}

.dark-mode .stock-item:hover { background-color: #000000;}

.dark-mode .stock-item a { color: #f0f6fd;}

.dark-mode .modal-content { background-color: #141925;}

.dark-mode .modal-content .modal-heading-wrap .modal-heading { color: #fff;}

.dark-mode .close-btn { color: #fff;}

.dark-mode .modal-content .modal-heading-wrap {border-bottom: 1px solid rgb(90 90 90);  }

.dark-mode .search-modal .bitcoin-lists .list-item {border-bottom: 1px solid #484848;}

.dark-mode .search-container input {color: #000000;}

.dark-mode .modal {background-color: #44434380;}

.dark-mode .daterangepicker {background-color: #1a1a1a;}

.dark-mode .calendar-table {background-color: #1a1a1a; border: 0;}

.dark-mode .daterangepicker .calendar-table .prev span {border: solid #fffdfd; border-width: 0 2px 2px 0;}

.dark-mode .daterangepicker .calendar-table .next span {    border: solid #fffdfd; border-width: 0 2px 2px 0;}

.dark-mode .daterangepicker th.available:hover { background-color: #5c5c5c;}

.dark-mode .chart-list-page .all-chart-header .chart-heading { color: white;}
.dark-mode .chart-list-page .all-chart-header .symbol-list-drop-wrap .icon-mode { color: white;}
.dark-mode .chart-list-page .favorite-charts-grid .favorite-chart-card .card-header-wrap {color: #ffffff;}
.dark-mode .chart-list-page .favorite-charts-grid .favorite-chart-card .card-header-wrap .card-leder-text { color: #dbdbdb;}
.dark-mode .chart-list-page .favorite-charts-grid .favorite-chart-card .card-header-wrap .card-select-wrap .fullscreen-btn { color: #ffffff;}
.dark-mode .chart-list-page .favorite-charts-grid .favorite-chart-card .card-header-wrap .card-select-wrap .fav-type-select {background-color: #0f172a;}
.dark-mode .chart-list-page .favorite-charts-grid .favorite-chart-card .card-header-wrap .card-select-wrap .fav-range-select {background-color: #0f172a;}


/************************chart list page***************************/
/* .chart-list-page{margin: 0 auto; padding: 20px;} */
.chart-list-page .all-chart-header{display: flex; align-items: center; justify-content: space-between; padding: 18px 0 18px 0; max-width: 1200px; margin: 0 auto 18px auto;}
.chart-list-page .all-chart-header .chart-heading{font-size: 1.5rem; font-weight: bold; color: #374151;}
.chart-list-page .all-chart-header .symbol-list-drop-wrap{display: flex; align-items: center; gap: 18px;}
.chart-list-page .all-chart-header .symbol-list-drop-wrap .icon-mode{background: none; border: none; font-size: 1.3rem; cursor: pointer; color: #374151;}
.chart-list-page .all-chart-header .symbol-list-drop-wrap .list-dropdown-list{position: relative;}
.chart-list-page .all-chart-header .symbol-list-drop-wrap .list-dropdown-list .symbollist-btn{background: none; border: 1px solid #ccc; border-radius: 6px; padding: 6px 16px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; gap: 8px;}
.chart-list-page .all-chart-header .symbol-list-drop-wrap .list-dropdown-list .symbol-dropdown-content{display: none; position: absolute; right: 0; top: 110%; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); min-width: 320px; max-height: 350px; overflow-y: auto; z-index: 1000;}
.chart-list-page .all-chart-header .symbol-dropdown-content .symbol-list-item{display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #f0f0f0; gap: 10px;}
.chart-list-page .all-chart-header .symbol-list-drop-wrap .symbol-list-item .symbol-item-text{font-weight: 500; color: #374151;}

/* .chart-list-page .chart-card-sec{max-width: 1200px; margin: 0 auto;} */
.chart-list-page .favorite-charts-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 14px; margin-bottom: 32px;}
.chart-list-page .favorite-charts-grid .favorite-chart-card{background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 16px;} 
.chart-list-page .favorite-charts-grid .favorite-chart-card .card-header-wrap{font-weight: bold; margin-bottom: 8px; color: #374151; display: flex; align-items: center; justify-content: space-between; gap: 10px;} 
.chart-list-page .favorite-charts-grid .favorite-chart-card .card-header-wrap .card-leder-text{color:#888; font-size:13px;} 
.chart-list-page .favorite-charts-grid .favorite-chart-card .card-header-wrap .card-select-wrap{display:flex;align-items:center;gap:8px;} 
.chart-list-page .favorite-charts-grid .favorite-chart-card .card-header-wrap .card-select-wrap .fav-type-select{padding: 4px 8px; border-radius: 6px; border: 1px solid #ccc; font-size: 13px;} 
.chart-list-page .favorite-charts-grid .favorite-chart-card .card-header-wrap .card-select-wrap .fav-range-select{padding: 4px 8px; border-radius: 6px; border: 1px solid #ccc; font-size: 13px;} 
.chart-list-page .favorite-charts-grid .favorite-chart-card .card-header-wrap .card-select-wrap .fullscreen-btn{background:none;border:none;cursor:pointer;font-size:18px;color:#374151;} 

/*****************************chart box*********************************/

.dark-mode {    background: #0f172a;    color: #f8fafc;}

#main-header {    /* max-width: 1280px; */    /* margin: 0 auto; */    padding: 12px 16px;    display: flex;    align-items: center;    justify-content: space-between;    background: #ffffff;    border-bottom: 1px solid #e5e7eb;    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);    position: sticky;    top: 0;    z-index: 100;    border-radius: 8px;    margin-top: 30px;}
.dark-mode #main-header {    background: #1e293b;    border-bottom: 1px solid #374151;}
#main-header .title {    font-size: 1.75rem;    font-weight: 700;    color: #1e293b;}
.dark-mode #main-header .title {    color: #f8fafc;}
#darkmode-toggle, #symbol-list-btn {    background: #3b82f6;    color: #ffffff;    border: none;    padding: 8px 16px;    border-radius: 8px;    font-size: 1rem;    font-weight: 500;    cursor: pointer;    transition: background 0.3s, transform 0.2s;    display: flex;    align-items: center;    gap: 8px;}
 #darkmode-toggle:hover, #symbol-list-btn:hover {     background: #2563eb;     transform: translateY(-1px); }
.dark-mode #darkmode-toggle, .dark-mode #symbol-list-btn {    background: #4b5563;}
 .dark-mode #darkmode-toggle:hover, .dark-mode #symbol-list-btn:hover {     background: #6b7280; }
/* #symbol-list-dropdown {    background: #ffffff;    border: 1px solid #e5e7eb;    border-radius: 12px;    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);    min-width: 340px;    max-height: 400px;    overflow-y: auto;    padding: 8px 0;    z-index: 1000;    position: absolute;    right: 0;    top: 110%;}
 .dark-mode #symbol-list-dropdown {     background: #1e293b;     border: 1px solid #374151; }
.dropdown-header {    background: #f9fafb;    border-bottom: 1px solid #e5e7eb;    padding: 12px 16px;}
.dark-mode .dropdown-header {    background: #374151;    border-bottom: 1px solid #4b5563;}
.dropdown-content {    max-height: 340px;    overflow-y: auto;} */
#symbol-list-search {    border: 1px solid #d1d5db;    border-radius: 8px;    padding: 10px;    font-size: 0.95rem;    width: 100%;    background: #f9fafb;}
.dark-mode #symbol-list-search {    background: #374151;    border: 1px solid #4b5563;    color: #f8fafc;}
.symbol-list-item {    display: flex;    align-items: center;    justify-content: space-between;    padding: 12px 16px;    border-bottom: 1px solid #e5e7eb;    transition: background 0.2s;}
.dark-mode .symbol-list-item {    border-bottom: 1px solid #374151;}
.symbol-list-item:hover {    background: #f1f5f9;}
.dark-mode .symbol-list-item:hover {    background: #374151;}
.symbol-fav-btn {    font-size: 1.25rem;    transition: color 0.2s, transform 0.2s;    background: none;    border: none;    cursor: pointer;}
.symbol-fav-btn:hover {    transform: scale(1.1);}
.favorite-charts-grid {    display: grid;    grid-template-columns: repeat(5, 1fr);    overflow: auto;    gap: 8px;    padding: 16px 0;}
.favorite-chart-card {    background: #ffffff;    border-radius: 12px;    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);    padding: 8px;    min-height: 240px;    display: flex;    flex-direction: column;    transition: transform 0.3s, box-shadow 0.3s;}
.favorite-chart-card:hover {    transform: translateY(-2px);    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.dark-mode .favorite-chart-card {    background: #1e293b!important;    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3)!important;}
.favorite-chart-card:fullscreen {    width: 100vw;    height: 100vh;    padding: 0;    margin: 0;    border-radius: 0;    box-shadow: none;    background: #ffffff;    position: fixed; /* Ensure fullscreen takes entire viewport */    top: 0;    left: 0;    z-index: 9999;}
.dark-mode .favorite-chart-card:fullscreen {    background: #1e293b;}
.favorite-chart-card:fullscreen .card-header {    padding: 12px;    background: inherit;    border-bottom: 1px solid #e5e7eb;    position: sticky;    top: 0;    z-index: 10;}
.dark-mode .favorite-chart-card:fullscreen .card-header {    border-bottom: 1px solid #374151;}
.favorite-chart-card:fullscreen .chart-container {    height: calc(100vh - 48px); /* Adjusted for reduced header padding */    margin: 0;    border-radius: 0;    width: 100%;}
.favorite-chart-card > div[id^='fav-chart-'] {    height: 200px;    width: 100%;    border-radius: 8px;    overflow: hidden;}
.card-header {    display: flex;    align-items: center;    justify-content: space-between;    margin-bottom: 6px;    font-weight: 600;    color: #1e293b;}
.dark-mode .card-header {    color: #f8fafc;}
.card-controls {    display: flex;    align-items: center;    gap: 8px;}
.global-type-select, .global-range-select {    background: #eff6ff;    color: #1e40af;    border: 1px solid #3b82f6;    border-radius: 8px;    padding: 6px 12px;    font-size: 0.9rem;    font-weight: 500;    cursor: pointer;    transition: background 0.2s, border 0.2s, color 0.2s;}
.global-type-select:focus, .global-range-select:focus {    border: 1px solid #22c55e;    background: #dbeafe;    color: #166534;}
.dark-mode .global-type-select, .dark-mode .global-range-select {    /* background: #374151;    color: #60a5fa;    border: 1px solid #60a5fa; */    background: #374151;    color: #dbdee2;    border: 1px solid #505052;    border-radius: 12px;    padding: 12px 16px 12px 20px;    font-size: 1rem;    /* width: 100%; */    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);    transition: all 0.3s ease;}
.dark-mode .global-type-select:focus, .dark-mode .global-range-select:focus {    background: #4b5563;    /* color: #22d3ee; */}
.remove-btn {    font-size: 1.1rem;    color: #e63946;    transition: color 0.2s, transform 0.2s;    background: none;    border: none;    cursor: pointer;}
.remove-btn:hover {    color: #dc2626;    transform: scale(1.1);}
.dark-mode .remove-btn {     color: #f87171; }
.dark-mode .remove-btn:hover {     color: #ef4444; }
.fullscreen-btn {    font-size: 1.1rem;    color: #374151;    transition: color 0.2s, transform 0.2s;    background: none;    border: none;    cursor: pointer;}
.fullscreen-btn:hover {    color: #2563eb;    transform: scale(1.1);}
.dark-mode .fullscreen-btn {    color: #f8fafc;}
.dark-mode .fullscreen-btn:hover {    color: #60a5fa;}
.search-container {    display: flex;    justify-content: center;    align-items: center;    gap: 8px;    margin: 16px auto;    max-width: 1280px;    padding: 0 16px;}
.search-wrapper {    position: relative;    width: 100%;    max-width: 500px;    display: flex;    align-items: center;}
#grid-search-input {    background: #ffffff;    border: 1px solid #d1d5db;    border-radius: 12px;    padding: 8px 12px 8px 32px;    font-size: 1rem;    width: 100%;    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);    transition: all 0.3s ease;}
#grid-search-input:focus {    border-color: #3b82f6;    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);    outline: none;}
.dark-mode #grid-search-input {    background: #374151;    border: 1px solid #4b5563;    color: #f8fafc;    height: 50px;}
.dark-mode #grid-search-input:focus {    border-color: #60a5fa;    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);}
.search-icon {    position: absolute;    left: 12px;    top: 50%;    transform: translateY(-50%);    color: #6b7280;    font-size: 1rem;    pointer-events: none;}
.dark-mode .search-icon {    color: #d1d5db;}
#grid-search-input:hover {    border-color: #3b82f6;}
.dark-mode #grid-search-input:hover {    border-color: #60a5fa;}

        /* Preloader */
        #preloader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(15, 23, 42, 0.95);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s ease;
        }

        #preloader-overlay .spinner {
            border: 5px solid #e5e7eb;
            border-top: 5px solid #3b82f6;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 0.8s linear infinite;
        }

        #preloader-overlay.hide {
            opacity: 0;
            pointer-events: none;
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal-content {
            background: #ffffff;
            border-radius: 12px;
            padding: 24px;
            width: 100%;
            max-width: 500px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        }

        .dark-mode .modal-content {
            background: #1e293b;
            color: #f8fafc;
        }

        .close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            font-size: 1.5rem;
            cursor: pointer;
            color: #6b7280;
        }

        .close-btn:hover {
            color: #1e293b;
        }

        .dark-mode .close-btn {
            color: #d1d5db;
        }

        .dark-mode .close-btn:hover {
            color: #f8fafc;
        }

        .upload-input {
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 10px;
            width: 100%;
            background: #f9fafb;
        }

        .dark-mode .upload-input {
            background: #374151;
            border: 1px solid #4b5563;
            color: #f8fafc;
        }

        /* Animations */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes loading {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        /* Chart Loading Animation */
        .chart-container.loading {
            position: relative;
        }

        .chart-container.loading::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border: 3px solid #e5e7eb;
            border-top: 3px solid #3b82f6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: 10;
        }

        .dark-mode .chart-container.loading::before {
            border-color: #4b5563;
            border-top-color: #60a5fa;
        }

        #darkmode-toggle, #import-btn {
    background: #3b82f6;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    display: flex
;
    align-items: center;
    gap: 8px;
}

.dark-mode #darkmode-toggle, .dark-mode #symbol-list-btn, .dark-mode #import-btn {
    background: #4b5563;
}

.footer{padding: 21px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); background-color: #fff;}
.dark-mode .footer{ background: #1e293b; border-bottom: 1px solid #374151;}
.footer .container{ display: flex; justify-content: center; align-items: center;}
.chart-card-sec{min-height: calc(100vh - 180px);}

@media (max-width: 1600px) {
    .favorite-charts-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 6px;
    }
}

@media (max-width: 1280px) {
    .favorite-charts-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 6px;
    }
}


@media (max-width: 640px) {
    .search-container {
        flex-direction: column;
        gap: 6px;
        padding: 0 12px;
    }

    .search-wrapper {
        max-width: 100%;
        padding: 0 12px;
    }

    #grid-search-input {
        font-size: 0.95rem;
        padding: 8px 12px 8px 32px;
    }

    .search-icon {
        font-size: 1rem;
    }

    .global-type-select, .global-range-select {
        width: 100%;
        max-width: 100%;
    }
    #main-header{flex-direction: column;}
}