/* ═══════════════════════════════
   LIGHT THEME
   Подключать ПОСЛЕ style.css:
   <link rel="stylesheet" href="style-light.css">
   Активируется классом body.light
═══════════════════════════════ */

body.light {
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(0, 0, 0, 0.1);
    --text: #1a1a1a;
    --text-muted: rgba(0, 0, 0, 0.55);
}

body.light {
    background: linear-gradient(135deg, #f7f6f5 0%, #f3f3f3 100%);
    background-size: cover;
}

body.light.fade {
    filter: brightness(0.9);
}

html:has(body.light) {
    background: linear-gradient(135deg, #f7f6f5 0%, #f3f3f3 100%);
}

body.light *:not(.star-badge):not(.about-section h1) {
    color: #1a1a1a;
}

/* Tabs */
body.light .tabs-inner {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(200, 200, 200);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

body.light .tab-button {
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #2a2a2a;
    background: transparent;
}
body.light .tab-button:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
    color: #000;
}

body.light .tab-button-active {
    border-color: rgba(0, 0, 0, 0.25) !important;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.03)
    ) !important;
    color: #000 !important;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body.light .tab-button-active::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 0, 0, 0.8),
        transparent
    );
}

/* Functional buttons */
body.light .func-button {
    background: rgba(255, 255, 255, 0);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #2a2a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.light .func-button:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(0, 0, 0, 0.22);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Popovers */
body.light .popover,
body.light .search-popover,
body.light .info-popover {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.light .search-popover h3,
body.light .info-popover h3,
body.light .info-popover p {
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
}

body.light .search-popover input {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.14);
    color: #1a1a1a;
}

body.light .search-popover input:focus {
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.04);
}

/* Stats */
body.light .stat {
    color: rgba(0, 0, 0);
}
body.light .stat:hover {
    color: rgba(0, 0, 0);
}
body.light .stat::after {
    background: rgba(0, 0, 0);
}
body.light .divider {
    color: rgba(0, 0, 0);
}

/* Card */
body.light .card {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.light .card.hover-lift-card {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.15);
}

/* Avatar */
body.light .avatar {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.03)
    );
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
    -webkit-text-fill-color: #1a1a1a;
}

/* Skills */
body.light .skill {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
}

/* Contacts */
body.light .contact-item {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.18);
}
body.light .contact-item:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
body.light .contact-icon {
    background: rgba(0, 0, 0, 0.05);
}

/* Projects */
body.light .project {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
body.light .project.hover-lift-project {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
body.light .project-tag {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #2a2a2a;
}
body.light .project-tag:hover {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.18);
}
body.light .star-badge {
    background: rgba(180, 130, 0, 0.1);
    border-color: rgba(160, 110, 0, 0.25);
    color: #7a5800 !important;
    -webkit-text-fill-color: #7a5800 !important;
}

/* Button */
body.light .button {
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: #1a1a1a;
    background: rgba(255, 255, 255, 0.55);
}
body.light .button:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.3);
    color: #000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
body.light .button::before {
    background: rgba(0, 0, 0, 0.04);
}

/* About button */
body.light .about {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.8);
    color: #1a1a1a;
}
body.light .about:hover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.25);
    color: #000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
body.light .about::before {
    background: rgba(0, 0, 0, 0.04);
}

/* Become */
body.light .become {
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #2a2a2a;
}
body.light .become:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.22);
    color: #000;
}

/* Photos */
body.light .photo-item img {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Footer */
body.light .footer,
body.light .footer a {
    color: rgba(0, 0, 0, 0.5);
}

/* Lightbox */
body.light .lightbox-overlay {
    background: rgba(200, 205, 215, 0.9);
}
body.light .lightbox-close {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
    -webkit-text-fill-color: #1a1a1a;
}

/* Loader */
body.light .loader-left,
body.light .loader-center,
body.light .loader-right,
body.light .loader-avatar,
body.light .loader-link,
body.light .loader-link span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ═══════════════════════════════════════
   LIGHT THEME — COMMENTS
═══════════════════════════════════════ */

body.light .comment-rate-banner {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.5);
}
body.light .comment-rate-banner.warn {
    background: rgba(200, 130, 0, 0.07);
    border-color: rgba(180, 120, 0, 0.2);
    color: rgba(140, 90, 0, 0.9);
}
body.light .comment-rate-banner.blocked {
    background: rgba(200, 50, 50, 0.07);
    border-color: rgba(180, 50, 50, 0.2);
    color: rgba(170, 50, 50, 0.9);
}

body.light .c-label {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.1);
}
body.light .c-label:focus-within {
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.9);
}
body.light .c-label.invalid {
    border-color: rgba(200, 50, 50, 0.5);
}

