/* Все разработано Казмирчуком Александром для мониторинга советника.
   Кто будет пользоваться без обратной связи типа "Спасибо" тот ПИДОР */
/*   color: #3CB371; - травянистый
     color: #FF6347; - красненький
     color: #00BFFF; - небесный
     color: #FF6600; - оранжевый*/
@import url('https://fonts.googleapis.com/css2?family=Cuprum&display=swap');

/*======================================================================*/
/* === СТИЛИ ОБЩИЕ === */
body{background-color:#121212; background-image:url('../img/bg/bg37.jpg'); background-repeat:repeat; background-attachment:fixed; background-size:auto; font-family:'Cuprum',sans-serif; margin:0; padding:20px;}
.ru-text{display:inline;}
.en-text{display:none;}
body.lang-en .ru-text{display:none;}
body.lang-en .en-text{display:inline;}
/* === 1. Стиль кнопки лЭнгвича=== */
.lang-switch{cursor:pointer; padding:5px 12px; background-color:#121212; border:1px solid #454545; border-radius:5px; font-size:12px; color:#A0A0A0; font-weight:bold; transition:all 0.3s; user-select:none;}
.lang-switch:hover{border-color:#00BFFF; color:#00BFFF;}
/* === 1. НА ЭКРАНЕ ВХОДА (Внутри карточки) === */
.login-card{position:relative;}
.login-card .lang-switch{position:absolute; top:20px; right:20px;}
/* === 2. НА ЭКРАНЕ ДАШБОРДА (Внутри шапки) === */
header{position:relative;}
header .lang-switch{margin-left:0;/*position:absolute; right:0; top:0;*/}
/* === СТИЛЬ БЕДЖА СЧЕТА (DEMO/REAL) === */
.acc-status{color:#A0A0A0; margin-left:10px;}
.status-demo{color:#FF6600;} 
.status-real{color:#00BFFF;} 

.curr-sign{color:inherit;} /* Наследует цвет родителя (зеленый/красный) */
.container{max-width:1000px; margin:0 auto;}
.bg-box{background-color:#1E1E1E; background:url('../img/bg/bg26.jpg')0 0 repeat;}
.line{width:100%; height:1px; border-bottom:1px solid rgba(0, 0, 0, 0.8);}
ul li{color:#A0A0A0; position:relative;}
ul li a{display:block; padding:12px 15px; color:#A0A0A0; text-decoration:none; border-bottom:1px solid rgba(0, 0, 0, 0.2); transition:all 0.5s;}
ul li a:hover{background-color:rgba(0, 191, 255, 0.05); color:#00BFFF; padding-left:20px;}
ul li:last-child a{border-bottom: none;}
.four-grids{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:30px;}
.three-grids{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-bottom:30px;}
.two-grids-center{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin-bottom:30px;}
.two-grids-right{display:grid; grid-template-columns:1.5fr 2.5fr; gap:20px; margin-bottom:30px;}
.two-grids-left{display:grid; grid-template-columns:2.5fr 1.5fr; gap:20px; margin-bottom:30px;}
/* === СТИЛИ ОБЩИЕ === */
/*======================================================================*/

/*======================================================================*/
/* === СТИЛИ ШАПКА === */
header{background-color: #1E1E1E; display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; padding:20px; border-radius:12px;border:1px solid #454545; box-shadow:0 4px 6px rgba(0,0,0,0.44);}
.logo{font-size:24px; color:#00BFFF; text-shadow:1px 1px 1px #121212;}
.status{font-size:14px; color:#3CB371; text-shadow:1px 1px 1px #121212; display:flex; align-items:center; gap:8px;}
.status-dot{width:10px; height:10px; background-color:#3CB371; text-shadow:1px 1px 1px #121212; border-radius:50%; box-shadow:0 0 10px #3CB371; animation:pulse 2s infinite;}
@keyframes pulse{0% {opacity: 1;} 50% {opacity: 0.5;} 100% {opacity: 1;}}
/* === СТИЛИ ШАПКА === */
/*======================================================================*/

/*======================================================================*/
/* === СТИЛИ ПОДВАЛА === */
.footer-block{align-items:center; margin-bottom:30px; padding:20px; border-radius:12px; border:1px solid #454545; box-shadow:0 4px 6px rgba(0,0,0,0.44);}
.footer-name{font-size:24px; color:#A0A0A0; padding:0 0 15px 20px;}
.footer-content{font-size:14px; color:#A0A0A0; margin-top:5px;}
.footer-p{padding:15px 0 0 10px;}
/* === СТИЛИ ПОДВАЛА === */
/*======================================================================*/

/*======================================================================*/
/* === СТИЛИ ДЛЯ СТРАНИЦЫ ВХОДА === */
.login-body{background:url('../img/bg/bg37.jpg')0 0 repeat; background-attachment:fixed; background-size:auto; margin:0; padding:0; display:flex; justify-content:center; align-items:flex-start; height:100vh; /* На весь экран */color:#A0A0A0;}
.login-card{padding:40px 40px 40px; border-radius:12px; border:1px solid #454545; box-shadow:0 4px 6px rgba(0,0,0,0.44); text-align:center; max-width:400px; width:100%; margin-top:5vh;}
.login-card a{color:#FF6600; text-decoration:none; transition:all 0.5s; text-shadow:1px 1px 1px #121212;}
.login-card h1{color:#00BFFF; margin-bottom:10px; font-size:28px; text-shadow:1px 1px 1px #121212;}
.login-card h2{color:#A0A0A0; margin-bottom:10px; font-size:14px; text-shadow:1px 1px 1px #121212;}
.login-card p{margin-bottom:30px; font-size:14px; text-shadow:1px 1px 1px #121212;}
.login-card input[type="text"]{width:100%; padding:15px; margin-bottom:20px; border:1px solid #454545; border-radius:8px; background-color:#121212; color:#fff; font-size:14px; text-align:center; box-sizing:border-box; box-shadow:0 4px 6px rgba(0,0,0,0.44); font-family:'Cuprum',sans-serif;}
.login-card input[type="text"]:focus {outline:none; border-color:#00BFFF;}
.login-card button{width:100%; padding:15px; background-color:#00BFFF; color:#121212; border:none; border-radius:8px; font-size:14px; font-weight:bold; cursor:pointer; transition: background-color 0.3s; box-shadow:0 4px 6px rgba(0,0,0,0.44); font-family:'Cuprum',sans-serif;}
.login-card button:hover{background-color:#009acd;}
.error-msg{color:#FF6347; margin-top:15px; font-size:14px; display:none; text-shadow:1px 1px 1px #121212;}
.highlight-green{color:#3CB371;font-weight:bold;}
.login-card-wide{max-width:480px;}
.instruction-box{text-align:left; margin:20px 0; padding:20px; background-color:rgba(0, 0, 0, 0.1); border-radius:8px; border:1px solid #333;}
.instruction-step{display:flex; align-items:center; margin-bottom:15px;}
.instruction-step:last-child{margin-bottom:0;}
.step-badge{background-color:#00BFFF; color:#121212; width:24px; height:24px; border-radius:50%; text-align:center; line-height:24px; font-weight:bold; font-size:14px; margin-right:15px; flex-shrink:0; /* Не сжимать */}
.step-content{color:#ccc; font-size:14px; line-height:1.4;}
.pricing-info{margin-top:20px; font-size:14px; color:#888;}
.pricing-info strong{color:#00BFFF;}
/* === СТИЛИ ДЛЯ СТРАНИЦЫ ВХОДА === */
/*======================================================================*/  

/*======================================================================*/
/* === СТИЛИ КОЛОНКИ === */
.card{padding:20px; border-radius:12px; border:1px solid #454545; box-shadow:0 4px 6px rgba(0,0,0,0.44); min-width:0;}
.card-label{font-size:14px; color:#A0A0A0; text-shadow:1px 1px 1px #121212; margin-bottom:10px;}
.card-value{font-size:28px; color:#A0A0A0; text-shadow:1px 1px 1px #121212;}
.card-sub{font-size:12px; color:#A0A0A0; text-shadow:1px 1px 1px #121212;margin-top: 5px;}
.card-sub a{text-decoration:none; color:#FF6600;}
/* === СТИЛИ КОЛОНКИ === */
/*======================================================================*/

/*======================================================================*/
/* === СТИЛИ КРУГОВОЙ ДИАГРАММЫ === */
.trend-circl-box{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.trend-circl{height:210px; position:relative; margin-bottom:5px; filter:drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));}
.trend-circl-min-box{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; pointer-events:none; width:100%; z-index:10;}
.trend-circl-Thinks{font-size:18px; font-weight:bold; line-height:1; color:#A0A0A0; text-shadow:1px 1px 1px #121212; transition:color 0.3s ease; letter-spacing:1px; text-transform:uppercase;}
.trend-circl-Trend{font-size:10px; margin-top:4px; color:#666666; text-shadow:1px 1px 1px #121212; letter-spacing:1px; text-transform:uppercase;}
/* === СТИЛИ КРУГОВОЙ ДИАГРАММЫ === */
/*======================================================================*/

/*======================================================================*/
/* === СТИЛИ КРИВОЙ БАЛАНСА === */
.chart-container{position:relative; height:250px; width:100%;}
.but-share{background:url('../img/icon/Network.png')0 0 no-repeat;}
.chart-container-label{text-align:center;}
#equityChart{filter: drop-shadow(1px 1px 1px #121212);} /* добавил тени на кривую к цифаркам и линиям */
/* === СТИЛИ КРИВОЙ БАЛАНСА === */
/*======================================================================*/

/*======================================================================*/
/* === СТИЛИ БЛОКА С СДЕЛКАМИ === */
.deals{margin-bottom:10px;}
.deals-container{width:100%; display:flex; flex-direction:column; gap:4px;}
.deal-row{display:flex; gap:4px; width:100%;}
.deal-cell{flex:1;  background-color:#1e1e1e65; padding:6px 2px; text-align:center; border-radius:4px; font-size:12px; color:#ccc; white-space:nowrap;  overflow:hidden; text-overflow:ellipsis; }
.deal-header .deal-cell{background-color:#121212; color:#888; font-size:12px; border-bottom:1px solid #333; border-radius:0;}
#deal_1_ticket, #deal_2_ticket, #deal_3_ticket, #deal_4_ticket, #deal_5_ticket, #deal_6_ticket, #deal_7_ticket {color:#00BFFF; text-shadow:1px 1px 1px #121212;}
#deal_1_sym, #deal_2_sym, #deal_3_sym, #deal_4_sym, #deal_5_sym, #deal_6_sym, #deal_7_sym {color:#FFF; text-shadow:1px 1px 1px #121212;}
/* === СТИЛИ БЛОКА С СДЕЛКАМИ === */
/*======================================================================*/

/*======================================================================*/
/* === СТИЛИ БЛОКА ОБЩИХ СВЕДЕНИЙ === */
.card-value-stat{padding-bottom:20px; font-size:24px; color:#A0A0A0; text-shadow:1px 1px 1px #121212;}
.card-value-stat-online{color:#FF6347; animation:pulse 2s infinite;}
/* === СТИЛИ БЛОКА ОБЩИХ СВЕДЕНИЙ === */
/*======================================================================*/

/*======================================================================*/
/* СТИЛИ СТРАНИЦЫ С СОВЕТНИКОМ */
.telo{align-items:center; margin-bottom:30px; padding:20px; border-radius:12px; border:1px solid #454545; box-shadow:0 4px 6px rgba(0,0,0,0.44);}
.telo-name{font-size:24px; color:#A0A0A0; padding:0 0 0 20px;}
.telo-data{font-size:12px; color:#A0A0A0; padding:5px 0 15px 20px;}
.telo-update{font-size:14px; color:#A0A0A0; margin-top:15px;}
.telo-update p{margin:10px 30px;}
.telo-update a{color:#FF6600;}
/* СТИЛИ СТРАНИЦЫ С СОВЕТНИКОМ */
/*======================================================================*/

/*======================================================================*/
/* === СТИЛИ СТРАНИЦЫ С ДОРОЖНОЙ КАРТОЙ === */
.road{align-items:center; padding:20px; border-radius:12px; border:1px solid #454545; box-shadow:0 4px 6px rgba(0,0,0,0.44);}
.road-icon{display:grid; grid-template-columns: 128px 1fr; align-items:center; gap:5px 20px;}
.road-icon img{width:128px; height:128px; object-fit:contain; grid-row:1 / 3;}
.road-icon-name{font-size:24px; color:#A0A0A0; align-self:end;}
.road-icon-update{font-size:14px; color:#A0A0A0; align-self:start;}
/* === СТИЛИ СТРАНИЦЫ С ДОРОЖНОЙ КАРТОЙ === */
/*======================================================================*/

/*======================================================================*/
/* === ЦВЕТА ДЛЯ JS (Динамика) === */
.val-green{color:#3CB371;}  /* Травянистый (Профит, Плюс)  */
.val-red{color:#FF6347;}    /* Красненький (Убыток, Минус) */
.val-blue{color:#00BFFF;}   /* Небесный (Инфо, Нейтрально) */
.val-orange{color:#FF6600;} /* Оранжевый (Ссыль, Выделить) */   
.val-seriy{color:#A0A0A0;}  /* Серенький (Обычный, Текст) */ 
/* === ЦВЕТА ДЛЯ JS (Динамика) === */
/*======================================================================*/

/*======================================================================*/
/* === СТИЛЬ ДЛЯ МОДАЛ ОКНА === */
.share-switch{cursor:pointer; font-size:12px; color:#A0A0A0; user-select:none; float:right;}
#shareModal{display:none; position:fixed; z-index:9999; left:0; top: 0; width:100%; height: 100%; background-color:rgba(0,0,0,0.1); backdrop-filter:blur(5px);}
.share-modal-content{background-color:#121212; background-image:url('../img/bg/bg37.jpg'); background-repeat:repeat;  margin:5% auto; padding:25px; border:1px solid #454545; border-radius:12px; width:90%; max-width:640px; text-align:center; box-shadow:0 0 30px rgba(0,0,0,0.5); position:relative;}
.share-modal-content img{box-shadow:0 4px 6px rgba(0,0,0,0.44); background-color:#121212; max-width:100%; border-radius:8px; margin-bottom:20px; border:1px solid #333;}
.share-btns-row{display:flex; justify-content:center; gap:15px; flex-wrap:wrap;}
.share-btn-action{background-color:#00BFFF; color:#121212; padding:12px 25px; border-radius:8px; text-decoration:none; font-family:'Cuprum', sans-serif; cursor:pointer; border:none; font-size:16px;}
.share-btn-action.secondary{background-color:#333; color:#fff; border:1px solid #454545;}
.close-modal-x{color:#aaa; position:absolute; right:15px; top:10px; font-size:28px; font-weight:bold; cursor:pointer;}
.close-modal-x:hover{color:#fff;}
/* === СТИЛЬ ДЛЯ МОДАЛ ОКНА === */
/*======================================================================*/

/*======================================================================*/
/* === СТИЛИ ПОРТФОЛИО === */
.portf-block{align-items:center; margin-bottom:30px; padding:20px; border-radius:12px; border:1px solid #454545; box-shadow:0 4px 6px rgba(0,0,0,0.44);}
.portf-name{font-size:24px; padding:0 0 10px 0; text-shadow:1px 1px 1px #121212;}
.portf-name a{color:#A0A0A0; text-decoration:none; transition:all 0.5s; text-shadow:1px 1px 1px #121212;}
.portf-name a:hover{color:#FF6600; text-decoration:none; text-shadow:1px 1px 1px #121212;}
.portf-line{display:block; padding:0 15px; border-bottom:1px solid rgba(0, 0, 0, 0.2);}
.portf-label{font-size:14px; color:#A0A0A0; margin-top:5px; text-shadow:1px 1px 1px #121212;}
.portf-val{font-size:14px; margin-top:5px; text-shadow:1px 1px 1px #121212;}
/* === СТИЛИ ПОРТФОЛИО === */
/*======================================================================*/

@media(max-width: 700px){
.four-grids{grid-template-columns: 1fr 1fr;}
.three-grids{grid-template-columns: 1fr;}
.two-grids-center{grid-template-columns: 1fr;}
.two-grids-right{grid-template-columns: 1fr;}
.two-grids-left{grid-template-columns: 1fr;}
.stats-grid{grid-template-columns: 1fr;}
.chart-container{height:200px;}
/* для дорожной карты на телефоне */
.road-icon{grid-template-columns:1fr; justify-items:center; text-align:center;}
.road-icon img{grid-row:auto; margin-bottom:15px;}
.road-icon-name, .road-icon-update{align-self:center;}
}

@media(max-width: 600px){
header{flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; padding:15px;}
.status{width:100%; justify-content:center; order:3; margin:0;}
.logo{margin:0; order:1;}
.acc-status{margin:0; order:2;}
.card-label .acc-status{margin-left:10px;}
}

@media(max-width: 400px){
.card-label{font-size:12px; margin-bottom:10px;}
.card-value{font-size:20px;}
.card-sub{font-size:10px; margin-top: 5px;}
}