html[data-site-theme="light"] {
    --ocean-bg-0: #dbe8f6;
    --ocean-bg-1: #cddff1;
    --ocean-surface-0: #edf4fe;
    --ocean-surface-1: #e3eefb;
    --ocean-surface-2: #d8e7f8;
    --ocean-border: rgba(53, 94, 138, 0.24);
    --ocean-text: #12253d;
    --ocean-muted: #4a6383;
    --ocean-accent: #4d8fd6;
    --ocean-accent-strong: #2f6fb6;
    color-scheme: light;
}

html[data-site-theme="light"] body {
    background: radial-gradient(140% 120% at 15% -10%, #e8f1fc 0%, var(--ocean-bg-0) 52%, var(--ocean-bg-1) 100%) !important;
    color: var(--ocean-text) !important;
}

html[data-site-theme="light"] #customCursor {
    background: #15304e !important;
}

html[data-site-theme="light"] .starfield {
    background: radial-gradient(120% 110% at 50% 10%, #e9f3ff 0%, #d9e8f8 58%, #ccdeef 100%) !important;
    opacity: 0.78;
}

html[data-site-theme="light"] .star {
    background: #6c88ab !important;
    box-shadow: none !important;
}

html[data-site-theme="light"] .fixed-nav {
    background: rgba(228, 238, 250, 0.9) !important;
    border-color: var(--ocean-border) !important;
    box-shadow: 0 12px 34px rgba(34, 63, 95, 0.14) !important;
}

html[data-site-theme="light"] .nav-link {
    color: var(--ocean-muted) !important;
}

html[data-site-theme="light"] .nav-link:hover,
html[data-site-theme="light"] .nav-link.active {
    color: var(--ocean-text) !important;
    background: rgba(77, 143, 214, 0.14) !important;
}

html[data-site-theme="light"] :is(
    .container,
    .container *,
    .performance-settings-modal,
    .performance-settings-modal *,
    .contact-modal,
    .contact-modal *,
    .external-confirm-modal,
    .external-confirm-modal *,
    .track-action-modal,
    .track-action-modal *,
    .lyrics-modal,
    .lyrics-modal *,
    .photography-modal,
    .photography-modal *,
    .photography-preview-modal,
    .photography-preview-modal *,
    .donate-modal,
    .donate-modal *,
    .open-hours-modal,
    .open-hours-modal *,
    .avatar-modal .modal-content,
    .avatar-modal .modal-content *
) {
    color: var(--ocean-text) !important;
}

html[data-site-theme="light"] :is(
    .tagline,
    .about-section-subtitle,
    .about-team-desc,
    .reviews-subtitle,
    .changelog-body,
    .changelog-date,
    .changelog-note,
    .visibility-label,
    .projects-search-meta,
    .skills-search-meta,
    .review-time,
    .theme-mode-desc,
    .status-text,
    .info-label
) {
    color: var(--ocean-muted) !important;
}

html[data-site-theme="light"] :is(
    .discord-card,
    .info-item,
    .about-card,
    .about-photo-row,
    #about-team-card .about-team-card,
    .about-chart,
    .project-card,
    .language-card,
    .contact-item,
    .review-card,
    .music-player-card,
    .lastfm-card,
    .weather-card,
    .weather-day-card,
    .now-building-card,
    .site-empty-card,
    .projects-search-wrap,
    .skills-search-wrap,
    .reviews-summary > span,
    .project-stats,
    .project-stats .stat,
    .skills-overview span,
    .settings-panel[data-settings-panel="changelog"],
    .settings-panel[data-settings-panel="themes"],
    .settings-panel[data-settings-panel="visibility"],
    .changelog-item,
    .availability-status-btn
) {
    background: linear-gradient(180deg, var(--ocean-surface-0) 0%, var(--ocean-surface-1) 100%) !important;
    border-color: var(--ocean-border) !important;
    box-shadow: 0 10px 24px rgba(37, 70, 106, 0.08) !important;
}

html[data-site-theme="light"] .availability-status-btn.inactive {
    background: rgba(210, 226, 244, 0.65) !important;
    border-color: rgba(53, 94, 138, 0.15) !important;
    color: var(--ocean-muted) !important;
    box-shadow: none !important;
}

html[data-site-theme="light"] :is(
    .performance-settings-overlay,
    .contact-overlay,
    .external-confirm-overlay,
    .track-action-overlay,
    .lyrics-overlay,
    .photography-overlay,
    .photography-preview-overlay,
    .donate-overlay,
    .open-hours-overlay,
    .avatar-modal,
    .avatar-preview-modal,
    .wakeup-overlay,
    .favorites-overlay,
    #favorite-detail-overlay,
    .project-detail-overlay
) {
    background: rgba(181, 200, 222, 0.7) !important;
    backdrop-filter: blur(14px) !important;
}

html[data-site-theme="light"] .wakeup-overlay {
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(8px) !important;
}

html[data-site-theme="light"] {
    --overlay-modal-bg: linear-gradient(180deg, var(--ocean-surface-0) 0%, var(--ocean-surface-2) 100%) !important;
    --overlay-modal-border: var(--ocean-border) !important;
    --overlay-modal-shadow: 0 26px 56px rgba(37, 70, 106, 0.18) !important;
}

html[data-site-theme="light"] :is(
    .performance-settings-modal,
    .contact-modal,
    .external-confirm-modal,
    .track-action-modal,
    .lyrics-modal,
    .photography-modal,
    .photography-preview-modal,
    .donate-modal,
    .open-hours-modal,
    .avatar-modal .modal-content,
    .preview-content,
    .favorite-detail-modal
) {
    background: linear-gradient(180deg, var(--ocean-surface-0) 0%, var(--ocean-surface-2) 100%) !important;
    border-color: var(--ocean-border) !important;
    box-shadow: 0 26px 56px rgba(37, 70, 106, 0.16) !important;
}

html[data-site-theme="light"] :is(
    .projects-search-input,
    .skills-search-input,
    .visibility-category-tabs,
    .settings-tabs
) {
    background: rgba(236, 244, 253, 0.9) !important;
    border-color: var(--ocean-border) !important;
    color: var(--ocean-text) !important;
}

html[data-site-theme="light"] :is(
    .form-input,
    .form-textarea
) {
    background: transparent !important;
    border: none !important;
    color: var(--ocean-text) !important;
    box-shadow: none !important;
}

html[data-site-theme="light"] .email-suggestions {
    background: rgba(236, 244, 253, 0.95) !important;
    border-color: var(--ocean-border) !important;
    color: var(--ocean-text) !important;
}

html[data-site-theme="light"] .email-suggestion {
    background: rgba(225, 237, 251, 0.9) !important;
    border-color: rgba(53, 94, 138, 0.24) !important;
    color: #1f446a !important;
}

html[data-site-theme="light"] .email-suggestion:hover {
    background: rgba(219, 232, 248, 0.95) !important;
    border-color: rgba(53, 94, 138, 0.32) !important;
    color: #1a3f66 !important;
}

html[data-site-theme="light"] :is(
    .form-group,
    .contact-modal-header
) {
    border-color: rgba(53, 94, 138, 0.18) !important;
}

html[data-site-theme="light"] .form-group {
    background: rgba(233, 242, 253, 0.52) !important;
}

html[data-site-theme="light"] :is(
    .contact-modal-title,
    .form-label
) {
    color: #12365a !important;
}

html[data-site-theme="light"] .contact-modal-subtitle {
    color: #45627f !important;
}

html[data-site-theme="light"] :is(
    .projects-filter-chip,
    .visibility-category-btn,
    .theme-mode-btn,
    .settings-tab,
    .contact-social,
    .preview-link,
    .music-control,
    .review-arrow,
    .performance-settings-close,
    .open-hours-close,
    .external-confirm-close,
    .track-action-close,
    .lyrics-close,
    .photography-close,
    .photography-preview-close,
) {
    background: rgba(230, 240, 252, 0.92) !important;
    border-color: var(--ocean-border) !important;
    color: var(--ocean-text) !important;
}

html[data-site-theme="light"] :is(
    .settings-tab.active,
    .projects-filter-chip.active,
    .theme-mode-btn.active,
    .visibility-category-btn.active
) {
    background: rgba(77, 143, 214, 0.2) !important;
    border-color: rgba(77, 143, 214, 0.52) !important;
    color: #0f2237 !important;
}

html[data-site-theme="light"] :is(
    .project-link-btn,
    .contact-now-btn,
    .photography-download-btn,
    .donate-copy-btn,
    .settings-reset-btn,
    .external-confirm-btn,
    .track-action-btn,
    .open-for-work-btn
) {
    background: linear-gradient(180deg, rgba(77, 143, 214, 0.26) 0%, rgba(77, 143, 214, 0.18) 100%) !important;
    border-color: rgba(77, 143, 214, 0.52) !important;
    color: #0f2237 !important;
}

html[data-site-theme="light"] :is(
    .project-link-btn:hover,
    .contact-now-btn:hover,
    .photography-download-btn:hover,
    .settings-reset-btn:hover,
    .track-action-btn:hover,
    .open-for-work-btn:hover
) {
    background: linear-gradient(180deg, rgba(77, 143, 214, 0.26) 0%, rgba(77, 143, 214, 0.18) 100%) !important;
}

html[data-site-theme="light"] .review-verified {
    background: rgba(77, 143, 214, 0.14) !important;
    border-color: rgba(77, 143, 214, 0.34) !important;
    color: #12365a !important;
}

html[data-site-theme="light"] :is(
    .projects-section-divider,
    .contact-social-divider,
    .visibility-block + .visibility-block
) {
    border-color: rgba(53, 94, 138, 0.2) !important;
    background: linear-gradient(90deg, transparent, rgba(53, 94, 138, 0.22), transparent) !important;
}

html[data-site-theme="light"] .projects-search-clear i,
html[data-site-theme="light"] .skills-search-clear i,
html[data-site-theme="light"] .review-stars i,
html[data-site-theme="light"] .review-quote {
    color: var(--ocean-text) !important;
}

html[data-site-theme="light"] .review-stars i {
    color: #c58b22 !important;
}

html[data-site-theme="light"] :is(
    .status-dot,
    .pulse-dot,
    .open-for-work-btn .pulse-dot,
    .about-icon i,
    .theme-mode-btn i,
    .fa-heart,
    .fa-music,
    .fa-play,
    .fa-pause
) {
    color: inherit;
}

html[data-site-theme="light"] .wake-text,
html[data-site-theme="light"] .wake-muted-btn {
    color: #214970 !important;
    text-shadow: none !important;
}

html[data-site-theme="light"] ::placeholder {
    color: #6280a3 !important;
}

html[data-site-theme="light"] .lastfm-card {
    background: linear-gradient(180deg, #e8f1fc 0%, #dce9f8 100%) !important;
    border-color: rgba(53, 94, 138, 0.26) !important;
}

html[data-site-theme="light"] .lastfm-header {
    border-bottom-color: rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] .lastfm-tabs {
    background: rgba(214, 228, 244, 0.85) !important;
    border-color: rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] .lastfm-tab {
    color: #3d5776 !important;
}

html[data-site-theme="light"] .lastfm-tab.active {
    background: rgba(53, 94, 138, 0.16) !important;
    color: #11253d !important;
}

html[data-site-theme="light"] .reviews-tabs {
    background: rgba(214, 228, 244, 0.85) !important;
    border-color: rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] .reviews-tab {
    color: #3d5776 !important;
}

html[data-site-theme="light"] .reviews-tab.active {
    background: rgba(53, 94, 138, 0.16) !important;
    color: #11253d !important;
    border-color: rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] .collage-toggle-btn {
    background: rgba(225, 237, 251, 0.92) !important;
    border-color: rgba(53, 94, 138, 0.2) !important;
    color: #3d5776 !important;
}

html[data-site-theme="light"] .collage-toggle-btn:hover {
    background: rgba(214, 228, 244, 0.96) !important;
    border-color: rgba(53, 94, 138, 0.3) !important;
    color: #11253d !important;
}

html[data-site-theme="light"] .collage-controls-card {
    background: rgba(230, 240, 252, 0.6) !important;
    border-color: rgba(53, 94, 138, 0.15) !important;
}

html[data-site-theme="light"] .collage-size-row {
    border-top-color: rgba(53, 94, 138, 0.1) !important;
}

html[data-site-theme="light"] .collage-size-label {
    color: #4a6383 !important;
}

html[data-site-theme="light"] .collage-size-field {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(53, 94, 138, 0.2) !important;
    color: #11253d !important;
}

html[data-site-theme="light"] .collage-size-field:focus {
    border-color: #4d8fd6 !important;
    background: #ffffff !important;
}

html[data-site-theme="light"] .collage-size-field.invalid {
    background: #fff5f5 !important;
    border-color: #e53e3e !important;
    color: #c53030 !important;
}

html[data-site-theme="light"] .collage-selector-btn {
    background: rgba(225, 237, 251, 0.92) !important;
    border-color: rgba(53, 94, 138, 0.2) !important;
    color: #3d5776 !important;
}

html[data-site-theme="light"] .collage-selector-btn:hover {
    background: rgba(214, 228, 244, 0.96) !important;
    border-color: rgba(53, 94, 138, 0.3) !important;
    color: #11253d !important;
}

html[data-site-theme="light"] .collage-selector-btn.active {
    background: rgba(77, 143, 214, 0.2) !important;
    border-color: rgba(77, 143, 214, 0.52) !important;
    color: #0f2237 !important;
}

html[data-site-theme="light"] .collage-loading {
    color: #4f6682 !important;
}

html[data-site-theme="light"] .lastfm-title,
html[data-site-theme="light"] .lastfm-track-name,
html[data-site-theme="light"] .lastfm-info-icon {
    color: #11253d !important;
}

html[data-site-theme="light"] .lastfm-track {
    background: rgba(229, 239, 251, 0.96) !important;
    border-color: rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] .lastfm-track:hover {
    background: rgba(220, 233, 248, 0.98) !important;
    border-color: rgba(53, 94, 138, 0.32) !important;
}

html[data-site-theme="light"] .lastfm-track.now-playing {
    background: linear-gradient(135deg, rgba(77, 143, 214, 0.2) 0%, rgba(220, 233, 248, 0.96) 100%) !important;
    border-color: rgba(77, 143, 214, 0.46) !important;
}

html[data-site-theme="light"] .lastfm-track-number,
html[data-site-theme="light"] .lastfm-link-icon,
html[data-site-theme="light"] .lastfm-refresh {
    background: rgba(214, 228, 244, 0.95) !important;
    border-color: rgba(53, 94, 138, 0.22) !important;
    color: #1a3553 !important;
}

html[data-site-theme="light"] .lastfm-track-artist,
html[data-site-theme="light"] .lastfm-track-date {
    color: #4c6380 !important;
}

html[data-site-theme="light"] .lastfm-info-overlay {
    background: transparent !important;
    backdrop-filter: blur(7px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(7px) saturate(1.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
}

html[data-site-theme="light"] .lastfm-info-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(243, 249, 255, 0.88);
    border: 1px solid rgba(53, 94, 138, 0.22);
    color: #12355a !important;
    filter: drop-shadow(0 2px 6px rgba(33, 66, 100, 0.2)) !important;
}

html[data-site-theme="light"] .lastfm-track:hover .lastfm-info-icon {
    background: rgba(246, 251, 255, 0.96);
    color: #0f2d4f !important;
}

html[data-site-theme="light"] .track-action-modal {
    background: linear-gradient(160deg, #f1f7ff 0%, #e2edf9 100%) !important;
    border-color: rgba(53, 94, 138, 0.24) !important;
    box-shadow: 0 24px 58px rgba(35, 67, 101, 0.2) !important;
}

html[data-site-theme="light"] .track-action-header {
    border-bottom-color: rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] .track-action-kicker {
    background: rgba(77, 143, 214, 0.15) !important;
    border-color: rgba(53, 94, 138, 0.3) !important;
    color: #123a60 !important;
}

html[data-site-theme="light"] .track-action-subtitle,
html[data-site-theme="light"] .track-action-body,
html[data-site-theme="light"] .track-action-btn-desc,
html[data-site-theme="light"] .track-action-go {
    color: #4d6583 !important;
}

html[data-site-theme="light"] .track-action-body-card {
    background: rgba(230, 239, 251, 0.84) !important;
    border-color: rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] .track-action-btn i:first-child {
    background: rgba(223, 235, 249, 0.94) !important;
    border-color: rgba(53, 94, 138, 0.24) !important;
    color: #1a3f66 !important;
}

html[data-site-theme="light"] .track-action-btn {
    background: linear-gradient(180deg, rgba(77, 143, 214, 0.2), rgba(77, 143, 214, 0.14)) !important;
    border-color: rgba(53, 94, 138, 0.22) !important;
    color: #12365a !important;
}

html[data-site-theme="light"] .track-action-btn:hover {
    background: linear-gradient(180deg, rgba(77, 143, 214, 0.24), rgba(77, 143, 214, 0.16)) !important;
    border-color: rgba(53, 94, 138, 0.28) !important;
}

html[data-site-theme="light"] .track-action-btn.ghost {
    background: linear-gradient(180deg, rgba(225, 237, 251, 0.94), rgba(219, 232, 248, 0.86)) !important;
    border-color: rgba(53, 94, 138, 0.18) !important;
    color: #23486d !important;
}

html[data-site-theme="light"] #preview-player.preview-player {
    background:
        radial-gradient(120% 140% at 12% -10%, rgba(77, 143, 214, 0.25) 0%, rgba(77, 143, 214, 0) 46%),
        linear-gradient(165deg, rgba(241, 248, 255, 0.98) 0%, rgba(227, 238, 251, 0.98) 100%) !important;
    border: 1px solid rgba(53, 94, 138, 0.28) !important;
    box-shadow: 0 14px 38px rgba(35, 67, 101, 0.22) !important;
}

html[data-site-theme="light"] #preview-visualizer {
    opacity: 0.33 !important;
}

html[data-site-theme="light"] .preview-art {
    border-color: rgba(53, 94, 138, 0.2) !important;
    box-shadow: 0 5px 14px rgba(35, 67, 101, 0.18) !important;
}

html[data-site-theme="light"] .preview-title {
    color: #102840 !important;
}

html[data-site-theme="light"] .preview-artist,
html[data-site-theme="light"] .preview-album,
html[data-site-theme="light"] .preview-volume-value {
    color: #486281 !important;
}

html[data-site-theme="light"] .preview-volume i {
    color: #2e6299 !important;
}

html[data-site-theme="light"] .preview-volume-slider {
    background: rgba(53, 94, 138, 0.2) !important;
    accent-color: #4d8fd6 !important;
}

html[data-site-theme="light"] .preview-volume-slider::-webkit-slider-thumb {
    background: #4d8fd6 !important;
    border-color: rgba(255, 255, 255, 0.64) !important;
}

html[data-site-theme="light"] .preview-volume-slider::-moz-range-thumb {
    background: #4d8fd6 !important;
    border-color: rgba(255, 255, 255, 0.64) !important;
}

html[data-site-theme="light"] #chartLineGradient stop:nth-child(1) {
    stop-color: #3d82ca;
    stop-opacity: 0.52;
}

html[data-site-theme="light"] #chartLineGradient stop:nth-child(2) {
    stop-color: #77b0e4;
    stop-opacity: 0.86;
}

