* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Geist', 'Segoe UI', system-ui, sans-serif;
    background: #0d1117;
    min-height: 100dvh;
    color: #d1d9e0;
    -webkit-font-smoothing: antialiased;
}

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

/* Header */
.header {
    background: #0d1117;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 28px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    color: #00d4aa;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.header h1 i {
    margin-right: 10px;
    opacity: 0.9;
}

/* Stats Panel */
.stats-panel {
    background: #161b22;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.06);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.stat-card {
    background: #1e2430;
    color: #e2e8f0;
    padding: 18px 20px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(0,212,170,0.1);
    transition: border-color 0.2s, transform 0.2s;
}

.stat-card:hover {
    border-color: rgba(0,212,170,0.3);
    transform: translateY(-2px);
}

.stat-card i {
    font-size: 26px;
    margin-bottom: 10px;
    color: #00d4aa;
    opacity: 0.85;
}

.stat-card .value {
    font-size: 26px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.03em;
    color: #f0f6fc;
}

.stat-card .label {
    font-size: 12px;
    font-weight: 500;
    color: #7d8590;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Controls Panel */
.controls-panel {
    background: #161b22;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.06);
}

.control-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* Footer */
.footer {
    background: #0d1117;
    padding: 18px 0;
    text-align: center;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.footer p {
    color: #7d8590;
    font-size: 13px;
}

/* Loading Spinner */
.spinner {
    border: 3px solid rgba(255,255,255,0.08);
    border-top: 3px solid #00d4aa;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin 0.8s linear infinite;
    margin: 20px auto;
}

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

/* Progress Bar */
.progress-container {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    margin: 10px 0;
}

.progress-bar {
    height: 18px;
    background: #00d4aa;
    border-radius: 6px;
    transition: width 0.3s;
    color: #0d1117;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
    font-weight: 600;
}

/* Logs Panel */
.logs-panel {
    background: #0d1117;
    color: #d1d9e0;
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px;
    height: 200px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.06);
}

.logs-panel .log-entry {
    margin: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 5px;
}

.logs-panel .log-info {
    color: #4caf50;
}

.logs-panel .log-error {
    color: #f44336;
}

.logs-panel .log-warning {
    color: #ff9800;
}

.log-timestamp {
    color: #888;
    margin-right: 10px;
}

/* ========== СТИЛИ ДЛЯ ТАБЛИЦ ========== */

/* Контейнер для таблиц */
.table-responsive {
    overflow-x: auto;
    margin: 15px 0;
    border-radius: 10px;
    background: #161b22;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Основные стили таблицы */
.coins-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 1200px;
}

/* Заголовки таблицы */
.coins-table thead tr {
    background: #1e2430;
}

.coins-table th {
    color: #7d8590;
    font-weight: 600;
    padding: 11px 8px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-right: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.coins-table th:last-child {
    border-right: none;
}

/* Ячейки таблицы */
.coins-table td {
    padding: 9px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    background: #161b22;
    color: #c9d1d9;
}

/* Чередование строк */
.coins-table tbody tr:nth-child(even) td {
    background: #161b22;
}

/* Подсветка при наведении */
.coins-table tbody tr:hover td {
    background: rgba(0,212,170,0.05);
    cursor: pointer;
}

/* Стили для данных стакана */
.coins-table .positive {
    color: #3fb950;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.coins-table .negative {
    color: #f85149;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

/* Стили для левой границы в зависимости от категории */
.coin-conservative {
    border-left: 4px solid #2196f3 !important;
}

.coin-working {
    border-left: 4px solid #4caf50 !important;
}

.coin-aggressive {
    border-left: 4px solid #ff9800 !important;
}

.coin-madMax {
    border-left: 4px solid #f44336 !important;
}

/* Стили для числовых значений */
.coins-table td:nth-child(2),  /* Цена */
.coins-table td:nth-child(3),  /* Объем */
.coins-table td:nth-child(4),  /* Спред% */
.coins-table td:nth-child(6),  /* Глуб5 */
.coins-table td:nth-child(7),  /* ATR1m */
.coins-table td:nth-child(8),  /* ATR5m */
.coins-table td:nth-child(9),  /* ATR15m */
.coins-table td:nth-child(10), /* ATR1h */
.coins-table td:nth-child(11), /* ATR4h */
.coins-table td:nth-child(12), /* ATR1d */
.coins-table td:nth-child(13) { /* Фанд */
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 400;
}

/* Стили для названий монет */
.coins-table td:first-child {
    font-weight: 600;
    color: #e2e8f0;
    text-align: left;
    padding-left: 15px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* Стили для фандинга */
.coins-table td:last-child {
    font-weight: bold;
}

/* Стили для пустых таблиц */
.coins-table td[colspan] {
    padding: 40px !important;
    color: #999;
    font-size: 14px;
}

/* Стили для элементов управления таблицей */
.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
    background: #161b22;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}

.search-box {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 5px 14px;
    flex: 1;
    max-width: 300px;
    transition: border-color 0.2s;
}

.search-box:focus-within {
    border-color: rgba(0,212,170,0.4);
}

.search-box i {
    color: #7d8590;
    margin-right: 10px;
    font-size: 13px;
}

.search-box input {
    border: none;
    background: transparent;
    padding: 6px 0;
    width: 100%;
    outline: none;
    font-size: 13px;
    color: #d1d9e0;
    font-family: inherit;
}

.search-box input::placeholder {
    color: #484f58;
}

.filter-select {
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    outline: none;
    font-size: 13px;
    background: rgba(255,255,255,0.05);
    color: #d1d9e0;
    cursor: pointer;
    min-width: 150px;
    transition: border-color 0.2s;
}

.filter-select:hover {
    border-color: rgba(0,212,170,0.35);
}

.filter-select option {
    background: #1e2430;
    color: #d1d9e0;
}

.export-btn {
    background: #00d4aa;
    color: #0d1117;
    border: none;
    padding: 7px 18px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.export-btn:hover {
    background: #00bfa0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,212,170,0.25);
}

.export-btn i {
    font-size: 13px;
}

/* Стили для пагинации */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.page-btn {
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: #7d8590;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.15s;
    min-width: 34px;
}

.page-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #d1d9e0;
    border-color: rgba(255,255,255,0.15);
}

.page-btn.active {
    background: rgba(0,212,170,0.15);
    color: #00d4aa;
    border-color: rgba(0,212,170,0.4);
    font-weight: 600;
}

.page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Стили для итоговой статистики */
.last-update {
    text-align: right;
    margin-top: 12px;
    color: #7d8590;
    font-size: 12px;
}

.last-update i {
    margin-right: 5px;
    color: #00d4aa;
    opacity: 0.7;
}

/* Стили для графиков */
.charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.chart-container {
    background: white;
    border-radius: 10px;
    padding: 15px;
    height: 300px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.chart-title {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

.chart-title i {
    margin-right: 5px;
    color: #667eea;
}

/* Стили для данных стакана */
.data-tooltip {
    position: relative;
    cursor: help;
}

.data-tooltip:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: #333;
    color: white;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* Адаптивность */
@media (max-width: 768px) {
    .table-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: 100%;
    }

    .filter-select {
        width: 100%;
    }

    .export-btn {
        width: 100%;
        justify-content: center;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

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

/* Стили для скролла в таблицах */
.table-responsive::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03);
}

.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0,212,170,0.3);
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(0,212,170,0.5);
}

/* ============================================================
   Личный кабинет — кнопка в хедере
   ============================================================ */
.profile-btn-header {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    background: rgba(0,212,170,0.12);
    border: 1px solid rgba(0,212,170,0.25);
    border-radius: 8px;
    color: #00d4aa;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: 8px;
}

.profile-btn-header:hover {
    background: rgba(0,212,170,0.2);
    border-color: rgba(0,212,170,0.45);
}

.profile-btn-header i {
    font-size: 16px;
}

.profile-btn-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ═══════════════════════════════════════════════════════════════
   ЛИЧНЫЙ КАБИНЕТ — premium dark sidebar
}
/* ── PnL по дням: двухколоночный блок ─────────────────────────────────────── */
.pnl-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

.pnl-chart-card {
    background: #1a1f2e;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
}

/* Заголовок */
.pnl-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pnl-chart-header--bot  { background: linear-gradient(135deg, #1e1b3a 0%, #2d2060 100%); }
.pnl-chart-header--real { background: linear-gradient(135deg, #0f2a1e 0%, #1a4035 100%); }

.pnl-chart-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pnl-chart-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.pnl-chart-header--bot  .pnl-chart-icon { background: rgba(139,92,246,0.25); color: #a78bfa; }
.pnl-chart-header--real .pnl-chart-icon { background: rgba(52,211,153,0.2);  color: #34d399; }

.pnl-chart-title {
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.2;
}
.pnl-chart-sub {
    font-size: 11px;
    color: #64748b;
    margin-top: 1px;
}

.pnl-chart-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.pnl-chart-total {
    font-size: 18px;
    font-weight: 800;
    color: #94a3b8;
    white-space: nowrap;
    line-height: 1.2;
}
.pnl-chart-total-rub {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}
.pnl-total-pos { color: #34d399; }
.pnl-total-neg { color: #f87171; }
.pnl-chart-total-rub.pnl-total-pos { color: #6ee7b7; }
.pnl-chart-total-rub.pnl-total-neg { color: #fca5a5; }

/* Мета-строка: wins/losses/wr */
.pnl-chart-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    min-height: 34px;
    flex-wrap: wrap;
}
.pnl-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
}
.pnl-meta-item i { font-size: 11px; }
.pnl-meta-win   { color: #34d399; }
.pnl-meta-loss  { color: #f87171; }
.pnl-meta-wr    { color: #fbbf24; }
.pnl-meta-total { color: #94a3b8; }
.pnl-meta-rate  { color: #60a5fa; margin-left: auto; }

/* Область графика */
.pnl-chart-body {
    flex: 1;
    padding: 12px 16px 14px;
    position: relative;
    height: 200px;
}
.pnl-chart-body canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Полноширинная карточка (без .pnl-charts-row) */
.pnl-chart-card--full {
    margin-top: 24px;
}
/* Увеличенная высота графика для 14 баров */
.pnl-chart-body--tall {
    height: 260px;
}

/* Заглушка при отсутствии данных */
.pnl-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: #4b5563;
    font-size: 13px;
}

/* Улучшаем старый .chart-container для верхней тройки */
.chart-container {
    background: #1a1f2e;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.06);
}
.chart-title {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
.chart-title i { color: #818cf8; }

@media (max-width: 768px) {
    .pnl-charts-row { grid-template-columns: 1fr; }
    .pnl-chart-body { height: 170px; }
}

/* ═══════════════════════════════════════════════════════════════
   ЛИЧНЫЙ КАБИНЕТ — icon-nav sidebar
   ═══════════════════════════════════════════════════════════════ */

.profile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.profile-overlay.open { opacity: 1; pointer-events: auto; }

.profile-panel {
    width: 420px;
    max-width: 100vw;
    background: #0d1117;
    height: 100%;
    display: flex;
    flex-direction: row;      /* nav слева, контент справа */
    box-shadow: -12px 0 48px rgba(0,0,0,.5);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.profile-overlay.open .profile-panel { transform: translateX(0); }

/* profile-body растягивается и раскладывает nav + content в ряд */
.profile-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
}

/* ── Левая навигация ─────────────────────────────────────────── */
.prf-nav {
    width: 60px;
    flex-shrink: 0;
    background: #080c10;
    border-right: 1px solid rgba(255,255,255,.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0 16px;
    gap: 2px;
}

.prf-nav-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 0 8px;
}
.prf-nav-group--mid { flex: 1; margin-top: 6px; }
.prf-nav-group--bot { margin-top: auto; }

/* Разделитель */
.prf-nav-sep {
    width: 28px;
    height: 1px;
    background: rgba(255,255,255,.07);
    margin: 8px auto;
}

/* Кнопка навигации */
.prf-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: none;
    border: none;
    color: rgba(255,255,255,.28);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all .15s;
    position: relative;
}
.prf-nav-btn:hover {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.7);
}
.prf-nav-btn.active {
    background: rgba(0,212,170,.12);
    color: #00d4aa;
    box-shadow: inset 0 0 0 1px rgba(0,212,170,.2);
}

/* Tooltip справа от иконки */
.prf-nav-btn::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #1e2530;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.1);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s, left .12s;
    z-index: 100;
}
.prf-nav-btn:hover::after {
    opacity: 1;
    left: calc(100% + 8px);
}

/* Аватар-кнопка */
.prf-nav-avatar {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, #00d4aa 0%, #667eea 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    font-family: 'Barlow Condensed', sans-serif;
    border: none;
    cursor: pointer;
    transition: all .15s;
    box-shadow: 0 4px 14px rgba(0,212,170,.2);
    margin-bottom: 6px;
}
.prf-nav-avatar:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(0,212,170,.3); }
.prf-nav-avatar.active { box-shadow: 0 0 0 2px #00d4aa, 0 6px 18px rgba(0,212,170,.25); }

/* Кнопка выхода */
.prf-nav-logout { color: rgba(239,68,68,.5); }
.prf-nav-logout:hover { background: rgba(239,68,68,.1); color: #f87171; }

/* ── Кнопка-переключатель навигации ─────────────────────────── */
.prf-nav-toggle {
    color: rgba(255,255,255,.22);
    width: 44px;
    height: 36px;
    border-radius: 10px;
}
.prf-nav-toggle:hover { color: rgba(255,255,255,.65); }
.prf-nav-toggle i { transition: transform .28s cubic-bezier(.4,0,.2,1); }

/* ── Текстовые метки пунктов меню ────────────────────────────── */
.prf-nav-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
    color: inherit;
    transition: opacity .18s ease .04s, max-width .26s cubic-bezier(.4,0,.2,1);
}
/* Имя пользователя рядом с аватаром */
.prf-nav-uname {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    letter-spacing: .01em;
}

/* ══ Развёрнутое состояние навигации ════════════════════════════ */
.prf-nav {
    transition: width .28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.prf-nav.expanded { width: 192px; align-items: stretch; }

/* Группы кнопок становятся растянутыми */
.prf-nav.expanded .prf-nav-group { align-items: stretch; padding: 0 10px; }
.prf-nav.expanded .prf-nav-group--avatar {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
}

/* Разделитель растягивается */
.prf-nav.expanded .prf-nav-sep { width: calc(100% - 20px); margin: 8px 10px; }

/* Кнопки в развёрнутом виде */
.prf-nav.expanded .prf-nav-btn {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    justify-content: flex-start;
    padding: 0 12px;
    gap: 11px;
    font-size: 15px;
}
.prf-nav.expanded .prf-nav-btn i {
    font-size: 14px;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
}

/* Кнопка-переключатель в развёрнутом виде */
.prf-nav.expanded .prf-nav-toggle { height: 36px; }
.prf-nav.expanded .prf-nav-toggle i { transform: rotate(180deg); }

/* Аватар в развёрнутом виде — только уменьшаем чуть */
.prf-nav.expanded .prf-nav-avatar { flex-shrink: 0; margin-bottom: 0; }

/* Метки показываются */
.prf-nav.expanded .prf-nav-label {
    opacity: 1;
    max-width: 130px;
    pointer-events: auto;
}

/* Тултипы скрываем, когда текст и так виден */
.prf-nav.expanded .prf-nav-btn::after { display: none; }
.prf-nav.expanded .prf-nav-avatar[data-tip]::after { display: none; }

/* Панель расширяется вместе с навигацией */
.profile-panel { transition: width .28s cubic-bezier(.4,0,.2,1); }
.profile-panel:has(.prf-nav.expanded) { width: 480px; }

/* ── Правая область контента ─────────────────────────────────── */
.prf-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Кнопка закрыть */
.prf-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: rgba(255,255,255,.4);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.prf-close:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Загрузка / ошибка */
.profile-loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255,255,255,.25);
    font-size: 14px;
    padding: 60px 20px;
}
.profile-error {
    padding: 40px 20px;
    text-align: center;
    color: #f87171;
    font-size: 13px;
}

/* ── Страницы-разделы ────────────────────────────────────────── */
.prf-page {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.07) transparent;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .18s ease, transform .18s ease;
}
.prf-page::-webkit-scrollbar { width: 3px; }
.prf-page::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

.prf-page--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(10px);
}

/* Заголовок страницы */
.prf-page-header {
    padding: 18px 20px 0 20px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 50px; /* место под кнопку закрыть */
}
.prf-page-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.2);
}

/* ── User Card (раздел «Профиль») ────────────────────────────── */
.prf-user-hero {
    padding: 24px 20px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    position: relative;
    overflow: hidden;
}
.prf-user-hero::before {
    content: '';
    position: absolute;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,212,170,.08) 0%, transparent 70%);
    top: -60px; right: -30px;
    pointer-events: none;
}
.prf-avatar-lg {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #00d4aa 0%, #667eea 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0,212,170,.2);
}
.prf-avatar-lg span {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
}
.prf-user-name {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}
.prf-user-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.prf-user-id {
    font-size: 11px;
    color: rgba(255,255,255,.25);
    font-family: 'JetBrains Mono', monospace;
}
.prf-role-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
}
.prf-badge-admin { background: rgba(251,191,36,.1); color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }
.prf-badge-user  { background: rgba(0,212,170,.1);  color: #00d4aa; border: 1px solid rgba(0,212,170,.2); }
.prf-badge-bot   { background: rgba(139,92,246,.1); color: #a78bfa; border: 1px solid rgba(139,92,246,.2); }

/* Инфо-строки (в разделе профиля) */
.prf-info-list { padding: 16px 20px; }
.prf-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    gap: 10px;
}
.prf-info-row:last-child { border-bottom: none; }
.prf-info-label { font-size: 12px; color: rgba(255,255,255,.3); }
.prf-info-value {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    font-family: 'JetBrains Mono', monospace;
}

/* ── Тело секций ─────────────────────────────────────────────── */
.prf-body { padding: 20px; }

.prf-sub-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.2);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.prf-sub-title i { color: rgba(0,212,170,.4); }

/* ── API Keys ────────────────────────────────────────────────── */
.prf-key-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    margin-bottom: 14px;
}
.prf-key-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.prf-key-dot--ok   { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.prf-key-dot--none { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.12); }
.prf-key-status-text { font-size: 13px; font-weight: 600; color: #fff; flex: 1; }
.prf-key-status-text--none { color: rgba(255,255,255,.4); font-weight: 500; }

.prf-key-mono-wrap { margin-bottom: 14px; }
.prf-key-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    padding: 7px 10px;
    border-radius: 8px;
    display: block;
    letter-spacing: .04em;
}
.prf-key-updated {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,.2);
    margin-top: 4px;
}

/* Форма ключей */
.prf-key-form { margin-bottom: 4px; }
.prf-field { margin-bottom: 12px; }
.prf-field-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    margin-bottom: 6px;
}
.prf-input-wrap { position: relative; }
.prf-input {
    width: 100%;
    padding: 10px 38px 10px 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: .04em;
    color: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.prf-input::placeholder { color: rgba(255,255,255,.18); }
.prf-input:focus {
    border-color: rgba(0,212,170,.5);
    box-shadow: 0 0 0 3px rgba(0,212,170,.08);
}
.prf-input-eye {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    color: rgba(255,255,255,.2);
    cursor: pointer; font-size: 13px; padding: 4px;
    transition: color .15s;
}
.prf-input-eye:hover { color: rgba(255,255,255,.6); }

.prf-hint {
    font-size: 11px;
    color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.02);
    border-left: 2px solid rgba(0,212,170,.25);
    padding: 8px 10px;
    border-radius: 0 7px 7px 0;
    margin-bottom: 14px;
    line-height: 1.55;
}
.prf-hint strong { color: rgba(255,255,255,.45); }
.prf-key-msg {
    font-size: 12px; min-height: 18px;
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px;
}
.prf-msg-success { color: #4ade80; }
.prf-msg-error   { color: #f87171; }

/* Кнопки */
.prf-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.prf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
    white-space: nowrap;
}
.prf-btn:disabled { opacity: .5; cursor: not-allowed; }
.prf-btn:active:not(:disabled) { transform: scale(.97); }
.prf-btn-primary {
    background: rgba(0,212,170,.1); color: #00d4aa;
    border-color: rgba(0,212,170,.22);
}
.prf-btn-primary:hover { background: rgba(0,212,170,.18); }
.prf-btn-ghost {
    background: rgba(255,255,255,.04); color: rgba(255,255,255,.45);
    border-color: rgba(255,255,255,.08);
}
.prf-btn-ghost:hover { background: rgba(255,255,255,.09); color: rgba(255,255,255,.75); }
.prf-btn-danger {
    background: rgba(239,68,68,.07); color: #f87171;
    border-color: rgba(239,68,68,.18);
}
.prf-btn-danger:hover { background: rgba(239,68,68,.14); }
.prf-btn-save {
    background: rgba(34,197,94,.1); color: #4ade80;
    border-color: rgba(34,197,94,.22);
}
.prf-btn-save:hover { background: rgba(34,197,94,.18); }

/* ── Цели ────────────────────────────────────────────────────── */
.prf-goal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 20px;
    text-align: center;
}
.prf-goal-empty-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.15);
    font-size: 22px;
}
.prf-goal-empty-text { font-size: 13px; color: rgba(255,255,255,.25); }

