/* One palette shared with task cards, on all screen sizes. */
:root { --task-panel-bg: #d699b930; --task-panel-border: rgba(136,13,77,.12); }
html[data-theme="dark"] { --task-panel-bg: #880d4d30; --task-panel-border: rgba(255,255,255,.07); }
html body.tasksPage :is(.taskCard, .tasksFilters, .statisticCard, .statisticsCard, .variantsSection, .calendarSection, .supportTicketCard) {
    background: var(--task-panel-bg);
    border-color: var(--task-panel-border);
    backdrop-filter: none;
}
html body.statisticsPage .calendarSection::before,
html body.statisticsPage .calendarSection::after { display: none; }

/* Completion is a deliberate exception to the shared neutral palette. */
html body.tasksPage .taskCard.completedCard {
    background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(16,185,129,.09));
    border-color: rgba(34,197,94,.5);
    box-shadow: inset 3px 0 0 rgba(34,197,94,.75), 0 4px 20px rgba(16,185,129,.06);
}
html body.tasksPage .taskCard.completedCard .taskId {
    background: rgba(34,197,94,.18);
    color: #15803d;
}
html[data-theme="dark"] body.tasksPage .taskCard.completedCard .taskId,
html[data-theme="dark"] body.tasksPage .taskCard.completedCard .taskResult.correct {
    color: #86efac;
}
html body.tasksPage .completeToggle input[type="checkbox"] { accent-color: #22c55e; }