table {
        border-collapse: collapse;
        width: 400px;
        margin-bottom: 20px;
    }
    td, th {
        border: 1px solid #aaa;
        padding: 6px;
        text-align: left;
    }
    input[type=text], input[type=number] {
        padding: 6px;
        width: 200px;
        margin: 4px;
    }
    button {
        padding: 6px 12px;
    }

 
    body { margin:0; font-family: Arial, sans-serif; background: #f5f5f5; }
    .top-bar { width:100%; padding:15px; background:#333; color:white; text-align:center; font-size:1.8rem; }
    .nav-bar { width:100%; background:#555; padding:10px 0; display:flex; justify-content:center; }
    .nav-bar a { color:white; text-decoration:none; margin:0 15px; font-weight:bold; }
    .nav-bar a:hover { text-decoration:underline; }
    .container { display:grid; grid-template-columns:1fr 1fr; padding:20px; gap:20px; }
    .todo-table { width:100%; border-collapse: collapse; margin-bottom:10px; }
    .todo-table th, .todo-table td { border:1px solid #aaa; padding:6px; text-align:left; }
    input[type=text], input[type=number] { padding:6px; margin:4px 0; width:70%; }
    button { padding:6px 12px; }
    .completed { color: green; font-weight:bold; text-align:center; }
    .incomplete { color: red; font-weight:bold; text-align:center; }
    

    .daily-progress {
    background: #fff;
    padding: 20px;
    max-width: 400px;
    border-radius: 8px;
}

.progress-bar {
    background: #ddd;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    margin: 8px 0 15px;
}

.progress-fill {
    background: #4caf50;
    height: 100%;
    transition: width 0.3s;
}

.task-row {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}