html[data-site-theme="light"] #chartLineGradient stop:nth-child(3) {
    stop-color: #2f73ba;
    stop-opacity: 0.72;
}

html[data-site-theme="light"] .chart-grid line {
    stroke: rgba(53, 94, 138, 0.14) !important;
}

html[data-site-theme="light"] .chart-line {
    filter: drop-shadow(0 0 8px rgba(77, 143, 214, 0.24)) !important;
}

html[data-site-theme="light"] .chart-line-glow {
    stroke: rgba(77, 143, 214, 0.52) !important;
}

html[data-site-theme="light"] .chart-point circle {
    fill: #eff6ff !important;
    stroke: #4d8fd6 !important;
}

html[data-site-theme="light"] .chart-point.active circle {
    fill: #4d8fd6 !important;
    stroke: #f6fbff !important;
}

html[data-site-theme="light"] .chart-x-labels text {
    fill: #4f6682 !important;
}

html[data-site-theme="light"] .chart-guide {
    stroke: rgba(77, 143, 214, 0.4) !important;
}

html[data-site-theme="light"] .chart-tooltip {
    background: rgba(242, 249, 255, 0.97) !important;
    border-color: rgba(53, 94, 138, 0.24) !important;
    color: #123050 !important;
    box-shadow: 0 12px 30px rgba(35, 67, 101, 0.2) !important;
}

