.task-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 3rem; background: var(--surface); padding: 2.5rem;
    border-radius: var(--radius-lg); border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.task-input-section { 
    display: flex; gap: 1.5rem; margin-bottom: 3rem; background: var(--surface);
    padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--border);
}
.task-input-section input { 
    flex: 1; padding: 1.25rem 2rem; border: 2px solid transparent; 
    background: var(--bg); color: var(--text); border-radius: var(--radius-sm); 
    font-size: 1.15rem; outline: none; transition: var(--transition);
}
.task-input-section input:focus { border-color: var(--primary); box-shadow: 0 0 15px var(--primary-glow); background: var(--surface-light); }

.task-list-container {
    background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border);
    overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.task-table { width: 100%; border-collapse: collapse; }
.task-table th, .task-table td { padding: 1.5rem 2rem; text-align: right; border-bottom: 1px solid var(--border); }
.task-table th { background: var(--bg); font-weight: 900; color: var(--text-light); font-size: 1rem; letter-spacing: 0.5px; }
.task-table tr { transition: var(--transition); font-size: 1.1rem; font-weight: 500; }
.task-table tr:hover { background: rgba(255,255,255,0.02); }

.task-status { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text-light); }
.task-row.completed td { background: rgba(16, 185, 129, 0.05); }
.task-row.completed td:first-child { text-decoration: line-through; color: var(--text-light); }
.task-row.completed .task-status { color: var(--secondary); text-shadow: 0 0 10px var(--secondary-glow); }

@media (max-width: 968px) {
    .task-header { flex-direction: column; gap: 2rem; align-items: stretch; padding: 1.5rem; }
    .task-input-section { flex-direction: column; padding: 1rem; }
    .task-input-section input { width: 100%; }
    
    .task-list-container { overflow-x: auto; }
    .task-table { min-width: 600px; /* forces horizontal scroll if needed */ }
}