body{
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(135deg,#667eea,#764ba2);
    margin:0;
}
/* 📱 MOBILE RESPONSIVE */

@media (max-width:768px){

    .container{
        width:95%;
    }

    /* Dashboard stack */
    .dashboard{
        flex-direction:column;
    }

    /* Form inputs */
    input, textarea{
        font-size:16px;
    }

    button{
        width:100%;
    }

    /* Table responsive */
    table, thead, tbody, th, td, tr{
        display:block;
        width:100%;
    }

    thead{
        display:none;
    }

    tr{
        background:white;
        margin-bottom:15px;
        border-radius:10px;
        padding:10px;
        box-shadow:0 3px 8px rgba(0,0,0,0.2);
    }

    td{
        display:flex;
        justify-content:space-between;
        padding:8px;
        border:none;
        border-bottom:1px solid #eee;
    }

    td:last-child{
        border-bottom:none;
    }

    /* Labels show in mobile */
    td::before{
        content: attr(data-label);
        font-weight:bold;
    }

    /* Action buttons */
    .action-btn{
        margin:2px;
    }

}
.container{
    width:90%;
    max-width:1000px;
    margin:30px auto;
}

h2{
    text-align:center;
    color:white;
}

form{
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
    margin-bottom:20px;
}

input, textarea{
    width:100%;
    padding:12px;
    margin:10px 0;
    border-radius:8px;
    border:1px solid #ccc;
}

button{
    background:#667eea;
    color:white;
    padding:12px;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

button:hover{
    background:#5a67d8;
}

.success{
    color:#00ffae;
    text-align:center;
}

.duplicate{
    color:#ff4d4d;
    text-align:center;
    font-weight:bold;
}

table{
    width:100%;
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

th{
    background:#667eea;
    color:white;
}

th, td{
    padding:12px;
    text-align:left;
}

tr:nth-child(even){
    background:#f2f2f2;
}

.highlight{
    background:#ffcccc !important;
}

.action-btn{
    padding:6px 10px;
    border:none;
    border-radius:6px;
    color:white;
    cursor:pointer;
}

.edit{
    background:#28a745;
}

.delete{
    background:#dc3545;
}    


.dashboard{
    display:flex;
    gap:15px;
    margin:20px 0;
}

.card{
    flex:1;
    padding:20px;
    border-radius:12px;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.total{
    background:#4e73df;
    color:white;
}

.done{
    background:#1cc88a;
    color:white;
}

.pending{
    background:#e74a3b;
    color:white;
}