html[data-site-theme="light"] .tooltip-value {
    color: #4d6583 !important;
}

html[data-site-theme="light"] .activity-card {
    background: rgba(228, 239, 251, 0.97) !important;
    border-color: rgba(53, 94, 138, 0.22) !important;
}

html[data-site-theme="light"] .activity-card.spotify {
    background: linear-gradient(135deg, rgba(77, 143, 214, 0.2) 0%, rgba(225, 237, 250, 0.98) 100%) !important;
    border-color: rgba(77, 143, 214, 0.42) !important;
}

html[data-site-theme="light"] .activity-card.custom-status {
    background: rgba(77, 143, 214, 0.14) !important;
    border-color: rgba(77, 143, 214, 0.36) !important;
}

html[data-site-theme="light"] .activity-card.idle-status {
    background: linear-gradient(135deg, rgba(77, 143, 214, 0.14) 0%, rgba(219, 232, 248, 0.95) 50%, rgba(122, 99, 180, 0.1) 100%) !important;
    border-color: rgba(77, 143, 214, 0.24) !important;
}

html[data-site-theme="light"] .activity-card.idle-status:hover {
    border-color: rgba(77, 143, 214, 0.36) !important;
    background: linear-gradient(135deg, rgba(77, 143, 214, 0.18) 0%, rgba(219, 232, 248, 0.97) 50%, rgba(122, 99, 180, 0.14) 100%) !important;
}