.prf-goal-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.prf-goal-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    display: block;
}
.prf-goal-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    gap: 8px;
}
.prf-goal-row:last-child { border-bottom: none; }
.prf-goal-label { font-size: 11px; color: rgba(255,255,255,.28); flex-shrink: 0; }
.prf-goal-value { font-size: 12px; color: rgba(255,255,255,.65); font-weight: 500; text-align: right; }
.prf-goal-pct { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; }
.prf-goal-mini-bar {
    height: 4px;
    background: rgba(255,255,255,.06);
    border-radius: 2px;
    margin: 12px 0 4px;
    overflow: hidden;
}
.prf-goal-mini-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .5s ease;
}

body.profile-open { overflow: hidden; }

@media (max-width: 480px) {
    .profile-panel { width: 100vw; }
    .prf-nav-btn::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   СПРАВКА КАК РАЗДЕЛ APP-SHELL (view-help)
   ══════════════════════════════════════════════════════════════════════ */
#view-help .faq-overlay {
    display: none !important;
}

#view-help .faq-panel {
    position: static;
    transform: none !important;
    width: 100%;
    max-width: 860px;
    height: auto;
    box-shadow: none;
    background: transparent;
    border-left: none;
    margin: 0 auto;
}

#view-help .faq-close-btn {
    display: none;
}

#view-help .faq-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #0a0e17;
    border-radius: 12px 12px 0 0;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

#view-help .faq-body {
    max-height: none;
    overflow: visible;
    padding: 20px 24px 40px;
}

/* ══════════════════════════════════════════════════════════════════════
   ПРОФИЛЬ КАК РАЗДЕЛ APP-SHELL (view-profile)
   ══════════════════════════════════════════════════════════════════════ */
#view-profile {
    min-height: calc(100dvh - 64px);
}

/* profile-body внутри view занимает всю высоту */
#view-profile #profile-view-body {
    min-height: calc(100dvh - 64px);
    display: flex;
    flex-direction: row;
    background: #0a0e17;
}

/* prf-nav в виде чуть шире — есть место */
#view-profile .prf-nav {
    min-height: calc(100dvh - 64px);
}

/* Секции профиля занимают всё доступное пространство */
#view-profile .prf-content {
    flex: 1;
    min-height: calc(100dvh - 64px);
    overflow-y: auto;
}

/* На мобильном — колонка */
@media (max-width: 600px) {
    #view-profile #profile-view-body {
        flex-direction: column;
        min-height: auto;
    }
    #view-profile .prf-nav {
        min-height: auto;
    }
}