/* ═══════════════════════════════════════════════════
   lk.css — Личный кабинет v10.0
   «Цифровая жемчужина Подмосковья»
   Использует токены из main.css (design-2026)
   ═══════════════════════════════════════════════════ */

/* ── Табы ЛК ── */
.lk-tab {
    position: relative;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.lk-tab.active {
    color: oklch(50% 0.22 265) !important;
    border-bottom-color: oklch(50% 0.22 265) !important;
}

.dark .lk-tab.active {
    color: oklch(72% 0.15 240) !important;
    border-bottom-color: oklch(72% 0.15 240) !important;
}

/* ── Табы аватара ── */
.lk-avatar-tab {
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
    cursor: pointer;
}

.lk-avatar-tab.border-primary {
    border-bottom-color: oklch(50% 0.22 265) !important;
}

.dark .lk-avatar-tab.border-primary {
    border-bottom-color: oklch(72% 0.15 240) !important;
}

/* ── Карточка избранного (LK-специфичная) ── */
.lk-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.dark .lk-card {
    background: rgba(15,23,42,0.72);
    border-color: rgba(255,255,255,0.05);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.lk-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.dark .lk-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.lk-card:active {
    transform: scale(0.98);
}

.lk-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    background: oklch(92% 0.01 260);
}

.dark .lk-card-icon {
    background: oklch(22% 0.02 260);
}

.lk-card-body {
    flex: 1;
    min-width: 0;
}

.lk-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lk-card-meta {
    font-size: 11px;
    color: oklch(55% 0.02 260);
    margin-top: 2px;
}

.lk-card-meta .rating {
    color: oklch(75% 0.17 85);
    font-weight: 600;
}

.lk-card-remove {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: oklch(55% 0.02 260);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.lk-card-remove:hover {
    background: oklch(85% 0.04 25 / 0.2);
    color: oklch(50% 0.18 25);
}

.dark .lk-card-remove:hover {
    background: rgba(239,68,68,0.15);
}

/* ── Карточка отзыва ── */
.lk-review {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.dark .lk-review {
    background: rgba(15,23,42,0.72);
    border-color: rgba(255,255,255,0.05);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.lk-review-stars {
    color: oklch(75% 0.17 85);
    font-size: 14px;
    letter-spacing: 1px;
}

.lk-review-text {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 6px;
}

.lk-review-date {
    font-size: 11px;
    color: oklch(55% 0.02 260);
    margin-top: 8px;
}

/* ── Карточка достижения ── */
.lk-achievement {
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0,0,0,0.05);
    text-align: center;
    transition: all 0.2s;
}

.dark .lk-achievement {
    background: rgba(15,23,42,0.72);
    border-color: rgba(255,255,255,0.05);
}

.lk-achievement.locked {
    opacity: 0.5;
}

.lk-achievement.unlocked {
    border-color: oklch(50% 0.22 265 / 0.2);
    box-shadow: 0 0 0 1px oklch(50% 0.22 265 / 0.1);
}

.lk-achievement-icon {
    font-size: 32px;
    margin-bottom: 6px;
}

.lk-achievement-name {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
}

.lk-achievement-desc {
    font-size: 10px;
    color: oklch(55% 0.02 260);
    margin-bottom: 6px;
}

.lk-achievement-bar {
    width: 100%;
    height: 4px;
    background: oklch(85% 0.02 260);
    border-radius: 2px;
    overflow: hidden;
}

.dark .lk-achievement-bar {
    background: oklch(22% 0.02 260);
}

.lk-achievement-fill {
    height: 100%;
    border-radius: 2px;
    background: oklch(50% 0.22 265);
    transition: width 0.3s ease;
}

.lk-achievement-fill.complete {
    background: oklch(60% 0.15 150);
}

.lk-achievement-progress {
    font-size: 9px;
    color: oklch(55% 0.02 260);
    margin-top: 2px;
}

/* ── Капча ── */
.captcha-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border-radius: 12px;
    background: #fff;
    border: 2px solid oklch(85% 0.01 260);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.dark .captcha-cell {
    background: oklch(22% 0.02 260);
    border-color: oklch(28% 0.02 260);
}

.captcha-cell:hover {
    border-color: oklch(50% 0.22 265);
    transform: scale(1.05);
}

.captcha-cell.selected {
    border-color: oklch(50% 0.22 265);
    background: oklch(50% 0.22 265 / 0.1);
    transform: scale(1.08);
    box-shadow: 0 0 0 3px oklch(50% 0.22 265 / 0.15);
}

/* ── Gender buttons ── */
.gender-btn {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.gender-btn.selected {
    border-color: oklch(50% 0.22 265) !important;
    background: oklch(50% 0.22 265 / 0.08) !important;
}

.dark .gender-btn.selected {
    border-color: oklch(72% 0.15 240) !important;
    background: oklch(72% 0.15 240 / 0.12) !important;
}

/* ── Пустое состояние ── */
.lk-empty {
    text-align: center;
    padding: 32px 20px;
}

.lk-empty-icon {
    font-size: 44px;
    margin-bottom: 10px;
}

.lk-empty-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.lk-empty-sub {
    font-size: 12px;
    color: oklch(55% 0.02 260);
    line-height: 1.5;
}

/* ── Анимации ── */
.lk-fade-in {
    animation: lkFadeIn 0.3s ease;
}

@keyframes lkFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.lk-tab-content-hidden {
    display: none !important;
}

/* ── Адаптив ── */
@media (min-width: 768px) {
    .lk-card { padding: 16px 18px; }
    #lk-tabs { overflow-x: visible; justify-content: flex-start; }
}

@media (min-width: 1024px) {
    .lk-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}