html[data-site-theme="light"] .idle-status-icon {
    background: rgba(77, 143, 214, 0.16) !important;
    border-color: rgba(77, 143, 214, 0.28) !important;
    color: #2e6299 !important;
}

html[data-site-theme="light"] .idle-status-label {
    color: #2e6299 !important;
}

html[data-site-theme="light"] .activity-type,
html[data-site-theme="light"] .activity-artist,
html[data-site-theme="light"] .idle-status-label,
html[data-site-theme="light"] .custom-status-label,
html[data-site-theme="light"] .progress-time {
    color: #4f6682 !important;
}

html[data-site-theme="light"] .activity-title,
html[data-site-theme="light"] .custom-status-text,
html[data-site-theme="light"] .idle-status-text,
html[data-site-theme="light"] .spotify-track-info .activity-title,
html[data-site-theme="light"] .spotify-track-info .activity-artist {
    color: #10243b !important;
}

html[data-site-theme="light"] .activity-karaoke-stage {
    background: linear-gradient(180deg, rgba(219, 232, 248, 0.95) 0%, rgba(211, 226, 245, 0.95) 100%) !important;
    border-color: rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] .activity-karaoke-line.current {
    color: #14345a !important;
    text-shadow: none !important;
}

html[data-site-theme="light"] .progress-container {
    background: rgba(30, 55, 85, 0.28) !important;
}

