src/App.scss

// ... (بالای فایل App.scss شامل ایمپورت‌ها، متغیرهای CSS، base styles) ...

/* Header controls - این بخش نباید با تغییرات tailwind.config.js تغییر کرده باشد */
.header-controls {
    display: flex;
    padding: 0.75rem 0.5rem; // این مقادیر از قبل تنظیم شده بودند
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.header-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg, 0.625rem);
    background-color: #e5e7eb; // رنگ خاکستری روشن برای حالت عادی
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s ease-out;

    svg {
        opacity: 0.7;
        stroke: #374151; // رنگ آیکون خاکستری تیره
        width: 24px;
        height: 24px;
    }

    &:hover {
        background-color: #d1d5db; // کمی تیره‌تر در هاور
    }

    &:active {
        background-color: #9ca3af; // باز هم تیره‌تر در کلیک
        transform: scale(0.95);
    }
}

.dark .header-button {
    background-color: oklch(0.28 0 0); // رنگ پس‌زمینه دکمه در حالت تاریک
    &:hover {
        background-color: oklch(0.35 0 0);
    }
    &:active {
        background-color: oklch(0.40 0 0);
        transform: scale(0.95);
    }
    svg {
        opacity: 0.8;
        stroke: oklch(0.85 0 0); // رنگ آیکون در حالت تاریک
    }
}

// ... (بقیه فایل App.scss شامل .logo-animation-wrapper، .footer-controls-html-like، .control-button و غیره باید مانند آخرین نسخه موفق قبلی باشد) ...