:root {
    --checklist-bg: #ffffff;
    --checklist-text: #414856;
    --checklist-border-color: #e9ecef;
    --checklist-check-color: #4f29f0;
    --checklist-disabled-color: #6c757d;
}
body.dark-theme {
    --checklist-bg: #2b2f3a; 
    --checklist-text: #adb5bd;
    --checklist-border-color: #495057;
    --checklist-disabled-color: #6c757d;
}
.todo-container { margin-top: 80px; }
#addButton { margin: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
#importButton { margin: 0; border-radius: 0; }
.todo-container {
    background-color: var(--checklist-bg);
    border: 1px solid var(--checklist-border-color);
    color: var(--checklist-text);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 1200px;  /* Максимальная ширина */
    margin-left: auto;
    margin-right: auto; 
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.todo-container .form-control { height: 38px; }
#checklist { display: flex; flex-direction: column; gap: 0; margin-top: 20px; }
.checklist-item {
    display: flex; align-items: center; width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid var(--checklist-border-color);
    transition: border-color 0.3s;
}
.checklist-item:last-child { border-bottom: none; }


#checklist input[type="checkbox"] {
    -webkit-appearance: none; -moz-appearance: none;
    position: relative; height: 15px; width: 15px; outline: none;
    border: 0; margin: 0 15px 0 0; cursor: pointer;
    background: transparent; flex-shrink: 0;
    z-index: 2;
}
#checklist label {
    color: var(--checklist-text);
    position: relative; cursor: pointer; display: flex;
    align-items: center; transition: color 0.3s ease;
    flex-grow: 1; word-break: break-word;
    z-index: 1;
}


#checklist label::before,
#checklist label::after { content: ""; position: absolute; }
#checklist label::before {
    height: 2px; width: 8px; left: -27px;
    background: var(--checklist-check-color);
    border-radius: 2px;
    transition: background 0.3s ease;
}
#checklist label:after {
    height: 4px; width: 4px; top: 8px; left: -25px;
    border-radius: 50%;
}
#checklist input[type="checkbox"]::before,
#checklist input[type="checkbox"]::after {
    content: ""; position: absolute; height: 2px; top: auto;
    background: var(--checklist-check-color); border-radius: 2px;
}
#checklist input[type="checkbox"]::before { width: 0px; right: 60%; transform-origin: right bottom; }
#checklist input[type="checkbox"]::after { width: 0px; left: 40%; transform-origin: left bottom; }
#checklist input[type="checkbox"]:checked::before { animation: check-01 0.4s ease forwards; }
#checklist input[type="checkbox"]:checked::after { animation: check-02 0.4s ease forwards; }
#checklist input[type="checkbox"]:checked + label { color: var(--checklist-disabled-color); }
#checklist input[type="checkbox"]:checked + label::after { animation: firework 0.5s ease forwards 0.1s; }




#checklist label span {
    position: relative;
}
#checklist label span::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 0;
    height: 2px;
    background: var(--checklist-disabled-color);
}
#checklist input[type="checkbox"]:checked + label span::before {
    animation: slice 0.4s ease forwards;
}
@keyframes slice {
    0% { width: 0%; }
    50% { width: 100%; }
    100% { width: 100%; }
}

#checklist input[type="checkbox"]:checked + label::before {
    background: transparent;
}


@keyframes check-01 { 0% { width: 4px; top: auto; transform: rotate(0); } 50% { width: 0px; top: auto; transform: rotate(0); } 51% { width: 0px; top: 8px; transform: rotate(45deg); } 100% { width: 5px; top: 8px; transform: rotate(45deg); } }
@keyframes check-02 { 0% { width: 4px; top: auto; transform: rotate(0); } 50% { width: 0px; top: auto; transform: rotate(0); } 51% { width: 0px; top: 8px; transform: rotate(-45deg); } 100% { width: 10px; top: 8px; transform: rotate(-45deg); } }
@keyframes firework { 0% { opacity: 1; box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0; } 30% { opacity: 1; } 100% { opacity: 0; box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0; } }

.button-delete { width: 50px; height: 50px; border-radius: 50%; background-color: rgb(20, 20, 20); border: none; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.164); cursor: pointer; transition-duration: .3s; overflow: hidden; position: relative; }
.button-delete .svgIcon { width: 12px; transition-duration: .3s; }
.button-delete .svgIcon path { fill: white; }
.button-delete:hover { width: 140px; border-radius: 50px; transition-duration: .3s; background-color: rgb(255, 69, 69); align-items: center; }
.button-delete:hover .svgIcon { width: 50px; transition-duration: .3s; transform: translateY(60%); }
.button-delete::before { position: absolute; top: -20px; content: "Delete All"; color: white; transition-duration: .3s; font-size: 2px; }
.button-delete:hover::before { font-size: 13px; opacity: 1; transform: translateY(30px); transition-duration: .3s; }
.delete-item {
    background-color: #ff4d4d; color: #fff; border: none; border-radius: 5px;
    padding: 5px 10px; margin-left: 10px; cursor: pointer; font-size: 12px;
    transition: background-color 0.3s ease; flex-shrink: 0;
}
.delete-item:hover { background-color: #ff1a1a; }

.item-edit-input {
    width: 100%;
    box-sizing: border-box; 
}

.drag-handle {
    cursor: grab;
    margin-right: 15px;
    color: var(--checklist-disabled-color);
    transition: color 0.2s ease-in-out;
}
.drag-handle:hover {
    color: var(--checklist-check-color);
}

.task-input-section {
    background-color: rgba(0, 0, 0, 0.03); 
    margin: 0 -1rem 1rem -1rem;
    border-radius: 10px;
}

body.dark-theme .task-input-section {
    background-color: rgba(0, 0, 0, 0.15);
}

.task-input-section .input-group {
    display: flex;
    flex-wrap: nowrap;
}
.task-input-section .form-control {
    flex-grow: 1; 
}
.task-input-controls {
    display: flex;
    margin-left: 0.5rem;
}
.task-input-controls .btn {
    white-space: nowrap; 
}

.bottom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--checklist-border-color);
}

/* 3. АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ */
@media (max-width: 576px) {
    .todo-container {
        padding: 1rem;
        border-radius: 0px;
    }

    .task-input-section .input-group {
        flex-direction: column;
        gap: 0.75rem;
    }

    .task-input-section .form-control {
        width: 100%;
    }

    .task-input-controls {
        margin-left: 0;
        width: 100%;
    }
    .task-input-controls .btn {
        flex-grow: 1;
    }

    .bottom-controls {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    main {
        padding: 0px;
    }

    #addButton { margin: 0; border-radius: 0; }
    #importButton { margin: 0; border-radius: 0; }
}