:root {
    --bg-main: #1b1f3b;
    --bg-card: #2a2f55;
    --bg-card-soft: #343a6a;
    --text-main: #ffffff;
    --text-muted: #9aa0c3;
    --color-green: #37d39a;
    --color-red: #ff5b6e;
    --color-accent: #f7931a;
    --radius-lg: 20px;
    --radius-md: 14px;
}

.btcdashboard {
    background: var(--bg-main);
    color: var(--text-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}

.btcdashboard-card {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.btcdashboard-symbol {
    width: 32px;
    height: 32px;
    background: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.btcdashboard-para {
     font-size: 1.2rem;
     font-weight: bold;
}

.btcdashboard-price-last {
    font-size: 1.1rem;
    font-weight: 700;
}

.btcdashboard-price {
     font-size: 0.9rem;
}

.btcdashboard-price-change {
    font-size: 1.1rem;
    color: var(--color-red);
}

.btcdashboard-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.btcdashboard-value {
    font-size: 0.8rem;
}

.btcdashboard-timeframe {
    background: var(--bg-card-soft);
    border: none;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.btcdashboard-timeframe.active {
    background: #4a5091;
    color: #ffffff;
}

.btcdashboard-chart {
    background: #7d83a1;
    border-radius: var(--radius-lg);
    height: 220px;
    opacity: 0.9;
}

.desk_but {
    position: relative;
    top: -68px;        /* Сдвиг на 80px вверх */
    margin-bottom: -80px;
    left: 20px;
    right: 0;
    z-index: 10;          /* Чтобы блок был поверх карточки */
    pointer-events: auto; /* Чтобы кнопки были кликабельными */
}

.balance-header, .order-header,
.market-header, .history-header {
				border-radius: 18px 18px 0 0;
     background: #1f2652;
    padding: 14px 20px;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .balance-icon, .history-icon,
 .order-icon, .market-icon  {
     font-size: 18px;
 }
 .order-icon.sell {
       color: var(--color-red);
 }
 
  .balance-icon  {
     color: #a8b5d6;
 }

 .balance-title, .order-title, .buy-order-title,
 .market-title-wrapper, .history-header {
     font-size: 23px;
     font-weight: 500;
     color: #a8b5d6;
 }
 
 .tablewr {
     width: 96%;
 }

 .balance-table, .market-table,
 .buy-table, .sell-table, .history-table {
     width: 100%;
     border-collapse: collapse;
     color: #fff;
     margin: 10px;
 }

 .balance-table th, .market-table th,
 .buy-table th, 
 .sell-table th, .history-table th {
     /* padding: 16px 24px; */
     color: #7a88b0;
     font-weight: 500;
     font-size: 16px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 /* 1-й столбец — по левому краю */
 .market-table th:nth-child(1), .buy-table th:nth-child(1),  .sell-table th:nth-child(1),
 .history-table th:nth-child(1) {
    text-align: left;
}

/* 2-й и 3-й столбцы — по правому краю */
 .market-table th:nth-child(2), 
  .balance-table th:nth-child(2), .balance-table th:nth-child(3),
 .buy-table th:nth-child(2), .buy-table th:nth-child(3),
.market-table th:nth-child(2), .market-table th:nth-child(3), .market-table th:nth-child(4), .history-table th:nth-child(3),
.sell-table th:nth-child(2), .sell-table th:nth-child(3) {
    text-align: right;
}

.history-table th:nth-child(4) {
    text-align: right;
}

.history-table th:nth-child(2) {
    text-align: left;
}

.balance-row, .sell-row, .history-row,
 .buy-row, .market-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s;
}

.balance-row:last-child, .sell-row:last-child, .history-row:last-child, 
.buy-row:last-child, .market-row:last-child,
.history-row:last-child  {
   border-bottom: none;
}

/* Ячейки контента */
.balance-table td,
.sell-table td, .buy-table td,
.history-table td {
    padding: 8px 0px;
    line-height: 0.5;
    font-size: 14px;
}

.market-table td {
    padding: 6px 0px;
    line-height: 0.5;
    font-size: 14px;
}

.balance-table td:nth-child(2), .balance-table td:nth-child(3),
.buy-table td:nth-child(2), .buy-table td:nth-child(3),
 .market-table td:nth-child(4), .market-table td:nth-child(3),.market-table td:nth-child(2),
 .history-table td:nth-child(4), .history-table td:nth-child(3),
.sell-table td:nth-child(2), .sell-table td:nth-child(3) {
    text-align: right;
}

/* При наведении — подсветка строки */
.balance-table tr:hover td,
.sell-table tr:hover td,
.buy-table tr:hover td,
.market-table tr:hover td,
.history-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}



.actions .btn {
    width: 33px;
    height: 26px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 300;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* =========================
   BASE
========================= */

.btcdashboard-header {
    display: grid;
    gap: 1rem;
}

.btcdashboard-block {
    display: flex;
    flex-direction: column;
}

.currency, .pair-name {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 14px;     
 }

 .currency-icon, .pair-icon  {
     width: 16px;
     height: 16px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     font-size: 14px;
 }

 .btc-icon {
     background: #f7931a;
     color: white;
 }

 .ltc-icon {
     background: #345d9d;
     color: white;
 }

 .doge-icon {
     background: #c2a633;
     color: white;
 }

 .mv-icon {
     background: #f5a623;
     color: white;
 }

 .usdt-icon {
     background: #26a17b;
     color: white;
 }
 
 .price-sell {
    color: var(--color-red);
}

.price-buy {
    color: var(--color-green);
}

.order-icon.buy {
    color: var(--color-green);
}

.market-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.market-header {
    display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
     gap: 16px;
     align-items: stretch;
 }
 .search-box {
     position: relative;
     width: 300px;
 }

 .search-box input {
     width: 100%;
     padding: 12px 16px 12px 44px;
     border: 1px solid rgba(168, 181, 214, 0.2);
     border-radius: 8px;
     background: rgba(31, 38, 82, 0.6);
     color: #fff;
     font-size: 14px;
     outline: none;
     transition: all 0.3s;
 }

 .search-box input::placeholder {
     color: #7a88b0;
 }

 .search-box input:focus {
     border-color: #a8b5d6;
     background: rgba(31, 38, 82, 0.8);
 }

 .search-box i {
     position: absolute;
     left: 16px;
     top: 50%;
     transform: translateY(-50%);
     color: #7a88b0;
     font-size: 16px;
 }

 .filter-tabs {
     display: flex;
     gap: 12px;
     margin-left: 14px;
     flex-wrap: wrap;
 }

 .filter-tab {
     padding: 10px 20px;
     background: rgba(31, 38, 82, 0.6);
     border: none;
     border-radius: 8px;
     color: #a8b5d6;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s;
 }

 .filter-tab:hover {
     background: rgba(168, 181, 214, 0.2);
 }

 .filter-tab.active {
     background: rgba(168, 181, 214, 0.3);
     color: #fff;
 }
 
 .change.positive,
 .history-row .buy {
    color: var(--color-green);
}

.change.negative,
.history-row .sell  {
    color: var(--color-red);
}

/* Табы */

.tabs {
   display: flex;   
   gap: 0px;
   margin-bottom: 20px;
}

.tab-btn {
   flex: 1;
   padding: 10px;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   font-weight: bold;
   font-size: 16px;
   background: #1f2652;
   color: var(--text-muted);
   transition: 0.2s;
}

.tab-btn.active[data-tab="buytabtop"] { background: var(--color-green); color: white; }
.tab-btn.active[data-tab="selltabtop"] { background: var(--color-red); color: white; }

/* Контент секций */
.tab-content { display: none; }
.tab-content.active { display: block; }

.info-row {
   display: flex;
   justify-content: space-between;
   font-size: 12px;
   color: var(--text-muted);
   margin-bottom: 8px;
}

.input-group {
   background-color: #1f2652;
   border-radius: 8px;
   padding: 12px;
   margin-bottom: 12px;
}

.label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; width: 100%; }

.input-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

.amount { font-size: 18px; font-weight: bold; color: white; }
.currency { font-weight: bold; color: white; display: flex; align-items: center; gap: 5px; }

.rate {
   text-align: center;
   font-size: 12px;
   color: var(--text-muted);
   margin: 15px 0;
}

/* Кнопки действий */
.action-btn {
   width: 100%;
   padding: 14px;
   border: none;
   border-radius: 8px;
   font-size: 16px;
   font-weight: bold;
   color: white;
   cursor: pointer;
   margin-top: 10px;
}

.tabset input:checked  {
	background-color: #a8b5d6;
	color: #222 !important;
}

.tabset label {
	position: relative;
	display: inline-block;
	padding: 15px 15px 25px;
	border: 1px solid transparent;
	border-bottom: 0;
	cursor: pointer;
	font-weight: 600;
}

.tabset .wbmbmy {
	background-color: #302f3d;
	font-size: 12px;
	text-transform: uppercase;
	padding: 10px 15px !important;
	border-radius: 5px;
	margin: 5px;
}

/* =========================
   MOBILE BOTTOM SHEET
========================= */

.mobile-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}

.mobile-sheet.active {
    display: block;
}

/* затемнение */
.mobile-sheet-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

/* контейнер */
.mobile-sheet-content {
    position: absolute;
    bottom: 0;
    left: 22%;

    width: 400px;
    max-width: 90vw;

    background: #2b386c;
    border-radius: 20px 20px 0 0;
    padding: 16px;

    max-height: 85vh;
    overflow-y: auto;

    transform: translateY(100%);
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.mobile-sheet.active .mobile-sheet-content {
    transform: translateY(0);
}

/* ручка */
.sheet-handle {
    width: 40px;
    height: 5px;
    background: #6b739a;
    border-radius: 5px;
    margin: 0 auto 12px;
}

/* табы */
.sheet-tab {
    display: none;
}

.sheet-tab.active {
    display: block;
}

/* =========================
   exchange
========================= */
.exchange  {
    padding: 20px;
}

 .trade-data {
				padding-right: 32px;
				padding-bottom: 10px;
}

/* GRID */
.exchange-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.card {
    width: 100%;
    background: #2b386c;
    border-radius: 18px;
    /* padding: 16px; */
    position: relative;
}

/* TITLES */
h3 {
    margin: 0 0 12px;
    font-size: 18px;
}

.sell-title { color: var(--color-red); }
.buy-title  { color: var(--color-green);}

/* TABLE */
.table .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 6px 0;
    font-size: 14px;
}

.history .row {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
}

.header {
    opacity: 0.6;
}

.sell-row span:first-child { color: color: var(--color-red); }
.buy-row span:first-child  { color: var(--color-green); }

.green { color: var(--color-green); }
.red   { color: color: var(--color-red);}

/* MOBILE */
.mobile-tabs {
    display: none;
    gap: 8px;
    margin-bottom: 16px;
}

.mobile-tabs button {
    flex: 1;
    background: #2c3360;
    border: none;
    border-radius: 12px;
    padding: 10px;
    color: #fff;
}

.mobile-tabs button.active {
    background: #3b4cff;
}

.mobile-actions {
    display: none;
    margin-top: 16px;
    gap: 12px;
}

.mobile-actions button {
    flex: 1;
    border: none;
    padding: 16px;
    border-radius: 16px;
    font-size: 18px;
    color: #fff;
}

.btn-buy { background: var(--color-green); }
.btn-sell { background: var(--color-red); }

/* =========================
   MOBILE (?768px)
========================= */

@media (max-width: 768px) {

    .btcdashboard-header {
        grid-template-columns: 1.5fr 1fr 1.4fr;
        grid-template-rows: auto auto auto; /* 3 строки */
        align-items: start;
    }

    .block-symbol {
        grid-column: 1;
        grid-row: 1;
    }

    .block-last {
        grid-column: 1;
        grid-row: 2;
        margin-top: -1.3rem;
    }

    .block-change {
        grid-column: 1;
        grid-row: 3;
        margin-top: -2rem;
    }

    .block-max {
        grid-column: 2;
        grid-row: 1;
    }

    .block-min {
        grid-column: 2;
        grid-row: 2 / 3; /* Растягиваем на 2 строки, чтобы выровнять с last+change */
        align-self: start;        /* Выравнивание по верху ячейки */
        margin-top: 0;            /* Убираем отступы */
        padding-top: 0;           /* Убираем внутренние отступы */
    }

    .block-volume-btc {
        grid-column: 3;
        grid-row: 1;  
    }

    .block-volume {
        grid-column: 3;
        grid-row: 2 / 3; /* Растягиваем на 2 строки, чтобы выровнять с last+change */
        align-self: start;        /* Выравнивание по верху ячейки */
        margin-top: 0;            /* Убираем отступы */
        padding-top: 0;           /* Убираем внутренние отступы */
    }

    .block-last .btcdashboard-label,
    .block-change .btcdashboard-label {
        display: none;
    }
    
    .desk_but   {
        display: none !important;
    }
    
    .exchange-grid {
        grid-template-columns: 1fr;
    }

    .card {
        display: none;
    }

    .card.active {
        display: block;
    }

    .mobile-tabs,
    .mobile-actions {
        display: flex;
    }
    
    /* Активная кнопка (мобильные табы) */
				.mobile-tabs button.active {
				    background: #4a5091;
				    color: #ffffff;
				    border-color: #1f2937;
				}
				
				.balance-show {
        display: flex;
    }
    
    .btn-buy:hover {
    background:  var(--color-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(81, 207, 102, 0.4);
				}
				.btn-sell:hover {
				    background: var(--color-red);
				    transform: translateY(-2px);
				    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
				}
				
				.btn-buy { background-color: var(--color-green); }
    .btn-sell { background-color: var(--color-red); }

				.actions .btn {
				    width: 33px;
				    height: 26px;
				    border: none;
				    border-radius: 6px;
				    cursor: pointer;
				    font-size: 20px;
				    font-weight: 300;
				    transition: all 0.2s;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				}
				
				.actions {
    text-align: right;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
}

/* =========================
   DESKTOP (?992px)
========================= */

@media (min-width: 992px) {

				.row-trade {
				     display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 20px;
				}

				.btcdashboard-chart  {
								margin-top: -68px;  /*calc( - 4rem);  /* 4rem = mb-4 + 80px компенсация */
				}

    .btcdashboard-header {
        grid-template-columns:
            1.4fr   /* BTC */
            1.2fr     /* Last */
            1.5fr   /* Change */
            1fr     /* Max */
            1fr;    /* Min */
        grid-template-rows: auto auto auto;
        column-gap: 1.5rem;
        row-gap: 0.75rem;
    }

    .block-symbol {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .block-last {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .block-change {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    .block-max {
        grid-column: 4;
        grid-row: 1;
    }

    .block-min {
        grid-column: 5;
        grid-row: 1;
    }
    
    .block-volume-btc {
        display: none;
    }


    .block-volume {
        grid-column: 4 / 6;
        grid-row: 3;
        text-align: right;
        /* Добавляем Flexbox для горизонтального расположения */
        display: flex;
        flex-direction: row;        /* Элементы в строку (горизонтально) */
        align-items: center;        /* Выравнивание по центру по вертикали */
        justify-content: flex-end;  /* Прижать вправо (так как text-align: right) */
        gap: 0.5rem;                /* Отступ между label и value */
    }
    
    .mobil_but  {
        display: none !important;
    }
    
    .exchange-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* -------- TOP ROW -------- */
    .market-row-top {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* -------- BOTTOM ROW -------- */
    .market-row-bottom {
        display: grid;
        grid-template-columns: 2fr 1.3fr;
        gap: 20px;
    }
    .balance-show {
        display: none;
    }
    
    .balance-table th:last-child {
      width: 15%;
   }   	 
   
   	.btn-buy { background-color: rgba(168, 181, 214, 0.3); }
    .btn-sell { background-color:rgba(168, 181, 214, 0.3); }

				.actions .btn {
				    width: 6px;
				    height: 17px;
				    border: none;
				    border-radius: 1px;
				    cursor: pointer;
				    font-size: 14px;
				    font-weight: 300;
				    transition: all 0.2s;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				}
				
				.actions {
    text-align: right;
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

}