/* =========================================
   1. GLOBAL & LAYOUT
   ========================================= */
body {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #111;
  color: #eee;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

a { color: #0af; text-decoration: none; transition: 0.2s; }
a:hover { color: #fff; }

.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Карточки (общий стиль для Бота и Настроек) */
.card {
  background: #1e1e1e;
  border-radius: 6px;
  padding: 15px;
  border: 1px solid #333;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.card h2 {
  margin-top: 0;
  font-size: 16px;
  border-bottom: 1px solid #333;
  padding-bottom: 8px;
  margin-bottom: 15px;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =========================================
   2. HEADER
   ========================================= */
header {
  background: #1a1a1a;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #333;
}

header h1 {
  font-size: 18px;
  margin: 0;
  color: #0af;
}

.fee-badge {
    background: #333;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #aaa;
    border: 1px solid #555;
}
.fee-badge span { color: #fff; font-weight: bold; }

/* =========================================
   3. FORMS & INPUTS (MERGED)
   ========================================= */
label {
  display: block;
  margin: 8px 0 4px;
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Универсальный стиль для инпутов (подходит и для сетки, и для настроек) */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
select {
  width: 100%;
  padding: 6px 8px; /* Чуть больше паддинг чем раньше, но без фикс высоты */
  border-radius: 3px;
  border: 1px solid #444;
  background: #111;
  color: #eee;
  box-sizing: border-box;
  font-size: 12px;
  font-family: monospace; /* Чтобы цифры были ровными */
  transition: border 0.2s;
}

/* Спец. стиль для цены (черный фон) */
.price-input {
    background: #000 !important;
    border-color: #555 !important;
    color: #fff !important;
    font-weight: bold;
}

input:focus, select:focus {
  outline: none;
  border-color: #0af;
}

input:disabled { opacity: 0.4; cursor: not-allowed; }

.compact-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 5px;
}

.compact-col {
  flex: 1;
}

/* =========================================
   4. BUTTONS (NEW CLASSES)
   ========================================= */
.btn, button { 
    display: inline-block; 
    padding: 8px 16px; 
    border-radius: 3px; 
    border: none; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 12px; 
    text-align: center;
    transition: 0.2s;
}

/* Стандартная кнопка (синяя) */
.btn-primary, button { background: #0af; color: #000; }
.btn-primary:hover, button:hover { background: #0099dd; }

/* Вторичная (серая) */
.btn-secondary, button.secondary { background: #333; color: #ccc; }
.btn-secondary:hover, button.secondary:hover { background: #444; }

/* Зеленая (Успех/Старт) */
.btn-success { background: #2e7d32; color: #fff; }
.btn-success:hover { background: #1b5e20; }

/* Красная (Опасность/Стоп) */
.btn-danger { background: #c62828; color: #fff; }
.btn-danger:hover { background: #b71c1c; }

.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-row { margin-top: 15px; display: flex; gap: 8px; align-items: center; }

/* =========================================
   5. BOT INTERFACE (SLIDERS & GRID)
   ========================================= */
.slider-container {
  margin: 20px 0;
  background: #151515;
  border-radius: 6px;
  padding: 20px 10px 40px 10px;
  position: relative;
  user-select: none;
  border: 1px solid #333;
}

.slider-track {
  height: 4px;
  background: #333;
  width: 100%;
  position: relative;
  top: 10px;
}

.center-marker {
  position: absolute;
  left: 50%;
  top: -10px;
  bottom: -10px;
  width: 2px;
  background: #555;
  z-index: 1;
}

.center-label {
  position: absolute;
  left: 50%;
  top: -25px;
  transform: translateX(-50%);
  font-size: 11px;
  color: #fff;
  background: #151515;
  padding: 0 5px;
}

.range-bar { position: absolute; height: 4px; top: 0; opacity: 0.6; }
.range-buy { background: #4caf50; }
.range-sell { background: #ff7043; }

.slider-handle {
  position: absolute;
  top: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: grab;
  z-index: 10;
  box-shadow: 0 0 5px rgba(0,0,0,0.8);
  transform: translateX(-50%);
}
.slider-handle:active { cursor: grabbing; transform: scale(1.1) translateX(-50%); }
.handle-buy { border: 2px solid #4caf50; background: #111; }
.handle-sell { border: 2px solid #ff7043; background: #111; }

.handle-label {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  white-space: nowrap;
  pointer-events: none;
  color: #bbb;
}

.slider-scale-numbers { position: relative; height: 20px; margin-top: 20px; font-size: 9px; color: #666; }
.scale-tick { position: absolute; transform: translateX(-50%); text-align: center; }
.scale-tick::before { content: ''; display: block; width: 1px; height: 4px; background: #333; margin: 0 auto 2px auto; }

.split-config { display: flex; gap: 15px; flex-wrap: wrap; }
.config-col { flex: 1; min-width: 280px; padding: 10px; border-radius: 4px; }
.col-buy { border-top: 2px solid #4caf50; background: rgba(76, 175, 80, 0.05); }
.col-sell { border-top: 2px solid #ff7043; background: rgba(255, 112, 67, 0.05); }
.col-title { font-weight: bold; font-size: 13px; margin-bottom: 10px; text-align: center; color: #ddd; letter-spacing: 1px; }

.live-calc-box {
    background: #000;
    border: 1px solid #333;
    padding: 8px;
    font-size: 11px;
    color: #aaa;
    margin-top: 10px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
}
.live-val { color: #fff; font-weight: bold; }
.live-profit-pos { color: #4caf50; }
.live-profit-neg { color: #f44; }

table { width: 100%; border-collapse: collapse; font-size: 11px; }
th, td { border: 1px solid #333; padding: 6px; text-align: right; }
th { background: #222; color: #888; text-align: center; }
.side-buy { color: #4caf50; }
.side-sell { color: #ff7043; }
.small { font-size: 10px; opacity: 0.7; }

/* =========================================
   6. ACTIVE BOTS MONITOR (COLLAPSIBLE)
   ========================================= */
.active-bot-unit {
    background: #151515;
    border: 1px solid #333;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.2s;
}

.bot-header {
    background: #222;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.bot-header:hover { background: #2a2a2a; }
.bot-header h3 { margin: 0; font-size: 14px; color: #0af; display: flex; align-items: center; gap: 10px; }

.arrow-icon { display: inline-block; font-size: 10px; color: #666; transition: transform 0.3s; margin-right: 5px; }
.active-bot-unit.open .arrow-icon { transform: rotate(180deg); }

.bot-table-container { display: none; border-top: 1px solid #333; background: #111; }
.active-bot-unit.open .bot-table-container { display: block; }

.active-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.active-table th { background: #181818; color: #888; text-align: right; padding: 8px; border-bottom: 1px solid #333; }
.active-table td { padding: 8px; text-align: right; border-bottom: 1px solid #222; color: #ccc; }

.status-buy { color: #4caf50; font-weight: bold; }
.status-sell { color: #ff9800; font-weight: bold; }
.status-done { color: #888; text-decoration: line-through; }
.row-highlight { background: #1f1a10; }
.bot-info { font-size: 11px; color: #888; margin-right: 15px; }

/* =========================================
   7. UTILS FOR PROFILE & LOGIN (NEW)
   ========================================= */
.flash { padding: 10px; border-radius: 4px; margin-bottom: 15px; text-align: center; font-weight: bold; }
.flash.success { background: rgba(46, 125, 50, 0.2); border: 1px solid #2e7d32; color: #81c784; }
.flash.error { background: rgba(198, 40, 40, 0.2); border: 1px solid #c62828; color: #e57373; }

/* Переключатель (Checkbox) */
.switch-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; background: #252525; padding: 10px; border-radius: 4px;}
.switch-wrap input { width: auto; margin: 0; }
.switch-label { margin: 0; color: #fff; cursor: pointer; font-size: 13px; text-transform: none; }

/* Секция пароля */
.password-toggle-btn { 
    background: none; border: 1px solid #444; color: #888; 
    padding: 6px 12px; cursor: pointer; font-size: 12px; 
    width: 100%; border-radius: 4px; margin-top: 0px; transition: 0.2s; 
}
.password-toggle-btn:hover { border-color: #666; color: #ccc; }

.password-form-container { 
    display: none; margin-top: 15px; padding-top: 15px; 
    border-top: 1px solid #333; animation: fadeIn 0.3s; 
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.btn-scale {
    background: #333; color: #aaa; border: 1px solid #444; 
    padding: 2px 8px; font-size: 11px; cursor: pointer;
}
.btn-scale.active {
    background: #0af; color: #fff; border-color: #0af;
}
/* --- Password Eye Styles --- */
.password-wrapper {
    position: relative;
    width: 100%;
}
.password-wrapper input {
    padding-right: 40px !important;
}
.eye-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    font-size: 16px;
    cursor: pointer;
    color: #888;
    padding: 5px !important;
    width: auto !important;
}
.eye-btn:hover {
    color: #fff;
    background: none !important;
}
/* =========================================
   8. FIXED PASSWORD EYE STYLES
   ========================================= */

/* Обертка ведет себя как обычный блок, чтобы инпут стоял ровно */
.password-wrapper {
    position: relative;
    width: 100%;
    display: block;
}

/* Отступ текста внутри поля, чтобы не наезжал на глаз */
.password-wrapper input {
    padding-right: 45px !important;
    width: 100%;
    box-sizing: border-box;
}

/* Стили самой кнопки-глаза */
.eye-btn {
    position: absolute !important;
    right: 1px !important;      /* Прижимаем к правому краю */
    top: 1px !important;        /* Прижимаем к верху (учитывая бордер инпута 1px) */
    bottom: 1px !important;     /* Прижимаем к низу */
    height: auto !important;    /* Высота авто (займет всё доступное место по вертикали) */
    width: 40px !important;     /* Ширина зоны клика */
    
    background: transparent !important; /* Убираем синий фон */
    border: none !important;            /* Убираем рамки кнопки */
    box-shadow: none !important;        /* Убираем тени */
    
    display: flex !important;
    align-items: center;        /* Центрируем иконку по вертикали */
    justify-content: center;    /* Центрируем иконку по горизонтали */
    
    font-size: 22px !important; /* Крупный размер иконки */
    color: #666 !important;     /* Цвет по умолчанию (темно-серый) */
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10;
    transition: color 0.3s ease;
}

/* Красивый эффект при наведении */
.eye-btn:hover {
    color: #0af !important;     /* Неоновый голубой (фирменный цвет) */
    background: transparent !important;
    text-shadow: 0 0 8px rgba(0, 170, 255, 0.4); /* Легкое свечение */
}

/* =========================================
   9. FINAL FIX FOR EYE ICON POSITION
   ========================================= */

/* Гарантируем, что обертка ведет себя корректно */
.password-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

/* Инпут занимает всю ширину, отступ справа для иконки */
.password-wrapper input {
    width: 100% !important;
    padding-right: 45px !important; /* Место под иконку */
    box-sizing: border-box !important;
    margin: 0 !important; /* Убираем margin самого инпута, чтобы позиция не сбивалась */
    height: 40px !important; /* Фиксируем комфортную высоту поля */
    display: block !important;
}

/* Стили самой кнопки-глаза */
.eye-btn {
    /* Абсолютное позиционирование поверх инпута */
    position: absolute !important;
    
    /* ИДЕАЛЬНАЯ ЦЕНТРОВКА ПО ВЕРТИКАЛИ */
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    /* Позиция справа */
    right: 10px !important; 
    
    /* Сброс старых растягивающих стилей */
    bottom: auto !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* Визуальный стиль */
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 20 !important;
    
    /* Настройка иконки */
    font-size: 20px !important; /* Размер глаза */
    line-height: 1 !important;  /* Чтобы не было лишних отступов у шрифта */
    color: #666 !important;     /* Темно-серый цвет */
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Эффект при наведении */
.eye-btn:hover {
    color: #0af !important; /* Неоновый голубой */
    text-shadow: 0 0 8px rgba(0, 170, 255, 0.6); /* Свечение */
    background: none !important;
}

/* =========================================
   PROFILE PAGE: 2x2 CARD GRID (SCOPED)
   Only affects /profile (container has .profile-page)
   ========================================= */

.profile-page .profile-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* Promote the 3 cards to grid items without turning hidden inputs into grid items */
.profile-page #profileForm{
  display: contents;
}

/* Prevent double spacing (gap handles spacing) */
.profile-page .profile-grid > .card{
  margin-bottom: 0;
}

/* 4th cell: toggle button + expandable card stacked */
.profile-page .profile-pass-cell{
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* Ensure the password card behaves like the other cards in the grid */
.profile-page .profile-pass-cell .card{
  margin-bottom: 0;
}

/* Save button below the grid, full width */
.profile-page .profile-save-btn{
  width: 30%;
  padding: 12px;
  margin-top: 20px;
}

/* Responsive: single column on narrow screens */
@media (max-width: 720px){
  .profile-page .profile-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================
   10. PROFILE PAGE: 2x2 GRID SYSTEM
   ========================================= */

/* Расширяем контейнер, чтобы 2 колонки смотрелись хорошо */
.profile-container {
    max-width: 1100px !important;
}

/* Инициализация сетки */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Две равные колонки */
    gap: 20px;
    align-items: start; /* Карточки выравниваются по верху */
}

/* МАГИЯ: Заставляем форму исчезнуть структурно, 
   чтобы её карточки стали частью сетки profile-grid */
.profile-form-contents {
    display: contents;
}

/* Карточки внутри профиля растягиваем по высоте, если нужно */
.profile-card {
    margin-bottom: 0 !important; /* Убираем маргин, так как есть gap */
    height: 100%; /* Одинаковая высота карточек в ряду (опционально) */
    box-sizing: border-box;
}

/* 4-я ячейка: Кнопка смены пароля + скрытая форма */
.profile-pass-cell {
    display: flex;
    flex-direction: column;
}

/* Кнопка "Сохранить": 
   1. Растягиваем на всю ширину (grid-column: 1 / -1)
   2. Ставим в самый конец визуально (order: 10) 
*/
.profile-save-btn {
    grid-column: 1 / -1;
    width: 30%;
    margin-top: 10px;
    padding: 15px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    order: 10; 
}

/* Адаптивность: на мобилках превращаем сетку в 1 колонку */
@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
    .profile-save-btn {
        order: unset; /* Возвращаем естественный порядок, если нужно */
        margin-top: 20px;
    }
}