body.light .c-input { color: #1a1a1a; }
body.light .c-input::placeholder { color: rgba(0, 0, 0, 0.28); }
body.light .c-icon { color: rgba(0, 0, 0, 0.25); }
body.light .c-label:focus-within .c-icon { color: rgba(0, 0, 0, 0.5); }

body.light .c-textarea-wrap textarea {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}
body.light .c-textarea-wrap textarea:focus {
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.9);
}
body.light .c-textarea-wrap textarea::placeholder { color: rgba(0, 0, 0, 0.28); }
body.light .c-char-count { color: rgba(0, 0, 0, 0.3); }
body.light .comment-error { color: rgba(180, 50, 50, 0.9); }

body.light .comment-submit {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.18);
    color: #1a1a1a;
}
body.light .comment-submit:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

body.light .comment-list {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
body.light .comment-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

body.light .comment-empty {
    color: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light .c-card {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 0, 0, 0.15);
}
body.light .c-avatar {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
}
body.light .c-name { color: #1a1a1a; }
body.light .c-email { color: rgba(0, 0, 0, 0.3); }
body.light .c-time { color: rgba(0, 0, 0, 0.3); }
body.light .c-body { color: rgba(0, 0, 0, 0.6); }

/* Comment photo upload */
body.light .c-photo-wrap {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.02);
}
body.light .c-photo-wrap:hover,
body.light .c-photo-wrap.drag-over {
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.04);
}
body.light .c-photo-inner i { color: rgba(0, 0, 0, 0.2); }
body.light .c-photo-hint { color: rgba(0, 0, 0, 0.4); }
body.light .c-photo-click { color: rgba(0, 0, 0, 0.7); }
body.light .c-photo-sub { color: rgba(0, 0, 0, 0.25); }
body.light .c-photo-name { color: rgba(0, 0, 0, 0.35); }
body.light .c-photo-preview { border-color: rgba(0, 0, 0, 0.08); }

body.light .c-photo-remove-btn {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.6);
    padding-bottom:1px;
}

/* ═══════════════════════════════════════
   LIGHT THEME — ABOUT PAGE
═══════════════════════════════════════ */

body.light .about-section {
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    color: #1a1a1a;
}
body.light .about-section h1 {
    background: linear-gradient(135deg, #111 0%, #444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
body.light .about-section h2,
body.light .about-section h3 {
    color: #1a1a1a;
    -webkit-text-fill-color: #1a1a1a;
}
body.light .about-section p,
body.light .about-section li {
    color: #3a3a3a;
    -webkit-text-fill-color: #3a3a3a;
}
body.light .about-section strong {
    color: #111;
    -webkit-text-fill-color: #111;
}
body.light .about-section em {
    color: #555;
    -webkit-text-fill-color: #555;
}
body.light .about-section hr {
    border-color: rgba(0, 0, 0, 0.08);
}
body.light .about-section footer,
body.light .about-section .footer {
    color: rgba(0, 0, 0, 0.35);
    -webkit-text-fill-color: rgba(0, 0, 0, 0.35);
}
body.light .about-section .footer a {
    color: rgba(0, 0, 0, 0.45);
    -webkit-text-fill-color: rgba(0, 0, 0, 0.45);
}

/* Misc */
body.light .portfolio h1 {
    color: #000000;
}


            /* 404 */
            body.light .err-code {
                background: linear-gradient(
                    135deg,
                    rgba(0, 0, 0, 0.85) 0%,
                    rgba(0, 0, 0, 0.3) 100%
                );
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            body.light .err-glitch::before,
            body.light .err-glitch::after {
                background: linear-gradient(
                    135deg,
                    rgba(0, 0, 0, 0.85) 0%,
                    rgba(0, 0, 0, 0.3) 100%
                );
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            body.light .err-title {
                color: #111;
            }
            body.light .err-desc {
                color: rgba(0, 0, 0, 0.45);
            }
            body.light .err-btn {
                background: rgba(255, 255, 255, 0.6);
                border-color: rgba(0, 0, 0, 0.14);
                color: #1a1a1a;
            }
            body.light .err-btn:hover {
                background: rgba(255, 255, 255, 0.9);
                border-color: rgba(0, 0, 0, 0.25);
                color: #000;
            }
            body.light .err-btn.primary {
                background: rgba(255, 255, 255, 0.8);
                border-color: rgba(0, 0, 0, 0.2);
            }
            body.light .err-orbit-ring {
                border-color: rgba(0, 0, 0, 0.06);
            }
            body.light .err-dot {
                background: rgba(0, 0, 0, 0.2);
            }
            body.light .err-center-icon {
                color: rgba(0, 0, 0, 0.08);
            }

body.light .blog {
    color: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.08);
}            

body.light .blog-card {
    border-color: rgba(0, 0, 0, 0.1);
}
body.light .blog-text {
    color: rgba(0, 0, 0, 0.5);
}
body.light .blog-like-btn {
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.45);
}
body.light .blog-like-btn:hover {
    border-color: rgba(0, 0, 0, 0.35);
    color: rgba(0, 0, 0, 0.85);
}
body.light .blog-like-btn.liked {
    border-color: rgba(0, 0, 0, 1);
    color: #000000;
}