html[data-site-theme="light"] .progress-bar {
    background: linear-gradient(90deg, #1f5999, #3f84cf) !important;
}

html[data-site-theme="light"] .projects-search-input-wrap,
html[data-site-theme="light"] .skills-search-input-wrap {
    background: rgba(225, 237, 251, 0.98) !important;
    border-color: rgba(53, 94, 138, 0.24) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
    border-radius: 14px !important;
    min-height: 46px;
    padding: 0 12px !important;
}

html[data-site-theme="light"] .projects-search-input-wrap:focus-within,
html[data-site-theme="light"] .skills-search-input-wrap:focus-within {
    border-color: rgba(47, 111, 182, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(77, 143, 214, 0.2) !important;
}

html[data-site-theme="light"] .projects-search-input,
html[data-site-theme="light"] .skills-search-input {
    color: #10243b !important;
}

html[data-site-theme="light"] .projects-search-input-wrap i,
html[data-site-theme="light"] .skills-search-input-wrap i {
    color: #355a84 !important;
}

html[data-site-theme="light"] .projects-search-clear,
html[data-site-theme="light"] .skills-search-clear {
    background: rgba(206, 223, 242, 0.98) !important;
    border-color: rgba(53, 94, 138, 0.28) !important;
    color: #16355a !important;
}

html[data-site-theme="light"] .projects-search-wrap,
html[data-site-theme="light"] .skills-search-wrap {
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(237, 245, 254, 0.96) 0%, rgba(226, 238, 251, 0.94) 100%) !important;
    border: 1px solid rgba(53, 94, 138, 0.2) !important;
    box-shadow: 0 10px 24px rgba(37, 70, 106, 0.1) !important;
}

html[data-site-theme="light"] #projects .project-card {
    background: linear-gradient(180deg, #eef6ff 0%, #e4effc 100%) !important;
    border-color: rgba(53, 94, 138, 0.22) !important;
}

html[data-site-theme="light"] #skills .language-card {
    background: linear-gradient(180deg, #f3f8ff 0%, #e8f1fc 100%) !important;
    border-color: rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] :is(
    .project-link-btn,
    .contact-now-btn,
    .form-submit-btn,
    .track-action-btn,
    .external-confirm-btn,
    .settings-reset-btn,
    .about-photo-open-btn,
    .donate-copy-btn,
    .music-control,
    .preview-btn
) {
    background: linear-gradient(180deg, #72aee8 0%, #4d8fd6 100%) !important;
    border-color: rgba(34, 81, 131, 0.58) !important;
    color: #0d2239 !important;
    box-shadow: 0 8px 16px rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] .site-empty-title {
    color: #12253d !important;
}

html[data-site-theme="light"] .site-empty-card p {
    color: #4a6383 !important;
}

html[data-site-theme="light"] :is(
    .project-link-btn:hover,
    .contact-now-btn:hover,
    .form-submit-btn:hover,
    .track-action-btn:hover,
    .external-confirm-btn:hover,
    .settings-reset-btn:hover,
    .about-photo-open-btn:hover,
    .donate-copy-btn:hover,
    .music-control:hover,
    .preview-btn:hover
) {
    background: linear-gradient(180deg, #86bbee 0%, #5b9de0 100%) !important;
    border-color: rgba(34, 81, 131, 0.7) !important;
}

html[data-site-theme="light"] .track-action-btn.ghost {
    background: rgba(209, 226, 245, 0.95) !important;
    border-color: rgba(53, 94, 138, 0.3) !important;
    color: #153155 !important;
}

html[data-site-theme="light"] .project-detail-modal {
    background: linear-gradient(180deg, var(--ocean-surface-0) 0%, var(--ocean-surface-2) 100%) !important;
    border-color: var(--ocean-border) !important;
    box-shadow: 0 26px 56px rgba(37, 70, 106, 0.18) !important;
}

html[data-site-theme="light"] .project-detail-modal::before {
    background: linear-gradient(90deg, transparent, rgba(53, 94, 138, 0.34), transparent) !important;
}

html[data-site-theme="light"] .project-detail-header {
    border-bottom-color: rgba(53, 94, 138, 0.24) !important;
}

html[data-site-theme="light"] .project-detail-kicker,
html[data-site-theme="light"] .project-detail-subtitle,
html[data-site-theme="light"] .project-detail-section-title,
html[data-site-theme="light"] .project-detail-meta-item .meta-label,
html[data-site-theme="light"] .project-contributor-role {
    color: #4f6784 !important;
}

html[data-site-theme="light"] .project-detail-title,
html[data-site-theme="light"] .project-contributor-name,
html[data-site-theme="light"] .project-detail-meta-item .meta-value {
    color: #12253d !important;
}

html[data-site-theme="light"] .project-detail-description {
    color: #2f4d6d !important;
}

html[data-site-theme="light"] .project-detail-close {
    background: rgba(230, 240, 252, 0.92) !important;
    border-color: var(--ocean-border) !important;
    color: var(--ocean-text) !important;
}

html[data-site-theme="light"] .project-detail-share-btn {
    background: rgba(230, 240, 252, 0.92) !important;
    border-color: var(--ocean-border) !important;
    color: var(--ocean-text) !important;
}

html[data-site-theme="light"] .project-detail-share-btn.copied {
    background: rgba(72, 201, 137, 0.16) !important;
    border-color: rgba(38, 131, 80, 0.34) !important;
    color: #18523a !important;
}

html[data-site-theme="light"] .project-detail-meta-item,
html[data-site-theme="light"] .project-contributor-card {
    background: rgba(233, 242, 253, 0.86) !important;
    border-color: rgba(53, 94, 138, 0.22) !important;
}

html[data-site-theme="light"] .project-tech-pill {
    background: rgba(225, 237, 251, 0.9) !important;
    border-color: rgba(53, 94, 138, 0.24) !important;
    color: #1f446a !important;
}

html[data-site-theme="light"] .project-detail-actions .project-link-btn {
    background: rgba(225, 237, 251, 0.9) !important;
    border-color: rgba(53, 94, 138, 0.24) !important;
    color: #1f446a !important;
}

html[data-site-theme="light"] .calendar-container {
    margin-top: 10px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
}

html[data-site-theme="light"] .calendar-status-kicker,
html[data-site-theme="light"] .calendar-status-title {
    color: #4f6784 !important;
}

html[data-site-theme="light"] .calendar-status-kicker {
    color: #4f6784 !important;
}

html[data-site-theme="light"] .calendar-status-frame {
    background: linear-gradient(180deg, rgba(230, 240, 252, 0.98), rgba(225, 237, 251, 0.9)) !important;
    border: 1px solid rgba(53, 94, 138, 0.18) !important;
    box-shadow: none !important;
}

html[data-site-theme="light"] .calendar-live-badge {
    border-color: rgba(186, 64, 64, 0.28) !important;
    background: rgba(227, 92, 92, 0.12) !important;
    color: #7d2828 !important;
}

html[data-site-theme="light"] .calendar-live-badge.is-online {
    border-color: rgba(38, 131, 80, 0.32) !important;
    background: rgba(67, 171, 107, 0.12) !important;
    color: #18523a !important;
}

html[data-site-theme="light"] .calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 0;
}

html[data-site-theme="light"] .calendar-header-nav {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(53, 94, 138, 0.14) !important;
    background: rgba(225, 237, 251, 0.62) !important;
}

html[data-site-theme="light"] .calendar-nav {
    background: rgba(225, 237, 251, 0.9) !important;
    border: 1px solid rgba(53, 94, 138, 0.24) !important;
    color: #1f446a !important;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

html[data-site-theme="light"] .calendar-nav:hover {
    background: rgba(219, 232, 248, 0.95) !important;
    border-color: rgba(53, 94, 138, 0.32) !important;
    color: #1a3f66 !important;
}

html[data-site-theme="light"] .calendar-month-year {
    font-weight: 700;
    color: #12253d !important;
    font-size: 14px;
    text-align: center;
    flex: 1;
}

html[data-site-theme="light"] .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 0;
}

html[data-site-theme="light"] .calendar-day-header {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: #4f6784 !important;
    padding: 7px 4px;
    background: rgba(225, 237, 251, 0.72) !important;
    border: 1px solid rgba(53, 94, 138, 0.18) !important;
    border-radius: 10px;
}

html[data-site-theme="light"] .calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    border: 1px solid rgba(53, 94, 138, 0.2) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: rgba(239, 246, 255, 0.78) !important;
}

html[data-site-theme="light"] .calendar-day.working {
    background: rgba(77, 143, 214, 0.18) !important;
    color: #12365a !important;
    border-color: rgba(77, 143, 214, 0.42) !important;
}

html[data-site-theme="light"] .calendar-day.not-working {
    background: rgba(227, 92, 92, 0.12) !important;
    color: #7d2828 !important;
    border-color: rgba(186, 64, 64, 0.32) !important;
}

html[data-site-theme="light"] .calendar-day:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 70, 106, 0.15) !important;
}

