.epj-wrapper { font-family:Poppins,sans-serif; padding:20px; }
.epj-category { background:#f8f6ef; padding:20px; margin-bottom:20px; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,0.08); }

.epj-item { 
    display:flex; 
    align-items:center; 
    gap:15px; 
    padding:12px 0; 
    border-bottom:1px solid #ddd;
    font-size:18px;
}

.epj-item input[type=checkbox] {
    width:24px;
    height:24px;
}

.epj-text { flex-grow:1; line-height:1.5; }

.epj-streak { font-size:14px; color:#555; display:block; margin-top:4px; }

.epj-answered {
    background:#84B8A3; 
    color:white; 
    border:none; 
    padding:6px 12px; 
    border-radius:8px; 
    cursor:pointer;
    font-size:14px;
}

.epj-delete {
    color:#777; 
    font-size:22px; 
    cursor:pointer; 
    padding:0 8px;
    transition:0.2s;
}

.epj-delete:hover { color:#444; }

.epj-add-btn {
    margin-top:10px;
    background:#84B8A3; 
    color:white;
    padding:10px 16px; 
    border:none; 
    border-radius:12px; 
    cursor:pointer;
    font-size:16px;
}

/* Modal */
#epj-modal-overlay {
    position:fixed;
    top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.35);
}

#epj-modal {
    position:fixed;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    background:white;
    padding:20px;
    border-radius:16px;
    width:80%;
    max-width:400px;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.epj-modal-content h2 {
    margin-top:0;
    font-size:22px;
}

#epj-modal-input {
    width:100%;
    height:80px;
    margin-top:10px;
    padding:10px;
    font-size:16px;
    border-radius:8px;
    border:1px solid #ccc;
}

.epj-modal-actions {
    margin-top:15px;
    text-align:right;
}

#epj-modal-cancel {
    background:#ddd;
    border:none;
    padding:8px 12px;
    border-radius:8px;
    margin-right:6px;
}

#epj-modal-save {
    background:#84B8A3;
    color:white;
    border:none;
    padding:8px 14px;
    border-radius:8px;
}

/* Hidden class */
.epj-hidden { display:none; }