html[data-site-theme="light"] .calendar-day.current {
    box-shadow: 0 0 0 2px rgba(77, 143, 214, 0.6) inset !important;
}

html[data-site-theme="light"] .calendar-day.other-month {
    color: #9fb0c9 !important;
    background: rgba(225, 237, 251, 0.6) !important;
    border-color: rgba(53, 94, 138, 0.16) !important;
}

html[data-site-theme="light"] .calendar-legend {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 2px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    flex-wrap: wrap;
}

html[data-site-theme="light"] .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #4f6784 !important;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(225, 237, 251, 0.9) !important;
    border: 1px solid rgba(53, 94, 138, 0.18) !important;
    flex: 1 1 180px;
    justify-content: center;
}

html[data-site-theme="light"] .legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(53, 94, 138, 0.3) !important;
}

html[data-site-theme="light"] .legend-color.working {
    background: rgba(77, 143, 214, 0.26) !important;
    border-color: rgba(77, 143, 214, 0.52) !important;
}

html[data-site-theme="light"] .legend-color.not-working {
    background: rgba(227, 92, 92, 0.22) !important;
    border-color: rgba(186, 64, 64, 0.42) !important;
}


html[data-site-theme="light"] .project-contributor-avatar {
    border-color: rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] :is(#about-testimonials-card, #my-favorites-section) .reviews-section,
html[data-site-theme="light"] #about-testimonials-card .reviews-section {
    background: linear-gradient(165deg, rgba(234, 244, 255, 0.94) 0%, rgba(226, 238, 251, 0.92) 100%) !important;
    border-color: rgba(53, 94, 138, 0.18) !important;
}

html[data-site-theme="light"] .my-favorites-item {
    background: linear-gradient(180deg, rgba(237, 245, 254, 0.96) 0%, rgba(226, 238, 251, 0.94) 100%) !important;
    border-color: rgba(53, 94, 138, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

html[data-site-theme="light"] .my-favorites-item-title {
    color: #12253d !important;
}

html[data-site-theme="light"] .my-favorites-group-title {
    color: #4f6784 !important;
}


html[data-site-theme="light"] #skills .skills-search-wrap {
    margin-bottom: 16px;
    padding: 14px !important;
    border: 1px solid rgba(53, 94, 138, 0.2) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(237, 245, 254, 0.96) 0%, rgba(226, 238, 251, 0.94) 100%) !important;
    box-shadow: 0 10px 24px rgba(37, 70, 106, 0.1) !important;
}

html[data-site-theme="light"] #skills .skills-search-input-wrap {
    border-radius: 14px !important;
    min-height: 46px;
    padding: 0 12px !important;
}

html[data-site-theme="light"] :is(
    .contact-modal-header,
    .favorites-modal-header,
    .performance-settings-header,
    .external-confirm-header,
    .open-hours-header,
    .changelog-header,
    .track-action-header,
    .lyrics-header,
    .modal-header,
    .photography-header,
    .photography-pack-tabs,
    .photography-preview-header
) {
    border-bottom-color: rgba(53, 94, 138, 0.24) !important;
}

html[data-site-theme="light"] .contact-modal::before,
html[data-site-theme="light"] .performance-settings-modal::before,
html[data-site-theme="light"] .external-confirm-modal::before,
html[data-site-theme="light"] .photography-modal::before {
    background: linear-gradient(90deg, transparent, rgba(53, 94, 138, 0.34), transparent) !important;
}

html[data-site-theme="light"] :is(
    .performance-settings-divider,
    .contact-social-divider,
    .section-separator,
    .photography-divider
) {
    background: linear-gradient(90deg, transparent, rgba(53, 94, 138, 0.34), transparent) !important;
    box-shadow: none !important;
}

html[data-site-theme="light"] :is(
    .external-confirm-btn.ghost,
    .open-hours-time,
    .open-hours-time.muted,
    .changelog-note,
    .lyrics-content,
    .lyrics-content.lyrics-content-loading,
    .photography-status-card,
    .photography-loading-card,
    .favorite-detail-modal,
    .favorites-modal
) {
    border-color: rgba(53, 94, 138, 0.22) !important;
}

html[data-site-theme="light"] .external-confirm-note,
html[data-site-theme="light"] .external-confirm-details-card,
html[data-site-theme="light"] .external-confirm-trust-wrap {
    border-color: rgba(53, 94, 138, 0.18) !important;
    background: rgba(231, 241, 253, 0.72) !important;
}

html[data-site-theme="light"] .external-confirm-domain {
    color: #173b60 !important;
}

html[data-site-theme="light"] .external-confirm-url {
    color: #224467 !important;
}

html[data-site-theme="light"] :is(
    .external-confirm-domain-label,
    .external-confirm-url-label,
    .external-confirm-trust-copy
) {
    color: #5c7591 !important;
}

html[data-site-theme="light"] .external-confirm-trust-row,
html[data-site-theme="light"] .external-confirm-message,
html[data-site-theme="light"] .open-hours-message,
html[data-site-theme="light"] .lyrics-subtitle {
    color: #4f6784 !important;
}

html[data-site-theme="light"] .open-hours-time {
    background: rgba(67, 171, 107, 0.12) !important;
    color: #18523a !important;
    border-color: rgba(38, 131, 80, 0.34) !important;
}

html[data-site-theme="light"] .open-hours-time.muted {
    background: rgba(227, 92, 92, 0.12) !important;
    color: #7d2828 !important;
    border-color: rgba(186, 64, 64, 0.32) !important;
}

html[data-site-theme="light"] .changelog-item {
    background: linear-gradient(145deg, rgba(77, 143, 214, 0.17) 0%, rgba(233, 243, 255, 0.95) 56%) !important;
    border-color: rgba(53, 94, 138, 0.24) !important;
}

html[data-site-theme="light"] .changelog-item::before {
    background: linear-gradient(to bottom, rgba(77, 143, 214, 0.55), rgba(53, 94, 138, 0.1)) !important;
}

html[data-site-theme="light"] .changelog-version {
    border-color: rgba(53, 94, 138, 0.35) !important;
    color: #1f4368 !important;
    background: rgba(220, 234, 249, 0.72) !important;
}

html[data-site-theme="light"] .changelog-points li::before {
    background: #5a96d6 !important;
    box-shadow: 0 0 0 3px rgba(77, 143, 214, 0.16) !important;
}

html[data-site-theme="light"] .lyrics-content {
    background: rgba(234, 244, 254, 0.86) !important;
    color: #173959 !important;
}

html[data-site-theme="light"] .lyrics-line {
    color: #5a7190 !important;
}

html[data-site-theme="light"] .lyrics-line.active {
    color: #12365a !important;
    background: rgba(77, 143, 214, 0.18) !important;
}

html[data-site-theme="light"] .photography-pack-tabs {
    background: rgba(223, 235, 249, 0.72) !important;
}

html[data-site-theme="light"] .photography-item {
    background: rgba(239, 246, 255, 0.9) !important;
    border-color: rgba(53, 94, 138, 0.2) !important;
}

html[data-site-theme="light"] .photography-item::after {
    background: linear-gradient(180deg, rgba(77, 143, 214, 0.13), transparent 42%) !important;
}

html[data-site-theme="light"] .photography-preview-body {
    background: radial-gradient(circle at center, rgba(77, 143, 214, 0.14), rgba(228, 239, 252, 0.84)) !important;
}

html[data-site-theme="light"] :is(
    .performance-settings-scroll::-webkit-scrollbar-track,
    .lyrics-content::-webkit-scrollbar-track,
    .photography-grid::-webkit-scrollbar-track
) {
    background: rgba(53, 94, 138, 0.1) !important;
}

html[data-site-theme="light"] :is(
    .performance-settings-scroll::-webkit-scrollbar-thumb,
    .lyrics-content::-webkit-scrollbar-thumb,
    .photography-grid::-webkit-scrollbar-thumb
) {
    background: rgba(53, 94, 138, 0.32) !important;
}
[data-site-theme="dark"] .fixed-nav {
    background: rgba(8, 10, 18, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

[data-site-theme="dark"] .nav-container {
    background: transparent;
}

[data-site-theme="light"] .fixed-nav {
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

[data-site-theme="light"] .nav-container {
    background: transparent;
}




html[data-site-theme="light"] .about-highlight-value {
    color: #12365a !important;
}

html[data-site-theme="light"] .about-highlight-label {
    color: #6a7f9e !important;
}

html[data-site-theme="light"] .about-highlights {
    border-left: 2px solid rgba(88, 101, 242, 0.4) !important;
}


html[data-site-theme="light"] #about-story-card .about-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-site-theme="light"] #about-story-card .about-content h3 {
    color: #12365a !important;
}

html[data-site-theme="light"] #about-story-card .about-content p {
    color: #45627f !important;
}


html[data-site-theme="light"] .language-name {
    color: #6a7f9e !important;
}

html[data-site-theme="light"] .language-card:hover .language-name {
    color: #12365a !important;
}